<template>
  <div>
    <!-- 折线图 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="300px"
      width="100%"
    ></Echart>
  </div>
</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);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
this.yAxisData1 = newData.echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
this.yAxisData2 = newData.echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
this.yAxisData3 = newData.echartData.map(v => v.value3);
//[133,133,100,80,99,133,110,80]
        this.options = {
    color: newData.color,
    legend: {
      center: true,
      top: 10,
      data: newData.legendItem,
      textStyle: {
            color: '#00DEFF',
      },
    },
    // calculable: true,
     tooltip: {
        trigger: "axis",
        formatter: function(params) {
            let html = '';
            params.forEach(v => {
                console.log(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: "20%",
            left: "3%",
            right: "6%",
            bottom: "8%",
            containLabel: true,
          },
    xAxis: [{
        type: 'category',
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: "rgba(255, 255, 255,0.5)"
            }
        },
        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: false,
            lineStyle: {
                type: "dashed",
                color: "rgba(255, 255, 255,0.5)"
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: "rgba(255, 255, 255,0.5)"
            }
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: newData.legendItem[0],
        type: "line",
        smooth: false, //是否平滑
        // showSymbol: false,/
        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: false,
        // showSymbol: false,
        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: false,
        // showSymbol: false,
        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>