<template>
  <div>
    <div class="charts" ref="chart_ref"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    viewMes: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chartInstance: null,
      option: {},
      energyMes: {},
    };
  },
  watch: {
    viewMes: {
      immediate: true, // 页面加载时立即触发一次监听
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          console.log("newval", newVal);
          this.energyMes = newVal;
          this.$nextTick(() => {
            this.echartsData();
          });
        }
      },
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    //取消监听器
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    echartsData() {
      console.log("父组件传过来的值", this.energyMes);
      if (this.energyMes) {
        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
        const colorList = ["#ffe21e", "#08c8ff", "#0882ff", "#2df499"]; // 提取颜色列表
        const adapterOption = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            itemWidth: titleFontSize,
            itemHeight: titleFontSize,
            itemGap: titleFontSize * 2,
            formatter: function (name) {
              var arr = [];
              let data = adapterOption.series[0].data;
              var index = 0;
              var total = 0;
              // 计算总和
              for (var i = 0; i < data.length; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  index = i;
                }
              }
              // 检查当前项的值是否为 0
              var percentage =
                data[index].value === 0
                  ? "0.00"
                  : ((data[index].value / total) * 100).toFixed(2);
              arr.push(
                "{name|" + name + "}",
                "{text|" + " " + ":" + " " + "}",
                "{value|" + data[index].value + " " + "}",
                "{percentage|" + " " + percentage + "%}"
              );
              return arr.join("");
            },
            textStyle: {
              color: function (name) {
                const dataSeries = adapterOption.series[1].data; // 数据圆的data
                const index = dataSeries.findIndex(
                  (item) => item.name === name
                );
                const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表
                return colorList[index];
              },
              rich: {
                name: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                },
                text: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                },
                value: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                  // color: function (params) {
                  //   let data = adapterOption.series[1].data;
                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                  // },
                },
                percentage: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                  // color: function (params) {
                  //   let data = adapterOption.series[1].data;
                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                  // },
                },
              },
            },
          },
          series: [
            {
              name: "数据详情:",
              data: [
                { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" },
                {
                  value: this.energyMes.waterStandardCoal,
                  name: "用水量(kgce)",
                },
                {
                  value: this.energyMes.coldStandardCoal,
                  name: "产冷量(kgce)",
                },
                { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" },
              ],
              itemStyle: {
                color: function (params) {
                  var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"];
                  return colorList[params.dataIndex];
                },
                // borderWidth: 5,
                borderColor: "#002a56",
              },
            },
            {
              data: [
                { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" },
                {
                  value: this.energyMes.waterStandardCoal,
                  name: "用水量(kgce)",
                },
                {
                  value: this.energyMes.coldStandardCoal,
                  name: "产冷量(kgce)",
                },
                { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" },
              ],
            },
          ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
      } else {
        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
        const adapterOption = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            itemWidth: titleFontSize,
            itemHeight: titleFontSize,
            itemGap: titleFontSize * 2,
            formatter: function (name) {
              var arr = [];
              let data = adapterOption.series[0].data;
              var index = 0;
              var total = 0;
              // 计算总和
              for (var i = 0; i < data.length; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  index = i;
                }
              }
              // 检查当前项的值是否为 0
              var percentage =
                data[index].value === 0
                  ? "0.00"
                  : ((data[index].value / total) * 100).toFixed(2);
              arr.push(
                "{name|" + name + "}",
                "{text|" + " " + ":" + " " + "}",
                "{value|" + data[index].value + " " + "}",
                "{percentage|" + " " + percentage + "%}"
              );
              return arr.join("");
            },
            textStyle: {
              color: function (name) {
                const dataSeries = adapterOption.series[1].data; // 数据圆的data
                const index = dataSeries.findIndex(
                  (item) => item.name === name
                );
                const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表
                return colorList[index];
              },
              rich: {
                name: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                },
                text: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                },
                value: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                  // color: function (params) {
                  //   let data = adapterOption.series[1].data;
                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                  // },
                },
                percentage: {
                  align: "left",
                  fontSize: titleFontSize * 1.6,
                  // color: function (params) {
                  //   let data = adapterOption.series[1].data;
                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
                  // },
                },
              },
            },
          },
          series: [
            {
              name: "数据详情:",
              data: [
                { value: 0, name: "耗电量(kgce)" },
                { value: 0, name: "用水量(kgce)" },
                { value: 0, name: "产冷量(kgce)" },
                { value: 0, name: "蒸汽量(kgce)" },
              ],
              itemStyle: {
                color: function (params) {
                  var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"];
                  return colorList[params.dataIndex];
                },
                // borderWidth: 5,
                borderColor: "#002a56",
              },
            },
            {
              data: [
                { value: 0, name: "耗电量(kgce)" },
                { value: 0, name: "用水量(kgce)" },
                { value: 0, name: "产冷量(kgce)" },
                { value: 0, name: "蒸汽量(kgce)" },
              ],
            },
          ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
      }
    },
    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.chart_ref.offsetWidth / 40;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {
        title: {
          subtextStyle: {
            fontSize: titleFontSize * 1.2,
          },
        },
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },
    //初始化chartInstance对象
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart_ref);
      this.option = {
        //环形图中间文字
        title: {
          subtext: "标准煤",
          textStyle: {
            color: "#ffffff",
          },
          subtextStyle: {
            color: "#ffffff",
          },
          textAlign: "center",
          x: "23%",
          y: "36%", //距离上边的距离
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        //图例
        legend: {
          orient: "vertical", // 垂直排列
          right: "4%", // 距离右边10%
          top: "middle", // 垂直居中
          //图例文字颜色
          textStyle: {
            color: "#ffffff",
            // fontSize: 18,
          },
        },
        series: [
          // 数据圆
          {
            name: "数据详情:",
            type: "pie",
            radius: ["60%", "72%"],
            center: ["24%", "44%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: function (params) {
                var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"];
                return colorList[params.dataIndex];
              },
              borderWidth: 5,
              borderColor: "#002a56",
            },
            z: 10, //设置层级更高,否则会被阴影圆遮住
          },
          // 阴影圆
          {
            type: "pie",
            radius: ["50%", "62%"],
            center: ["24%", "44%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            silent: true,
            labelLine: {
              show: false,
            },
            //颜色
            itemStyle: {
              color: function (colors) {
                var colorList = ["#024e7d", "#09596b", "#385f5c", "#02427f"];
                return colorList[colors.dataIndex];
              },
            },
            z: 15,
          },
          // 内圈边框
          {
            // 颜色
            color: ["#305376"],
            type: "pie",
            silent: true, //鼠标移入不显示内容，不触发鼠标事件
            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
            // 这里开启silent: true, 就达到效果了
            // center与非内圈一致
            radius: ["38%", "39%"],
            center: ["24%", "44%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
                itemStyle: {},
              },
            ],
          },
          //  最里面渐变小圆
          {
            // 颜色
            type: "pie",
            silent: true, //鼠标移入不显示内容，不触发鼠标事件
            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
            // 这里开启silent: true, 就达到效果了
            // center与非内圈一致
            radius: ["0%", "38%"],
            center: ["24%", "44%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
                itemStyle: {},
              },
            ],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#002a55" }, // 0% 处的颜色
                  { offset: 1, color: "#0a457a" }, // 100% 处的颜色
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.charts {
  margin-top: 30px;
  width: 100%;
  height: 200px;
  margin-top: 20px;
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .charts {
    margin-top: 0.3rem !important;
    height: 2.4rem !important;
    margin-top: 0.2rem !important;
  }
}
</style>
