<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;
      },
      fontSize (res) {
        let docEl = document.documentElement,
          clientWidth =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = clientWidth / 1920;
        return res * fontSize;
      }
    },
    watch: {
      cdata: {
        handler (newData) {
          this.xAxisData = newData.echartData.map((v) => v.yearMonth);
          this.yAxisData1 = newData.echartData.map((v) => v.receive);
          this.yAxisData2 = newData.echartData.map((v) => v.record);
          this.yAxisData3 = newData.echartData.map((v) => v.report);
          this.options = {
            color: newData.color,
            legend: {
              center: true,
              top: "20%",
              data: newData.legendItem,
              textStyle: {
                color: "#00DEFF",
                fontSize: this.fontSize(12),
              },
            },
            // 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: this.fontSize(12),
                    lineHeight: this.fontSize(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: false, //是否平滑
                showSymbol: true,
                symbol: "circle",
                symbolSize: this.fontSize(6),
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: newData.color[0]
                  },
                },
                data: this.yAxisData1,
              },
              {
                name: newData.legendItem[1],
                type: "line",
                smooth: false,
                showSymbol: true,
                symbol: "circle",
                symbolSize: this.fontSize(8),
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: newData.color[1],
                  },
                },
                data: this.yAxisData2,
              },
              {
                name: newData.legendItem[2],
                type: "line",
                smooth: false,
                showSymbol: true,
                symbol: "circle",
                symbolSize: this.fontSize(8),
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: newData.color[2],
                  },
                },
                data: this.yAxisData3,
              },
            ],
          };
        },
        immediate: true,
        deep: true,
      },
    },
  };
</script>