<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <Area @click="handleNodeClick"></Area>
            <el-form-item>
                <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="info">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
            </el-form-item>
        </el-form>
        <el-row :gutter="20">
            <el-col :span="12" :style="`height: ${vh}; overflow: hidden;`">
                <div v-loading="isLoading1" id="electr1" style="height: 100%" />
            </el-col>
            <el-col :span="12" :style="`height: ${vh}; overflow: hidden;`">
                <div v-loading="isLoading2" id="electr2" style="height: 100%" />
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { getCycleStatistics } from '@/api/Process-supervision/Terminaldetection/index.js'
export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            zoom: '',
            isLoading1: false,
            isLoading2: false,
            vh: null,
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            list: []
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.info()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 170 + 'px'
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 170 + 'px')
            }, 0)
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') - 170 + 'px')
            }, 0)
        },
        info() {
            getCycleStatistics({
                endTime: this.$refs.Timeinterval.timeValue[1],
                id: this.id,
                startTime: this.$refs.Timeinterval.timeValue[0]
            }).then(res => {
                this.list = res.data
                this.electr1()
                this.electr2()
            })
        },
        electr1() {
            this.isLoading1 = true
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 170 + 'px')
            }, 0)
            let myChart = echarts.init(domID1)
            let title = []
            let data = []
            let data1 = []
            this.list.dateStatistics.forEach(item => {
                title.push(item.orgName)
                data.push(item.expanded)
                data1.push(item.notExpanded)
            })
            let option = {
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    right: '50px',
                    top: '50px',
                    left: '30px',
                    bottom: '50px',
                    containLabel: true
                },
                legend: {
                    data: ['已展开', '未展开'],
                    itemWidth: 16,
                    itemHeight: 16,
                    right: 40,
                    top: 20,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },

                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: title,
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            rotate: 30,   interval: 0,
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '(单位/台)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                // dataZoom: [
                //     {
                //         show: true,
                //         height: 12,
                //         xAxisIndex: [0],
                //         bottom: '10px',
                //         start: 0,
                //         end: 100,
                //         handleIcon:
                //             'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                //         handleSize: '110%',
                //         handleStyle: {
                //             color: '#d3dee5'
                //         },
                //         textStyle: {
                //             color: '#fff'
                //         },
                //         borderColor: '#90979c'
                //     },
                //     {
                //         type: 'inside',
                //         show: true,
                //         height: 15,
                //         start: 0,
                //         end: 100
                //     }
                // ],
                series: [
                    {
                        name: '已展开',
                        type: 'bar',
                        barMaxWidth: 30, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: data
                    },
                    {
                        name: '未展开',
                        type: 'bar',
                        barMaxWidth: 30, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[1] }
                        },
                        data: data1
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
            }, 0)
            this.isLoading1 = false
        },
        electr2() {
            this.isLoading2 = true
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') - 170 + 'px')
            }, 0)
            let myChart = echarts.init(domID2)
            let title = []
            let data = []
            this.list.orgStatistics.forEach(item => {
                title.push(item.orgName)
                data.push(item.count)
            })
            let option = {
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    right: '30px',
                    top: '50px',
                    left: '50px',
                    bottom: '50px',
                    containLabel: true
                },
                legend: {
                    data: ['检测终端数量'],
                    itemWidth: 16,
                    itemHeight: 16,
                    right: 40,
                    top: 20,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                // dataZoom: [
                //     {
                //         show: true,
                //         height: 12,
                //         xAxisIndex: [0],
                //         bottom: '10px',
                //         start: 0,
                //         end: 100,
                //         handleIcon:
                //             'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                //         handleSize: '110%',
                //         handleStyle: {
                //             color: '#d3dee5'
                //         },
                //         textStyle: {
                //             color: '#fff'
                //         },
                //         borderColor: '#90979c'
                //     },
                //     {
                //         type: 'inside',
                //         show: true,
                //         height: 15,
                //         start: 0,
                //         end: 100
                //     }
                // ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: title,
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            rotate: 30,   interval: 0,
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '(单位/台)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '检测终端数量',
                        type: 'bar',
                        barMaxWidth: 30, //最大宽度
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: data
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
            }, 0)
            this.isLoading2 = false
        },
        handleNodeClick(data) {
            this.id = data.id
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped></style>
