<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>