<template>
  <!-- 折线图 -->
  <Echart
    :options="options"
    id="bottomLeftChart"
    height="100%"
    width="100%"
  ></Echart>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      xAxisData: {},
      yAxisData1: {},
      yAxisData2: {},
      yAxisData3: {},
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    hexToRgba(hex, opacity) {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.xAxisData = newData.echartData.map((v) => v.name);
        this.yAxisData1 = newData.echartData.map((v) => v.value1);
        this.yAxisData2 = newData.echartData.map((v) => v.value2);
        this.yAxisData3 = newData.echartData.map((v) => v.value3);
        this.options = {
          color: newData.color,
          legend: {
            center: true,
            top: "20%",
            data: newData.legendItem,
            textStyle: {
              color: "#00DEFF",
            },
          },
          // calculable: true,
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              let html = "";
              params.forEach((v) => {
                html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  newData.color[v.componentIndex]
                };"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${
                  newData.color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                个`;
              });
              return html;
            },
            extraCssText:
              "background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          },
          // grid: {
          //     top: 70,
          //     containLabel: true
          // },
          grid: {
            top: "30%",
            left: "3%",
            right: "6%",
            bottom: "8%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#458ACF",
                },
              },
              axisLabel: {
                inside: false,
                textStyle: {
                  color: "rgba(255, 255, 255,0.7)", // x轴颜色
                  fontWeight: "normal",
                  fontSize: "12",
                  lineHeight: 22,
                },
              },
              data: this.xAxisData,
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                textStyle: {
                  color: "rgba(255, 255, 255,0.7)",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#458ACF",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#458ACF",
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: newData.legendItem[0],
              type: "line",
              smooth: true, //是否平滑
              showSymbol: false,
              symbol: "circle",
              symbolSize: 6,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: newData.color[0],
                  shadowBlur: 3,
                  shadowColor: this.hexToRgba(newData.color[0], 0.5),
                  shadowOffsetY: 0,
                },
              },
              data: this.yAxisData1,
            },
            {
              name: newData.legendItem[1],
              type: "line",
              smooth: true,
              showSymbol: false,
              symbol: "circle",
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: newData.color[1],
                  shadowBlur: 0,
                  shadowColor: this.hexToRgba(newData.color[1], 0.5),
                  shadowOffsetY: 0,
                },
              },
              data: this.yAxisData2,
            },
            {
              name: newData.legendItem[2],
              type: "line",
              smooth: true,
              showSymbol: false,
              symbol: "circle",
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: newData.color[2],
                  shadowBlur: 3,
                  shadowColor: this.hexToRgba(newData.color[2], 0.5),
                  shadowOffsetY: 0,
                },
              },
              data: this.yAxisData3,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>