<template>
  <div class="certify-statistics-wrapper">
    <div class="certify-statistics-wrapper">
      <el-date-picker
        v-model="certifySearchDate"
        type="daterange"
        range-separator="至"
        start-placeholder="证书上传开始日期"
        end-placeholder="证书上传结束日期"
      />
      <el-button type="success" @click="statisticsCertify">查找</el-button>
    </div>
    <div ref="statistics" class="certify-statistics" />
  </div>
</template>

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

        for (const key in res) {
          data1.push({
            name: key,
            value: res[key],
          });
        }
        data1.map(function (val) {
          if (val.name === "stanEnterpriseNum") {
            val.name = "标准化体系的企业数量";
          } else if (val.name === "stanAndEmerEnterpriseNum") {
            val.name = "标准化+应急企业数量";
          } else if (val.name === "emerEnterpriseNum") {
            val.name = "应急预案的企业数量";
          } else if (val.name === "dualEnterpriseNum") {
            val.name = "双体系证书的企业数量";
          } else if (val.name === "dualAndStanEnterpriseNum") {
            val.name = "双体系+标准化企业数量";
          } else if (val.name === "dualAndStanAndEmerEnterpriseNum") {
            val.name = "双体系+标准化+应急企业数量";
          } else if (val.name === "dualAndEmerEnterpriseNum") {
            val.name = "双体系+应急企业数量";
          }
        });
        console.log(res, "analyzeCertify");
        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>
.certify-statistics-wrapper {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 9px 1px #eee;
  .certify-statistics-wrapper {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 6px 1px #eee;
  }
  .certify-statistics {
    width: 50vw;
    height: 60vh;
    margin: 30px auto;
  }
}
</style>
