<template>
  <div class="w-full h-full" v-loading="loading">
    <div class="c-title flex-center">
      <span>风险辩识</span>
      <el-date-picker
        style="width: 140px"
        size="mini"
        v-model="queryParams.date"
        format="yyyy-MM-dd"
        value-format="yyyyMMdd"
        placeholder="请选择"
        :clearable="false"
        @change="initEcharts"
      >
      </el-date-picker>
    </div>
    <div
      ref="barChart2"
      id="barChart2"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
import { getWorkRiskStatistics } from "@/api/powerdistribution/home";
export default {
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {
        date: moment(new Date()).format("YYYYMMDD"),
      },
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    async initEcharts() {
      this.loading = true;
      let data = await getWorkRiskStatistics(this.queryParams.date);
      this.loading = false;
      data = (data || []).map((ite) => ({
        name: ite.riskName,
        value: ite.riskNum ?? 0,
      }));
      let myChart = echarts.getInstanceByDom(
        document.getElementById("barChart2")
      );
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("barChart2"));
      }
      // 指定图表的配置项和数据
      var option = {
        title: {
          show: data.length == 0,
          textStyle: {
            color: "#fff",
            // fontSize: 20,
          },
          text: "暂无数据",
          left: "center",
          top: "center",
        },
        tooltip: {
          trigger: "item",
        },
        // color: ["#0052F1", "#00a4ff"],
        color: ["#00a4ff", "#0052F1"],
        textStyle: {
          color: "#fff",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%", //图表距离容器左侧多少距离
          right: "2%", //图表距离容器右侧侧多少距离
          bottom: "0%", //图表距离容器上面多少距离
          top: "10%", //图表距离容器下面多少距离
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: data.map((ite) => ite.name),
          axisLine: {
            show: true,
            lineStyle: {
              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
            },
          },
        },
        series: [
          {
            data: data.map((ite, i) => {
              return {
                value: ite.value,
                itemStyle: {
                  color: ["#00a4ff", "#0052F1"][i],
                },
              };
            }),
            type: "bar",
            barMinHeight: 10,
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              color: "#fff",
            },
          },
        ],
        // series: [
        //   {
        //     type: "pie",
        //     center: ["50%", "60%"],
        //     radius: ["40%", "70%"],
        //     avoidLabelOverlap: false,
        //     label: {
        //       show: true,
        //       formatter: "{b|{b}} \n {d|{c}条}",
        //       rich: {
        //         d: {
        //           color: "#fff",
        //           fontSize: 16,
        //           lineHeight: 24,
        //           height: 24,
        //         },
        //         b: {
        //           color: "#D3EBFF",
        //           fontSize: 14,
        //           lineHeight: 20,
        //           align: "left",
        //         },
        //       },
        //     },
        //     emphasis: {
        //       itemStyle: {
        //         shadowBlur: 10,
        //         shadowOffsetX: 0,
        //         shadowColor: "rgba(0, 0, 0, 0.5)",
        //       },
        //     },
        //     data: data || [],
        //   },
        // ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on("click", (params) => {
        this.$router.push({
          path: "secure/risk-identification",
          query: {
            riskType: params.name == "起重作业" ? 1001 : 1002,
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  border-left: 4px solid #00a4ff;
  padding-left: 10px;
  color: #00a4ff;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
