<template>
    <div :id="echartsRef" ref="echartsOD"></div>
</template>

<script>
export default {
    name: 'echartsLine', //折线图组件
    props: {
        intersectionName: {
            type: Array,
            default() {
                return [];
            }
        },
        chatShowType: {
            type: String
        },
        echartsRef: {
            type: String
        },
        dataList: {
            type: Array,
            default() {
                return [];
            }
        },
        startName: {
            type: String
        },
        endName: {
            type: String
        },
        timeMode: {
            type: String
        }
    },
    data() {
        return {
            chart: null
        };
    },
    created() {},

    methods: {
        //处理od组件数据
        ODhanlde(odData) {
            odData = odData.flat();
            var chartData = [];
            var start = [];
            if (odData && odData.length > 0 && odData[0] != undefined) {
                for (let i = 0; i < odData.length; i++) {
                    if (odData[i].data == undefined) {
                        return false;
                    } else {
                        let item = odData[i].data;
                        for (let j = 0; j < item.length; j++) {
                            start.push(item[j].start);
                            // 数组去重
                            // od图的数据
                            chartData.push([i, j, item[j].quantity]);
                            // console.log([i,j,item[j].val]);
                        }
                    }
                }
            }

            // this.thermalChartData = chartData
            return chartData;
        },
        initEcharts() {
            let dataList = null;
            if (this.timeMode == '实时触发') {
                let dataOd = [];
                if (this.dataList.length > 0) {
                    for (let i = 0; i < this.dataList.length; i++) {
                        dataOd.push(this.dataList[i].ob_data);
                        dataList = this.ODhanlde(dataOd);
                    }
                }
            } else if (this.timeMode == '固定时刻') {
                let dataOd = [];
                // for (let i = 0; i < this.dataList.length; i++) {
                // dataOd.push(this.dataList[0][0].ob_data);
                // dataList = this.ODhanlde(dataOd);
                // }
                // if (this.dataList[0][0] == undefined) {
                //   for (let i = 0; i < this.dataList.length; i++) {
                if (this.dataList.length > 0 && this.dataList[0].ob_data) {
                    dataOd.push(this.dataList[0].ob_data);
                }

                dataList = this.ODhanlde(dataOd);
                //   }
                // } else {
                //   dataOd.push(this.dataList[0][0].ob_data);
                //   dataList = this.ODhanlde(dataOd);
                // }
            } else if (this.timeMode == '固定间隔') {
                let dataOd = [];
                // for (let i = 0; i < this.dataList.length; i++) {
                //   dataOd.push(this.dataList[i].ob_data);
                //   dataList = this.ODhanlde(dataOd);
                // }
                // if (this.dataList[0][0] == undefined) {
                //   for (let i = 0; i < this.dataList.length; i++) {
                  if (this.dataList.length > 0 && this.dataList[0].ob_data) {
                dataOd.push(this.dataList[0].ob_data);
                  }
                dataList = this.ODhanlde(dataOd);
                //   }
                // } else {
                //   dataOd.push(this.dataList[0][0].ob_data);
                //   dataList = this.ODhanlde(dataOd);
                // }
            }
            let myChart = this.chart;
            let option = {
                dataZoom: [
                    {
                        id: 'dataZoomY',
                        type: 'slider',
                        yAxisIndex: [0],
                        startValue: 0,
                        endValue: 10,
                        filterMode: 'empty'
                    }
                ],
                tooltip: {
                    position: 'top'
                },
                animation: false,
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.startName.split(','),
                    axisLine: {
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    },
                    splitArea: {
                        show: true
                    }
                    // name: "镇街",
                },
                yAxis: {
                    type: 'category',
                    data: this.endName.split(','),
                    axisLine: {
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    },
                    splitArea: {
                        show: true
                    }
                    // name: "",
                },
                visualMap: {
                    min: 1,
                    max: 50,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '1%',
                    text: ['50', '1'], // 文本，默认为数值文本
                    //color:['#20a0ff','#D2EDFF'],
                    calculable: false,
                    color: ['#22DDDD', '#fec42c', '#80F1BE']
                },
                series: [
                    {
                        name: 'OD图',
                        type: 'heatmap',
                        data: dataList,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(120, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    },
    mounted() {
        let that = this;
        const $dom = document.getElementById(this.echartsRef);
        $dom.style.width = '440px';
        $dom.style.height = '260px';
        that.$nextTick(() => {
            that.chart = that.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
            if (that.chart == null) {
                that.chart = that.$echarts.init(document.getElementById(this.echartsRef));
            }
            that.initEcharts();
        });
    },
    watch: {
        intersectionName: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.initEcharts();
                });
            }
        },
        chatShowType: {
            handler: function (oldValues, newValues) {
                let that = this;
                setTimeout(() => {
                    that.$nextTick(() => {
                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                        if (this.chart == null) {
                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                        }
                        that.initEcharts();
                    });
                }, 300);
            }
        },
        echartsRef: {
            handler: function (oldValues, newValues) {
                console.log('old', oldValues);
                console.log('newV', newValues);
                let that = this;
                setTimeout(() => {
                    that.$nextTick(() => {
                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                        if (this.chart == null) {
                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                        }
                        that.initEcharts();
                    });
                }, 300);
            }
        },
        dataList: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                    if (this.chart == null) {
                        this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                    }
                    this.initEcharts();
                });
            }
        },
        startName: {
            handler: function (oldValues, newValues) {}
        },
        endName: {
            handler: function (oldValues, newValues) {}
        },
        timeMode: {
            handler: function (oldValues, newValues) {}
        }
    }
};
</script>
<style lang="less" scoped>
#echartsOD {
    width: 100%;
    height: 100%;
}
</style>
