<template>
    <div>
        <div id="analysisChartTopLeft" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
        <el-dialog  :close-on-click-modal="false" title="HRSG 1#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
            <div id="analysisChartTopLeft2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
        </el-dialog>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
    props: ['latest7DayData'],
    data() {
        return {
            chart: null,
            dialogVisible: false
        }
    },
    mixins: [echartMixins],
    mounted() {
        this.init();
    },
    methods: {
        opnenDialg(){
            this.dialogVisible = true
        },
        open(){
            this.$nextTick(() => {
                this.init2()
            })
        },
        init() {
            this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"), 'dark');
            const dateArray = [];
            const smokeArray = [];
            const so2Array = [];
            const noxArray = [];
            let data = this.latest7DayData;
            for (let i = 0; i < data.length; i++) {
              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
              smokeArray[i] = data[i].hrsg1SmokeConvert;
              so2Array[i] = data[i].hrsg1So2Convert;
              noxArray[i] = data[i].hrsg1NoxConvert;
            }
            dateArray.reverse();
            smokeArray.reverse();
            so2Array.reverse();
            noxArray.reverse();
            let option = {
                backgroundColor: 'transparent',
                title: {
                    text: 'HRSG 1#',
                    textStyle: {
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['烟尘', 'SO2', 'NOx'],
                    padding: [30, 0, 0, 0]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: [
                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
                    // ],
                    data: dateArray,
                    axisLabel: {
                        color: '#808080'
                    },
                },
                yAxis: {
                    type: 'value',
                    name: 'Unit:(mg/m3)',
                    axisLabel: {
                        color: '#808080'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: 'rgba(255,255,255,.7)'
                        }
                }
                },
                series: [
                    {
                        name: '烟尘',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1SmokeConvert,
                        //   this.latest7DayData[1].hrsg1SmokeConvert,
                        //   this.latest7DayData[2].hrsg1SmokeConvert,
                        //   this.latest7DayData[3].hrsg1SmokeConvert,
                        //   this.latest7DayData[4].hrsg1SmokeConvert,
                        //   this.latest7DayData[5].hrsg1SmokeConvert,
                        //   this.latest7DayData[6].hrsg1SmokeConvert
                        // ],
                        data: smokeArray,
                        symbolSize: 10,
                        color: '#FF9800',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1So2Convert,
                        //   this.latest7DayData[1].hrsg1So2Convert,
                        //   this.latest7DayData[2].hrsg1So2Convert,
                        //   this.latest7DayData[3].hrsg1So2Convert,
                        //   this.latest7DayData[4].hrsg1So2Convert,
                        //   this.latest7DayData[5].hrsg1So2Convert,
                        //   this.latest7DayData[6].hrsg1So2Convert
                        // ],
                        data: so2Array,
                        symbolSize: 10,
                        color: '#9D00FF',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'NOx',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1NoxConvert,
                        //   this.latest7DayData[1].hrsg1NoxConvert,
                        //   this.latest7DayData[2].hrsg1NoxConvert,
                        //   this.latest7DayData[3].hrsg1NoxConvert,
                        //   this.latest7DayData[4].hrsg1NoxConvert,
                        //   this.latest7DayData[5].hrsg1NoxConvert,
                        //   this.latest7DayData[6].hrsg1NoxConvert
                        // ],
                        data: noxArray,
                        symbolSize: 10,
                        color: '#00FF0D',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                ]
                };
            this.chart.setOption(option);
        },
        init2() {
            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopLeft2"));
            const dateArray = [];
            const smokeArray = [];
            const so2Array = [];
            const noxArray = [];
            let data = this.latest7DayData;
            for (let i = 0; i < data.length; i++) {
              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
              smokeArray[i] = data[i].hrsg1SmokeConvert;
              so2Array[i] = data[i].hrsg1So2Convert;
              noxArray[i] = data[i].hrsg1NoxConvert;
            }
            dateArray.reverse();
            smokeArray.reverse();
            so2Array.reverse();
            noxArray.reverse();
            let option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['烟尘', 'SO2', 'NOx'],
                    padding: [30, 0, 0, 0]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: [
                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
                    // ],
                    data: dateArray,
                    axisLabel: {
                        color: '#808080'
                    },
                },
                yAxis: {
                    type: 'value',
                    name: 'Unit:(mg/m3)',
                    axisLabel: {
                        color: '#808080'
                    }
                },
                series: [
                    {
                        name: '烟尘',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1SmokeConvert,
                        //   this.latest7DayData[1].hrsg1SmokeConvert,
                        //   this.latest7DayData[2].hrsg1SmokeConvert,
                        //   this.latest7DayData[3].hrsg1SmokeConvert,
                        //   this.latest7DayData[4].hrsg1SmokeConvert,
                        //   this.latest7DayData[5].hrsg1SmokeConvert,
                        //   this.latest7DayData[6].hrsg1SmokeConvert
                        // ],
                        data: smokeArray,
                        symbolSize: 10,
                        color: '#FF9800',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1So2Convert,
                        //   this.latest7DayData[1].hrsg1So2Convert,
                        //   this.latest7DayData[2].hrsg1So2Convert,
                        //   this.latest7DayData[3].hrsg1So2Convert,
                        //   this.latest7DayData[4].hrsg1So2Convert,
                        //   this.latest7DayData[5].hrsg1So2Convert,
                        //   this.latest7DayData[6].hrsg1So2Convert
                        // ],
                        data: so2Array,
                        symbolSize: 10,
                        color: '#9D00FF',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'NOx',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.latest7DayData[0].hrsg1NoxConvert,
                        //   this.latest7DayData[1].hrsg1NoxConvert,
                        //   this.latest7DayData[2].hrsg1NoxConvert,
                        //   this.latest7DayData[3].hrsg1NoxConvert,
                        //   this.latest7DayData[4].hrsg1NoxConvert,
                        //   this.latest7DayData[5].hrsg1NoxConvert,
                        //   this.latest7DayData[6].hrsg1NoxConvert
                        // ],
                        data: noxArray,
                        symbolSize: 10,
                        color: '#00FF0D',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                ]
            };
            this.chart2.setOption(option);
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>

<style>

</style>
