<template>
  <div class="receipt">
    <header>
      <div class="total">
        <div class="total-left">“ 混凝土核算 ”-{{ this.name }}</div>
        <div class="total-right">
          <div>
          </div>
          <div>
            <el-radio-group v-model="radio2" @change="timeChange(radio2)">
              <el-radio-button label="day">本日</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="icon">
            <i @click="pushIndex" class="el-icon-s-home" :style="{ fontSize: '32px', color: 'rgb(64,158,225)' }"></i>
            <i class="el-icon-s-operation" :style="{
              fontSize: '32px',
              marginLeft: '15px',
              color: 'rgb(64,158,225)',
            }"></i>
          </div>
        </div>
      </div>
      <footer></footer>
    </header>
    <!-- 数字信息 -->
    <div class="num">
      <div class="now">计划量 &nbsp;<span>{{ isNaN(Math.floor(Number(this.num.planweigh))) ? 0 : Math.floor(Number(this.num.planweigh))}}</span></div>
      <div class="before">生产量&nbsp;<span>{{ isNaN(Math.floor(Number(this.num.proweigh))) ? 0 : Math.floor(Number(this.num.proweigh))}}</span></div>
      <div class="next">签收量&nbsp;<span>{{ isNaN(Math.floor(Number(this.num.sign))) ? 0 : Math.floor(Number(this.num.sign))}}</span></div>
    </div>
    <!-- 详情页面 -->
    <div class="detail">
      <div class="detail-left">
        <el-table :data="list" style="width: 100%" border stripe v-loading="loading" height="440">
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="材料" width="280">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="规格型号" width="330">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ row.material_model }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="efficiency" label="总耗量(方)">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ Number(row.sum).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-right">
        <el-input placeholder="请输入规格型号检索" prefix-icon="el-icon-search" v-model="input2" class="ss">
        </el-input>
        <!-- 右下项目列表 -->
        <div class="dr-list">
          <div class="dr-message" @click="openChild(item.order_id)" v-for="(item, index) in detail" :key="index">
            <div class="sty"></div>
            <div class="dr-message-font">
              <p>{{ item.material_name }}</p>
              <p>用料单位 : {{ item.use_part_full_name }}</p>
              <p>申请量 : <span>{{ item.apply_quantity }}</span></p>
              <p>签收量 : <span>{{ item.signed_total_amount }}</span></p>
            </div>
            <!-- 箭头 -->
            <div class="arrowhead" style="cursor: pointer;">
              <span>&gt;</span>
            </div>
          </div>
          <!-- 查看项目详情 -->
          <el-dialog class="xiangqing" title="" :visible.sync="dialogFormVisible" width="90%">
            <!-- 基本信息 -->
            <div class="jiben">
              <div class="jiben-total">
                <div class="jiben-total-left">
                  <p style="
                              width: 10px;
                              height: 30px;
                              background-color: blue;
                            "></p>
                  <span style="font-size: 18px; margin-top:20px; font-weight: 600">
                    基本信息
                  </span>
                </div>
                <div class="jiben-total-right">
                  <p style="
                              width: 75px;
                              height: 40px;
                              background-color: rgb(233, 241, 246);
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              border-radius: 10px;
                              color: blue;
                              font-size: 18px;
                            ">
                    总量签收
                  </p>
                  <span>单号：{{ this.num2.number }}</span>
                </div>
              </div>
              <div class="jiben-nr">
                <table>
                  <tr>
                    <th>
                      使用部位：<span>{{ this.num2.use_part_full_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>
                      供应单位：<span>{{ this.num2.supplier_name }}</span>
                    </th>
                    <th>
                      用料单位：<span>{{ this.num2.use_part_full_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>混凝土类型：<span>{{ this.num2.type == 0 ? "商品混凝土" : this.num2.type == 1 ? "自拌混凝土" : "调入混凝土" }}</span>
                    </th>
                    <th>规格型号：<span>{{ this.num2.material_model }}</span></th>
                  </tr>
                  <tr>
                    <th>
                      塌落度：
                      <span>{{ this.num2.slump }} </span>
                    </th>
                    <th>申请时间：<span>{{ this.num2.create_time }}</span></th>
                    <th>输入泵类型：<span>W20230725082156WQov</span></th>
                  </tr>
                  <tr>
                    <th>申请人：<span>{{ this.num2.creator_name }}</span></th>
                    <th>实验室：<span>{{ this.num2.lab_pass }}</span></th>
                    <th>签收时间：<span>{{ this.num2.signing_time }}</span></th>
                  </tr>
                  <tr>
                    <th>审批人：<span></span></th>
                    <th>签收人：<span>{{ this.num2.signer_name }}</span></th>
                    <th>拌合站：<span>{{ this.num2.mixing_station_pass }}</span></th>
                  </tr>
                </table>
              </div>
            </div>
            <div class="tag">
              <div class="shiji">
                <div>
                  <i class="el-icon-s-ticket" :style="{ fontSize: '70px', color: 'rgb(45,130,187)' }"></i>
                </div>
                <div>
                  <p>{{ this.num2.material_name }}</p>
                </div>
              </div>
              <div class="sum">
                <div>
                  <i class="el-icon-s-data" :style="{ fontSize: '70px', color: 'rgb(45,130,187)' }"></i>
                </div>
                <div>
                  <p>{{ this.num2.material_model }} </p>
                </div>
              </div>
              <div class="sum">
                <div>
                  <i class="el-icon-s-data" :style="{ fontSize: '70px', color: 'rgb(45,130,187)' }"></i>
                </div>
                <div>
                  <p style="height:10px">{{ this.num2.apply_quantity }}</p>
                  <p style="height:10px">申请量</p>
                </div>
              </div>
              <div class="sum">
                <div>
                  <i class="el-icon-s-data" :style="{ fontSize: '70px', color: 'rgb(45,130,187)' }"></i>
                </div>
                <div>
                  <p style="height:10px"></p>
                  <p style="height:10px">审批量</p>
                </div>
              </div>
              <div class="sum">
                <div>
                  <i class="el-icon-s-data" :style="{ fontSize: '70px', color: 'rgb(45,130,187)' }"></i>
                </div>
                <div>
                  <p style="height:10px">{{ this.num2.signed_total_amount }}</p>
                  <p style="height:10px">签收量</p>
                </div>
              </div>
            </div>
            <!-- 磅单信息 -->
            <div class="bangdan">
              <div class="bangdan-total">
                <div class="bangdan-total-left">
                  <p style="
                    width: 10px;
                    height: 30px;
                    background-color: blue;
                  "></p>
                  <span style="font-size: 18px; font-weight: 600; margin-top:15px;">
                    签收明细
                  </span>
                </div>
              </div>
              <div class="bangdan-nr">
                <el-table :data="tableData1" style="width: 100%" border stripe>
                  <el-table-column prop="id" type="index" label="序号" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="签收方量" width="280">
                    <template slot-scope="{ row }">
                      <div class="custom-slot">
                        {{ row.signed_total_amount }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sex" label="签收人" width="330">
                    <template slot-scope="{ row }">
                      <div class="custom-slot">
                        {{ row.signer_name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="efficiency" label="签收时间">
                    <template slot-scope="{ row }">
                      <div class="custom-slot">
                        {{ row.signing_time }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import { geConcreteInfo, getPcConcreteAccountDetail, getPcConcreteProductionList, getPcConcreteDetailByCode } from "../../api";
export default {
  data () {
    return {
      loading: true,
      // 材料信息
      input2: "",
      // 详情左侧模拟数据
      tableData: [],
      tableData1: [], // 签收明细表格
      // 类别信息
      values: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      radio1: "全部",
      radio2: "day",
      // 数据部分
      id: '',
      name: '',
      num: {},
      detail: [],
      list: [],
      childName: "",
      num2: {}, // dialog 详情基本信息
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RSid");
      this.name = localStorage.getItem("RSname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted () {
    this.getdata();
    this.table();
  },
  methods: {
    // 获取数字数据
    async getdata () {
      var res1 = await geConcreteInfo({
        onpage: this.radio2,
        org_id: this.id,
      })
      this.num = res1.data.data[0].accounting
    },
    // 获取初始列表
    async table () {
      var res = await getPcConcreteAccountDetail({
        org_id: this.id,
        onpage: this.radio2,
      })
      this.detail = res.data.data.detail
      this.list = res.data.data.list
      this.loading = false
    },
    // 时间段改变
    async timeChange (value) {
      this.radio2 = value
      this.loading = true
      var res = await getPcConcreteProductionList({
        org_id: this.id,
        onpage: this.radio2,
      })
      this.detail = res.data.data[0].detail
      this.list = res.data.data[0].list
      var res1 = await geConcreteInfo({
        onpage: this.radio2,
        org_id: this.id,
      })
      this.num = res1.data.data[0].accounting
      this.loading = false
    },
    // 子案例打开事件
    async openChild (value) {
      this.childName = value
      this.dialogFormVisible = true;
      var res = await getPcConcreteDetailByCode({
        org_id: this.id,
        onpage: this.radio2,
      })
      this.detail = res.data.data.detail
      this.list = res.data.data.list
      this.num2 = this.detail[0]
      this.tableData1 = this.detail
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    }

  },
};
</script>

<style scoped lang="scss">
.receipt {
  width: 100%;

  header {
    width: 100%;
    height: 130px;

    .total {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;

      .total-left {
        width: 900px;
        margin-top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: rgb(80, 139, 248);
      }

      .total-right {
        width: 500px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;

        .dateday {
          margin-left: -400px;
        }

        div:nth-child(2) {
          margin-left: -130px;

          ul {
            width: 200px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            align-items: center;
            border-radius: 10px;

            li:last-child {
              border: none;
            }

            li {
              text-align: center;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              list-style: none;
              border-right: 1px solid black;
            }
          }
        }

        .icon {
          width: 80px;
          margin-left: -80px;
        }
      }
    }

    footer {
      width: 100%;
      height: 18px;
      background-color: rgb(216, 236, 255);
      color: blue;
      overflow: hidden;
    }
  }

  .num {
    width: 99%;
    height: 155px;
    margin: 15px auto;
    display: flex;
    justify-content: space-around;

    div {
      width: 31%;
      height: 90%;
      border: 2px solid gray;
    }

    .now {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: blue;
      }
    }

    .before {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: blue;
      }
    }

    .next {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: greenyellow;
      }
    }
  }

  .detail {
    width: 96.5%;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    border: 1px solid black;
    margin: 10px auto;
    border-radius: 15px;

    .detail-left {
      width: 65%;
      margin-top: 20px;
      margin-left: 25px;
    }

    .detail-right {
      width: 35%;
      margin-top: 20px;

      .ss {
        width: 94%;
      }

      .dr-list {
        width: 95%;
        height: 440px;
        margin: 0 auto;
        overflow: auto;

        .dr-message {
          width: 98%;
          height: 144px;
          border-radius: 15px;
          display: flex;
          border: 1px solid black;
          margin-top: 5px;
          position: relative;

          .sty {
            width: 15px;
            height: 100%;
            background-color: blue;
            border-radius: 15px 0 0 15px;
          }

          .dr-message-font {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            p:first-child {
              font-size: 16px;
              color: blue;
            }

            p {
              height: 6px;
            }
          }

          .arrowhead {
            width: 30px;
            height: 30px;
            background-color: blue;
            position: absolute;
            left: 380px;
            top: 20px;
            border-radius: 50% 50%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 26px;
            color: white;

            span {
              margin-top: -5px;
            }
          }
        }

        .total {
          width: 90%;
          height: 50px;
          margin: 10px auto;
          display: flex;

          .t-sty {
            width: 10px;
            height: 90%;
            background-color: blue;
            border-radius: 15px;
          }

          p {
            font-size: 30px;
            margin-left: 10px;
            font-weight: 600;
            color: blue;
          }
        }

        .choose {
          margin-top: 15px;
          margin-left: 80px;
        }

        .choose-ss {
          width: 90%;
          margin: 15px auto;

          .pro-line {
            .label {
              font-size: 16px;
              font-weight: bold;
            }

            .hint {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .tag {
          width: 96%;
          height: 100px;
          margin: 10px auto;
          background: url("https://sxlq.mctech.vip/mreport/assets/images/data_sum_bg.png");
          display: flex;

          .shiji {
            height: 100%;
            display: flex;
            align-items: center;
            margin-left: 100px;

            div:last-child {
              margin-left: 15px;
              font-size: 22px;
              color: rgb(45, 130, 187);
              font-weight: 700;
            }
          }
        }

        .sum {
          height: 100%;
          display: flex;
          align-items: center;
          margin-left: 100px;

          div:last-child {
            margin-left: 15px;
            font-size: 22px;
            color: rgb(45, 130, 187);
            font-weight: 700;
          }
        }

        .jiben {
          .jiben-total {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid black;

            .jiben-total-left {
              display: flex;

              span {
                margin-top: 5px;
                margin-left: 3px;
              }
            }

            .jiben-total-right {
              display: flex;
              align-items: center;
              width: 400px;
              height: 60px;

              span {
                margin-left: 15px;
              }
            }
          }

          .jiben-nr {
            table {
              width: 100%;
              height: 280px;
              text-align: left;

              tr {
                width: 100%;
                height: 80px;
              }

              th {
                width: 33.33%;
                height: 100%;
              }
            }
          }
        }

        .bangdan {
          .bangdan-total {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid black;

            .bangdan-total-left {
              display: flex;

              span {
                margin-top: 5px;
                margin-left: 3px;
              }
            }
          }

          .bangdan-nr {
            width: 100%;
            margin-top: 15px;
            height: 120px;

            ol {
              width: 96%;
              height: 90px;
              margin: 15px auto;
              display: flex;
              justify-content: space-around;
              align-items: center;
              border: 1px solid black;

              li:first-child {
                .ellipsis {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 120px;
                }
              }

              li:last-child {
                border: none;
              }

              li {
                text-align: center;
                list-style: none;

                p {
                  color: black;
                  font-weight: 600;
                }
              }
            }
          }
        }

        .photo {
          width: 100%;
          height: 300px;
          display: flex;
          justify-content: space-between;
          margin-top: 30px;

          .el-carousel__item h3 {
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
          }

          .photo-left {
            width: 47%;
            height: 100%;
            border: 1px solid black;

            p {
              font-size: 20px;
              color: black;
            }
          }

          .photo-right {
            width: 47%;
            height: 100%;
            border: 1px solid black;

            p {
              font-size: 20px;
              color: black;
            }
          }
        }
      }
    }
  }
}
</style>
