<template>
    <div class='line-container'>
        <div class='leftL'>
            <div class='leftLengend'>
                <i class='outIcon'></i> 室外温度
                <i class='innerIcon'></i> 室内平均温度
                <i class='innerMax'></i> 室内最高温度
            </div>

            <div style='width:100%;height:100%;'>
                <div id='leftLine' style='width:100%;height:100%;'></div>
            </div>
        </div>
        <div class='rightL'>
            <div class='rightLengend'>
                <i class='blue-bg'></i> 实际供冷量
                <i class='preCool'></i>
                预测冷量
            </div>

            <div style='width:100%;height:100%;'>
                <div id='RightLine' style='width:100%;height:100%;'></div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'

export default {
    data() {
        return {
            dataX: [],
            loadX: [],
            dataY1: [],
            dataY2: [],
            dataY3: [],
            loadY1: [],
            loadY2: [],
            loadY3: [],
            dataY1Min: '',
            dataY1Max: ''
        }
    },
    props: ['chillerList'],
    methods: {
        getMax(arr) {
            var max = arr[0]
            for (var i = 0; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max
        },
        getMin(arr) {
            var min = arr[0]
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == '') {
                    arr.splice(arr[i], 1)
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            return min
        },
        drawData() {
            this.dataY1 = []
            this.dataX = []
            this.loadX = []
            this.dataY2 = []
            this.dataY3 = []
            this.loadY1 = []
            this.loadY2 = []
            this.loadY3 = []
            this.chillerList.forEach(el => {
                el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
                this.dataX.push(el.value)
                this.loadX.push(el.value)
                this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
                this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
                this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
                this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
                this.loadY3.push(el.predictedLoadDownLimit != '-9999' && el.predictedLoadDownLimit != '-9998' ? el.predictedLoadDownLimit : undefined)
            })
            let arr = []
            arr = arr
                .concat(this.dataY1)
                .concat(this.dataY2)
                .concat(this.dataY3)
            this.dataY1Min = this.getMin(arr)
            this.dataY1Max = this.getMax(arr)
            let minG = parseInt(this.dataY1Min % 10),
                minS = parseInt((this.dataY1Min % 100) / 10),
                maxG = parseInt(this.dataY1Max % 10),
                maxS = parseInt((this.dataY1Max % 100) / 10)
            if (minG > 5) {
                this.dataY1Min = String(minS) + '5'
            } else if (minG <= 5) {
                this.dataY1Min = String(minS) + '0'
            }
            if (maxG >= 5) {
                this.dataY1Max = String(maxS + 1) + '0'
            } else if (maxG < 5) {
                this.dataY1Max = String(maxS) + '5'
            }
            this.drawLeft()
            this.drawRight()
        },
        drawLeft() {
            var leftLine = echarts.init(document.getElementById('leftLine'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function(data) {
                        let val1 = '',
                            val2 = '',
                            val3 = ''
                        data.forEach(i => {
                            if (i.seriesName == '室外温度') {
                                val1 = `<br/>室外温度：${i.value ? i.value.toFixed(1) : ''}`
                            }
                            if (i.seriesName == '室内平均温度') {
                                val2 = `<br/>室内平均温度：${i.value ? i.value.toFixed(1) : ''}`
                            }
                            if (i.seriesName == '室内最高温度') {
                                val3 = `<br/>室内最高温度：${i.value ? i.value.toFixed(1) : ''}`
                            }
                        })
                        return `${data[0].name}${val1}${val2}${val3}`
                    }
                },
                title: {
                    text: '室内外温度',
                    fontSize: '16px',
                    color: '#1F2429'
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.dataX
                },
                yAxis: {
                    type: 'value',
                    min: Number(this.dataY1Min),
                    max: Number(this.dataY1Max),
                    interval: 2,
                    axisLabel: { formatter: '{value}  ℃' }
                },
                series: [
                    {
                        name: '室外温度',
                        type: 'line',

                        data: this.dataY1,
                        color: '#0091FF'
                    },
                    {
                        name: '室内平均温度',
                        type: 'line',

                        data: this.dataY2,
                        color: '#00D6B9'
                    },
                    {
                        name: '室内最高温度',
                        type: 'line',

                        data: this.dataY3,
                        color: '#FFBA6B'
                    }
                ]
            }
            leftLine.setOption(option)
        },
        drawRight() {
            var RightLine = echarts.init(document.getElementById('RightLine'))
            RightLine.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: false,
                        label: {
                            backgroundColor: '#ccc',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            color: '#222'
                        }
                    },
                    formatter: function(data) {
                        let val1 = '',
                            val2 = '',
                            val3 = ''
                        data.forEach(i => {
                            if (i.seriesName == '预测冷量上限') {
                                val1 = `<br/>预测冷量上限：${i.value ? i.value.toFixed(1) : '--'}`
                            }
                            if (i.seriesName == '预测冷量下限') {
                                val2 = `<br/>预测冷量下限：${i.value ? i.value.toFixed(1) : '--'}`
                            }
                            if (i.seriesName == '实际供冷量') {
                                val3 = `<br/>实际供冷量：${i.value ? i.value.toFixed(1) : '--'}`
                            }
                        })
                        return `${data[0].name}${val1}${val2}${val3}`
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.loadX
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dotted'
                        }
                    },
                    axisLabel: { formatter: '{value}  kW' }
                },
                series: [
                    {
                        name: '实际供冷量',
                        type: 'line',
                        data: this.loadY1,
                        itemStyle: {
                            color: '#0091FF'
                        }
                    },
                    {
                        name: '预测冷量上限',
                        type: 'line',
                        data: this.loadY2,
                        color: '#B6E0FF',
                        lineStyle: {
                            opacity: 0
                        },
                        stack: 'confidence-band',
                        symbol: 'none'
                    },
                    {
                        name: '预测冷量下限',
                        type: 'line',
                        data: this.loadY3,
                        color: '#B6E0FF',
                        areaStyle: {
                            normal: {
                                color: '#B6E0FF'
                            }
                        },
                        stack: 'confidence-band',
                        symbol: 'none'
                    }
                ]
            })
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.drawData()
        })
    },
    watch: {
        chillerList: {
            immediate: true,
            handler(val, old) {
                if (old) {
                    this.drawData()
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.line-container {
    width: 100%;
    height: 100%;
    display: flex;
    .leftL {
        width: 45%;
        flex: 1;
        .leftLengend {
            text-align: center;
            margin-bottom: 10px;
            i {
                display: inline-block;
                width: 16px;
                height: 6px;
                border-radius: 3px;
                vertical-align: middle;
            }
            .innerIcon {
                background: rgba(0, 214, 185, 1);
                margin: 0 20px;
            }
            .outIcon {
                background: rgba(0, 145, 255, 1);
            }
            .innerMax {
                background: rgba(255, 186, 107, 1);
            }
        }
    }
    .rightL {
        flex: 1;
        width: 45%;
        .rightLengend {
            text-align: center;
            margin-bottom: 10px;
            i {
                display: inline-block;
                width: 16px;
                height: 6px;
                border-radius: 3px;
                vertical-align: middle;
            }
            .preCool {
                background: #0091ff;
                opacity: 0.29;
                margin-left: 20px;
            }
        }
    }
}
</style>
