<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>{{ this.num.planweight + "万方" }}</span></div>
      <div class="before">实际用量&nbsp;<span>{{ this.num.realweight + "万方" }}</span></div>
      <div class="next">完成率&nbsp;<span> {{ this.efficiency + "%"}} </span></div>
    </div>
    <!-- 详情页面 -->
    <div class="detail">
      <div class="detail-left">
        <el-table :data="list" style="width: 95%" border stripe height="400" v-loading="loading">
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="材料" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="规格型号" width="360">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.material_model }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ture" label="实耗量(方)" width="360">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.sum }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-right">
        <!-- 右下项目列表 -->
        <div class="dr-list">
          <div class="dr-message" v-for="(item, index) in detail" :key="index">
            <div class="sty"></div>
            <div class="dr-message-font">
              <p>{{ item.material_name }}</p>
              <p>单位 : {{ item.material_unit }}</p>
              <p>实耗量 : <span>{{ Number(item.sum).toFixed(2) }}</span></p>
              <p>总车次 : <span>{{ item.count }}</span></p>
            </div>
            <!-- 箭头 -->
            <div class="arrowhead" @click="openChild(item.material_name,item.sum,item.count)">
              <span>&gt;</span>
            </div>
          </div>
          <!-- 查看项目详情 -->
          <el-dialog title="" :visible.sync="dialogFormVisible" width="90%">
            <div class="total">
              <div class="t-sty"></div>
              <p>{{ this.childName }}</p>
            </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>{{ Number(this.sum1).toFixed(2) }}</p>
                  <p>实际用量</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.sum2 }}</p>
                  <p>总车次</p>
                </div>
              </div>
            </div>
            <div class="tab">
              <el-table :data="tableData" style="width: 100%" height="400" class="tab1">
                <el-table-column fixed prop="id" type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column fixed prop="frm" label="数据来源" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.material_model }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="timer" label="发料时间" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.exit_time }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="carNum" label="车牌号" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.plate_number }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="材料名称" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ (row.material_name).split(" ")[0] }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sex" label="规格型号" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.material_model }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="生产量" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{(row.confirm_net_quantity / row.conversion_rate).toFixed(2)}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.material_unit }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="num1" label="配比编号" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.material_model }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="num2" label="机组编号" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.pro_line }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="pro-name" label="操作员" width="250">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.creator_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="d-unit" label="收料单位" width="300">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.labour_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="engineering-name" label="工程名称" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.project_org_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="use-place" label="使用部位" width="120">
                  <template slot-scope="{ row }">
                    <!-- 自定义插槽内容 -->
                    <div class="custom-slot">
                      {{ row.usedpart_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="Mixing-table" label="拌合台" width="300">
                </el-table-column>
              </el-table>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import {
  getHSLInfo,
  getPcPlanRealTable,
  getPcPlanRealDetail,
} from "../../api";
import { countHNt } from "@/utils/count"
export default {
  data () {
    return {
      loading: true,
      // 材料信息
      input2: "",
      // 详情左侧模拟数据
      tableData: [],
      // 类别信息
      values: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      radio1: "全部",
      radio2: "day",
      // 数据部分
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      num: {},
      detail: [],
      list: [],
      childName: "",
      sum1: null,
      sum2: null,
      efficiency: ''
    };
  },
  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.getChart();
  },
  methods: {
    // 获取数字数据
    async getdata () {
      const res = await getHSLInfo({
        onpage: this.radio2,
        org_id: this.id,
      });
      res.data.data.forEach(item => {
        if (item.name == "混凝土") {
          this.num = item;
          this.num.planweight = (this.num.planweight / 10000).toFixed(2)
          this.num.realweight = (this.num.realweight / 10000).toFixed(2)
          this.efficiency = countHNt(this.num.planweight, this.num.realweight)
        }
      })
    },
    // 获取混凝土图表数据
    async getChart () {
      const res2 = await getPcPlanRealDetail({
        org_id: this.id,
        onpage: this.radio2,
        name: "混凝土",
      })
      this.detail = res2.data.data[0].detail
      this.list = res2.data.data[0].list

      this.loading = false
    },
    // 点击打开子案例详细列表
    async openChild (value, value1, value2) {
      this.dialogFormVisible = true
      this.childName = value;
      this.sum1 = value1
      this.sum2 = value2
      const res = await getPcPlanRealTable({
        material_name: value,
        org_id: this.id,
        onpage: this.radio2,
        name: "混凝土",
      })
      this.tableData = res.data.data
    },
    // 时间段改变事件
    async timeChange (value) {
      this.radio2 = value;
      const res = await getHSLInfo({
        onpage: this.radio2,
        org_id: this.id,
      });
      res.data.data.forEach(item => {
        if (item.name == "混凝土") {
          this.num = item;
          this.num.planweight = (this.num.planweight / 10000).toFixed(2)
          this.num.realweight = (this.num.realweight / 10000).toFixed(2)
          this.efficiency = countHNt(this.num.planweight, this.num.realweight)
        }
      })
      const res2 = await getPcPlanRealDetail({
        org_id: this.id,
        onpage: this.radio2,
        name: "混凝土",
      })
      this.detail = res2.data.data[0].detail
      this.list = res2.data.data[0].list
    },
    // 回到首页
    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 {
        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%;
    height: 440px;
    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;
      position: relative;

      .ss {
        width: 94%;
      }

      .dr-list {
        width: 96%;
        margin-top: 20px;
        height: 380px;
        overflow: auto;

        .dr-message {
          width: 98%;
          height: 154px;
          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: 18px;
              color: blue;
            }
          }

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

            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;
            }
          }
        }

        .tab {
          width: 97%;
          margin: 10px auto;

          .tab1 {
            width: 100%;
          }
        }
      }

      .fenye {
        position: absolute;
        right: 150px;
        bottom: 10px;
      }
    }
  }
}
</style>
