<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">“ 水稳 ” - <span>{{ this.name }}</span></div>
        <div class="total-right">
          <div style="width: 300px; margin-left: 35px;">
            <el-radio-group v-model="radio1" @change="unitChange(radio1)">
              <el-radio-button label="0">建设单位</el-radio-button>
              <el-radio-button label="1">施工单位</el-radio-button>
            </el-radio-group>
          </div>
          <div>
          </div>
          <div>
            <el-radio-group v-model="radio2" @change="dateChange(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="message">
      <div class="charts"></div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%" height="350" stripe border :default-sort="{
          prop: 'date',
          order: 'descending',
        }" class="tab" v-loading="loading">
          <el-table-column type="index" label="序号" width="86"></el-table-column>
          <el-table-column prop="name" label="名称" width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot" @click="handleClick(row)" style="cursor: pointer; color: rgb(127, 144, 255)">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="now" label="计划量(吨)" sortable width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.plan }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="before" label="实耗量(吨)" sortable width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.real }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="up" label="完成率" sortable width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.progress.toFixed(2) }}%
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import { countHNt } from "@/utils/count"
import {
  getHSLInfo,
  getPcPlanRealDetail,
} from "../../api";
export default {
  data () {
    return {
      loading: true,
      radio1: "0",
      radio2: "day",
      // 数据
      num: {},
      efficiency: null,
      value1: "",
      value2: "",
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      tableData: [],
      chartsName: [],
      before: [],
      now: [],
    };
  },
  async mounted () {
    this.useCharts();
    this.getdata();
    this.getPcPlanRealDetail();
  },
  methods: {
    // message左边charts图
    useCharts () {
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["计划量", "实耗量"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.chartsName,
          },
        ],
        yAxis: [
          {
            type: "value",
            data: ["2万", "4万", "6万", "8万"],
          },
        ],
        series: [
          {
            name: "计划量",
            type: "bar",
            barGap: 0,
            color: "#5470c6",
            emphasis: {
              focus: "series",
            },
            data: this.now,
          },
          {
            name: "实耗量",
            type: "bar",
            color: "#91cc75",
            emphasis: {
              focus: "series",
            },
            data: this.before,
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".charts"));
      myChart.setOption(option);
    },
    // 初始获取数字数据
    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 getPcPlanRealDetail () {
      const res = await getPcPlanRealDetail({
        onpage: this.radio2,
        org_id: this.id,
        companyunit: this.radio1,
        name: "水稳",
      });
      this.tableData = res.data.data

      // 提取对象数组中的特定数据
      const extractedData = this.tableData.map(obj => obj.name);
      const nowData = this.tableData.map(obj => obj.plan);
      const beforeData = this.tableData.map(obj => obj.real);
      this.chartsName = extractedData;
      this.now = nowData;
      this.before = beforeData;
      this.useCharts();
      this.loading = false
    },
    // 时间段改变
    async dateChange (value) {
      this.radio2 = value;
      this.loading = true
      const res = await getHSLInfo({
        onpage: value,
        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({
        onpage: this.radio2,
        org_id: this.id,
        companyunit: this.radio1,
        name: "水稳",
      });
      this.tableData = res2.data.data

      // 提取对象数组中的特定数据
      const extractedData = this.tableData.map(obj => obj.name);
      const nowData = this.tableData.map(obj => obj.plan);
      const beforeData = this.tableData.map(obj => obj.real);
      this.chartsName = extractedData;
      this.now = nowData;
      this.before = beforeData;
      this.useCharts();
      this.loading = false
    },
    // 单位改变
    async unitChange (value) {
      this.radio1 = value
      this.loading = true
      const res = await getPcPlanRealDetail({
        onpage: this.radio2,
        org_id: this.id,
        companyunit: this.radio1,
        name: "水稳",
      });
      this.tableData = res.data.data

      // 提取对象数组中的特定数据
      const extractedData = this.tableData.map(obj => obj.name);
      const nowData = this.tableData.map(obj => obj.plan);
      const beforeData = this.tableData.map(obj => obj.real);
      this.chartsName = extractedData;
      this.now = nowData;
      this.before = beforeData;
      this.useCharts();
      this.loading = false
    },
    // 设置点击跳转事件
    handleClick (value) {
      localStorage.setItem("RGid", value.id)
      localStorage.setItem("RGname", value.name);
      // 跳转从新的标签页打开
      const routerJump = this.$router.resolve(`/waterC?id=${1}`)
      window.open(routerJump.href, '_blank')
      // this.$router.push(`/waterC?id=${1}`);
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped lang="scss">
.receiptF {
  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: 900px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        overflow: hidden;
        margin-left: -100px;

        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: rgb(80, 139, 248);
      }
    }

    .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: rgb(80, 139, 248);
      }
    }

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

  .message {
    width: 99%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .charts {
      width: 48%;
      height: 100%;

      div {
        canvas {
          width: 800px;
        }
      }
    }

    .table {
      width: 48%;
      height: 100%;
    }
  }
}
</style>