<template>
    <div id="thermalChart" ref="thermalChart" style="width: 100%; height: 300px"></div>
</template>

<script>
export default {
    name: 'thermalChart', //热点图组件
    data() {
        return {
            endData: [],
            startData: [],
            odData: []
        };
    },
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        pageType: {
            type: String
        },
        title: {
            type: String
        },
        // status: {
        //     type: String
        // },
        // componentName: {
        //     type: String
        // },
    },
    methods: {
        drawThermalChart() {
            let myChart = this.$echarts.init(this.$refs.thermalChart);
            let option = {
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                textStyle: { color: '#666', fontSize: 13 },
                // toolbox: {
                //     show: true,
                //     feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
                //     iconStyle: { borderColor: '#666' }
                // },
                tooltip: {},
                xAxis: {
                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                    splitLine: { show: false },
                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                    type: 'category',
                    data: this.endData,
                    splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
                },
                yAxis: {
                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                    splitLine: { show: false },
                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                    type: 'category',
                    data: ['gate1','gate2']
                },
                visualMap: [
                    {
                        min: 100,
                        max: 400,
                        calculable: false,
                        orient: 'horizontal',
                        left: 'center',
                        top: 20,
                        color: ['#C7021D', '#79E73C'],
                        text: ['高', '低'],
                        textStyle: { color: '#666', fontSize: 13 }
                    }
                ],
                series: [
                    {
                        type: 'heatmap',
                        // pageSize: 20,
                        pointSize: 10,
                        blurSize: 10,
                        data: [
                            [0, 0, 100],
                            [0, 1, 100],
                            [0, 2, 100],
                            [0, 3, 100],
                            // [0, 4, 100],
                            // [0, 5, 100],
                            // [0, 6, 200],

                            [1, 0, 120],
                            [1, 1, 120],
                            [1, 2, 125],
                            [1, 3, 120],
                            // [1, 4, 120],
                            // [1, 5, 120],
                            // [1, 6, 120],

                            [2, 0, 120],
                            [2, 1, 140],
                            [2, 2, 140],
                            [2, 3, 140],
                            // [2, 4, 140],
                            // [2, 5, 140],
                            // [2, 6, 140],

                            [3, 0, 200],
                            [3, 1, 200],
                            [3, 2, 200],
                            [3, 3, 200]
                            // [3, 4, 200],
                            // [3, 5, 200],
                            // [3, 6, 200],

                            // [4, 4, 300],
                            // [4, 5, 300],
                            // [4, 6, 300]
                        ],
                        label: { show: true, color: '#fff' },
                        itemStyle: {
                            borderColor: 'rgba(255, 255, 255, 0.5)',
                            emphasis: { shadowBlur: 0, shadowColor: 'rgba(255, 255, 255, 0.5)' }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    },
    mounted() {

    },
    watch: {
        list: {
            handler(newVal) {
                // this.odData = []
                // console.log(newVal ,'1111111111');
                // if (newVal) {
                //     newVal[newVal.length - 1].ob_data.forEach(ele => {
                //         ele.forEach(item => {
                //             this.odData.push([])
                //         })
                //     })
                // }
                // console.log(this.odData,'155');
                this.drawThermalChart();
            },
            // immediate:true
        }

    }
};
</script>
<style scoped>

</style>
