<template>
  <div class="hwapproval-statistics-wrapper">
    <div class="hwapproval-tools-wrapper">
      <el-date-picker
        v-model="approvalUploadTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="备案上传开始日期"
        end-placeholder="备案上传结束日期"
      >
      </el-date-picker>
      <el-button type="success" @click="statisticsApproval">查找</el-button>
    </div>
    <div class="hwapproval-statistics" ref="approvalstatistics"></div>
  </div>
</template>

<script>
import { dangerCriteria } from "@/api/dangerjob.js";
import echarts from "echarts";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      approvalUploadTime: "",
    };
  },
  watch: {
    approvalUploadTime(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.echartsdom.clear();
      this.statisticsApproval();
    },
  },
  mounted() {
    this.echartsdom = echarts.init(this.$refs.approvalstatistics);
    this.statisticsApproval();
  },
  methods: {
    statisticsApproval() {
      const params = {};
      if (this.approvalUploadTime instanceof Array) {
        params.uploadEndDate = parseTime(new Date(), "{y}-{m}-{d}");
        params.uploadStartDate = parseTime(new Date(), "{y}-{m}-{d}");
      }
      dangerCriteria(params).then((res) => {
        const data1 = [];

        for (const key in res) {
          console.log(key);
          data1.push({
            name: key,
            value: res[key],
          });
        }
        data1.map(function (val) {
          if (val.name === "dangerJobReportEnterpriseNum") {
            val.name = "已上传危险作业备案企业数量";
          } else if (val.name === "dangerJobReportFileNum") {
            val.name = "已上传危险作业备案文件数量";
          }
        });
        this.echartsdom.setOption({
          title: {
            text: "危险作业备案统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ",
          },
          series: [
            {
              name: "危险作业备案",
              type: "pie",
              radius: "50%",
              data: data1,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hwapproval-statistics-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 9px 1px #eee;
  .hwapproval-tools-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 0 9px 1px #eee;
  }
  .hwapproval-statistics {
    margin: 30px auto;
    width: 50vw;
    height: 50vh;
  }
}
</style>