<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item label="电压等级:">
                <el-select v-model.trim="valueLevel" placeholder="请选择" clearable multiple style="width: 225px"
                    collapse-tags>
                    <el-option v-for="item in level" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评价指标:">
                <el-select v-model="pjzb" placeholder="请选择">
                    <el-option v-for="item in pjzblist" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <Timslot @time="time"></Timslot>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">查询</el-button>
                <el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
            </el-form-item>
        </el-form>
        <div v-loading="isLoading">
            <vxe-table size="mini" border stripe :row-config="{ isCurrent: true, isHover: true }" ref="classification1"
                :data="serialData" :height="vh" style="width: 100%" header-cell-class-name="table_header"
                :cell-style="cellStyle">
                <vxe-table-colgroup field="orgName" title="所属单位" min-width="200" align="center"></vxe-table-colgroup>
                <vxe-table-colgroup field="voltageLevelName" title="电压等级" min-width="200"
                    align="center"></vxe-table-colgroup>
                <vxe-table-colgroup title="电压水平" align="center" min-width="100">
                    <vxe-table-colgroup field="voltageAvg" title="均值(kV)" min-width="100"
                        align="center"></vxe-table-colgroup>
                    <vxe-table-colgroup field="voltageSd" title="标准差(kV)" min-width="100"
                        align="center"></vxe-table-colgroup>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="三相电压不平衡水平" align="center">
                    <vxe-table-colgroup field="unbalanceAvg" title="均值(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                    <vxe-table-colgroup field="unbalanceSd" title="标准差(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="电压总谐波畸变率水平" align="center">
                    <vxe-table-colgroup field="vthdAvg" title="均值(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                    <vxe-table-colgroup field="vthdSd" title="标准差(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="长时间闪变水平" align="center">
                    <vxe-table-colgroup field="flickerAvg" title="均值(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                    <vxe-table-colgroup field="flickerSd" title="标准差(%)" min-width="100"
                        align="center"></vxe-table-colgroup>
                </vxe-table-colgroup>
            </vxe-table>

            <div id="electr6" style="width: 100%; margin-top: 10px" :style="{ height: vh  }" />
        </div>
    </div>
</template>

<script>
import { getAllRMpBenchmarkLevelList } from '@/api/Statistical-analysis/baselineLevelAssessment.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Timslot from './Timeslot.vue'
import Area from '@/views/components/Area/Area.vue'

export default {
    components: { Area, Timslot },
    data() {
        return {
            pjzblist: [],
            valueLevel: [''],
            pjzb: '',
            level: [],
            value: '',
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            kai: true,
            height: null,
            end: '',
            start: '',
            type: 1,
            areaid: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            tabPosition: 'top',
            active: 'first',
            isLoading: false,
            vh: 0,
            serialData: []
        }
    },
    created() {
        this.vh = (window.sessionStorage.getItem('appheight') - 103) / 2 +'px'
        this.getclassificationData()
        this.getclassificationData1()
    },
    mounted() {
        this.level = dicData('Dev_Voltage', [], 1)
        this.level.shift()
        this.level.forEach(i => {
            this.valueLevel.push(i.id)
        })
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.valueLevel.shift()

        //echarts图表调用

        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        this.account()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            // this.height = window.sessionStorage.getItem('appheight') / 2 - 90
            let domID6 = document.getElementById('electr6')


        },
        dc() {
            this.$refs.classification1.exportData({
                filename: 'export1', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                isFooter: true,
                data: this.serialData
            })
        },
        time(val) {
            ; (this.start = val[0]), (this.end = val[1])
            this.type = val[2]
            if (this.kai) {
            }
        },
        getclassificationData() {
            // debugger
            var code = 'Dev_Voltage'

            this.level = dicData(code, ['Load_Type'])
        },
        getclassificationData1() {
            // debugger
            var code = 'Benchmark_Indicator'

            this.pjzblist = dicData(code, [], 1)
            this.pjzblist.shift()
            this.pjzb = this.pjzblist[0].id
        },
        handleNodeClick(data) {
            // console.log(data, "jjhuyh");
            this.areaid = data.id
        },

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.account()
            //稳态指标超标统计
        },
        cellStyle(row, column, rowIndex, columnIndex) {
            // console.log(row);
            if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
                return 'font-weight: 100;'
            }
        },
        //监测终端统计echarts图表
        async getCensus() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')

            let domID6 = document.getElementById('electr6')



            let myChart6 = echarts.init(domID6)
            let list = []
            let list1 = []
            let list2 = []

            if (this.serialData.length == 0) {
            } else {
                this.serialData.forEach(i => {
                    list.push(i.orgName + '/' + i.voltageLevelName)
                })

                this.serialData.forEach(i => {
                    if (this.serialData[0].benchmarkIndicatorName == '电压水平') {
                        list1.push(i.voltageAvg)
                        list2.push(i.voltageSd)
                    }
                    if (this.serialData[0].benchmarkIndicatorName == '三相电压不平衡水平') {
                        list1.push(i.unbalanceAvg)
                        list2.push(i.unbalanceSd)
                    }
                    if (this.serialData[0].benchmarkIndicatorName == '电压总谐波畸变率水平') {
                        list1.push(i.vthdAvg)
                        list2.push(i.vthdSd)
                    }
                    if (this.serialData[0].benchmarkIndicatorName == '长时间闪变水平') {
                        list1.push(i.flickerAvg)
                        list2.push(i.flickerSd)
                    }
                })
            }
            let unit = ''
            this.pjzblist.forEach(item => {
                if (item.value == this.pjzb) {
                    unit = item.label == '电压水平' ? 'kV' : `%`
                }
            })
            let option1 = {
                title: {
                    text: this.serialData.length == 0 ? '' : this.serialData[0].benchmarkIndicatorName,
                    left: 'center',
                    top: 20
                },
                legend: {
                    data: [`均值(${unit})`, `标准差(${unit})`],
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    right: 40,
                    top: 20,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: { left: '50px', top: 80, bottom: 25, right: '2%', containLabel: true },
                xAxis: {
                    type: 'category',
                    data: list,
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        formatter: function (value) {
                            value = value.replace('网公司', '').replace('供电公司', '')
                            var ret = '' //拼接加\n返回的类目项
                            var maxLength = 5 //每项显示文字个数
                            var valLength = value.length //X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                            if (rowN > 1) {
                                //如果类目项的文字大于5,
                                for (var i = 0; i < rowN; i++) {
                                    var temp = '' //每次截取的字符串
                                    var start = i * maxLength //开始截取的位置
                                    var end = start + maxLength //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + '\n'
                                    ret += temp //凭借最终的字符串
                                }
                                return ret
                            } else {
                                return value
                            }
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    minInterval: 1,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },

                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
                },
                color: echartsColor.FigureColor,
                series: [
                    {
                        name: `均值(${unit})`,
                        type: 'bar',
                        barWidth: 24,
                        stack: 'total',
                        data: list1
                    },
                    {
                        name: `标准差(${unit})`,
                        type: 'bar',
                        barWidth: 24,
                        stack: 'total',
                        data: list2
                    }
                ]
            }

            myChart6.setOption(option1, true)
            window.echartsArr.push(myChart6)

            setTimeout(function () {
                myChart6.resize()
            }, 0)
        },

        //方法调用台账统计数据接口
        account() {
            this.kai = false
            this.isLoading = true
            //监测终端统计单位表格数据
            getAllRMpBenchmarkLevelList({
                endTime: this.end,
                startTime: this.start,
                type: this.type,
                id: this.areaid,
                returnType: '1',
                voltageLevel: this.valueLevel.toString(),
                benchmarkIndicator: this.pjzb
            }).then(res => {
                this.serialData = res.data

                this.getCensus()
                this.isLoading = false
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

::v-deep .el-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}

.prop {
    font-weight: 600;
}
</style>
