<template>
  <div style="display: flex">
    <div ref="chart" class="item" style="width: 280px; height: 259px" />
    <ul style="margin: auto; font-size: 16px">
      <li @click="showStice('重大风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ff0b0b;
            margin: 0 4px;
          "
        ></span>
        <span
          >重大风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("重大风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('较大风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ff833d;
            margin: 0 4px;
          "
        ></span>
        <span
          >较大风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("较大风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('一般风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #fbff3d;
            margin: 0 4px;
          "
        ></span>
        <span
          >一般风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("一般风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('低风险（蓝色）')">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #35c2ff;
            margin: 0 4px;
          "
        ></span>
        <span
          >低风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("低风险")
          }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    riskList: Array,
    qy: String,
  },
  data() {
    return {
      chart: null,
      timer: "",
      label: [],
      labelColor: {
        重大风险: "#FF0B0B",
        较大风险: "#ff833d",
        一般风险: "#fbff3d",
        低风险: "#35c2ff",
      },
    };
  },
  watch: {
    riskList: {
      handler(val) {
        this.chart = null;
        if (val.length > 0) {
          this.$nextTick(() => {
            const chartDom = this.$refs.chart;
            // 初始化图表实例
            this.chart = echarts.init(chartDom);

            this.initChart(this.riskList);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    showValue(label) {
      const item = this.riskList.find((item) => item.fxdj === label);
      return item ? item.sl : 0;
    },
    initChart(srcData) {
      let data = [];
      srcData.forEach((p) => {
        data.push({
          value: p.sl,
          name: p.fxdj,
        });
      });

      // 数据补全
      const category = ["重大风险", "较大风险", "一般风险", "低风险"];
      category.forEach((p) => {
        if (data.map((i) => i.name).indexOf(p) < 0) {
          data.push({
            name: p,
            value: 0,
          });
        }
      });

      // 排序
      // data = data.sort(function (a, b) {
      //   if (a.name === "重大风险") {
      //     return -3;
      //   } else if (a.name === "较大风险") {
      //     return -2;
      //   } else if (a.name === "一般风险") {
      //     return -1;
      //   } else if (a.name === "低风险") {
      //     return 0;
      //   }
      // });
      const tmpData = JSON.parse(JSON.stringify(data));
      data = [];
      data.push({
        name: "重大风险",
        value: tmpData.find((p) => p.name === "重大风险").value,
      });

      data.push({
        name: "较大风险",
        value: tmpData.find((p) => p.name === "较大风险").value,
      });

      data.push({
        name: "一般风险",
        value: tmpData.find((p) => p.name === "一般风险").value,
      });

      data.push({
        name: "低风险",
        value: tmpData.find((p) => p.name === "低风险").value,
      });

      data.forEach((p) => {
        p.name = p.name + " " + p.value;
      });
      // console.log(data);
      // const d1 = data.find((p) => p.name === "一般风险");
      // d1.value = 300;
      // const d = data.find((p) => p.name === "低风险");
      // d.value = 1000;
      let sum = 0;
      data.forEach((item) => {
        sum += item.value;
      });

      let addUp = 0;
      let minHeight = 2;
      let top = 5;
      let color = ["#FF0B0B", "#ff833d", "#fbff3d", "#35c2ff"];

      data = data.map((item, index) => {
        let itemValue = 0;
        if ((item.value / sum) * 100 < minHeight) itemValue = minHeight;
        else itemValue = (item.value / sum) * 100;
        top += itemValue;
        return {
          value: (addUp += itemValue),
          name: item.name,
          realValue: item.value,
          label: {
            show: false,
            color: color[index],
            fontSize: 14,
            position: index % 2 === 0 ? "left" : "right",
            formatter: () => {
              return `${item.name} ${item.value} 栋`;
            },
          },
          labelLine: {
            show: false,
            length: index === 0 ? 100 : 20,
            length2: 30,
          },
          itemStyle: {
            height: `${itemValue}%`,
            borderColor: color[index],
            borderWidth: 5,
            shadowColor: color[index],
            shadowBlur: 100,
          },
        };
      });
      const option = {
        // backgroundColor: "#0d3059",
        color,
        series: [
          {
            type: "funnel",
            sort: "ascending",
            data: data,
            maxSize: "120%",
            left: 70,
          },
        ],
        // legend: {
        //   show: true,
        //   // right: 50,
        //   // top: 70,
        //   // x: 'right',
        //   y: "center",
        //   right: 30,
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   itemGap: 20,
        //   orient: "vertical",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 18,
        //   },
        //   data: data.map((p) => p.name),
        // },
        tooltip: {
          show: true,
          confine: true,
          extraCssText: "z-index: 1000;",
          backgroundColor: "#02809a",
          borderColor: "rgba(0,213,255, .6)",
          textStyle: {
            color: "#fff",
          },
          formatter(params) {
            return `${params.name}栋`;
          },
        },
      };
      // console.log(option.legend);
      this.chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;
    },
    createData() {
      let dataArr = [];
      for (var i = 0; i < 200; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            value: 25,
            itemStyle: {
              normal: {
                color: "#0475bd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    showStice(val) {
      this.$emit("showFxyj", val);
    },
  },
};
</script>

<style scoped></style>
