<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <Area @click="handleNodeClick"></Area>
                        </el-form-item>
                        <el-form-item label="日期:">
                            <el-date-picker
                                v-show="tab == 'first-first'"
                                v-model="value2"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                            ></el-date-picker>
                            <el-date-picker
                                v-show="tab == 'first-second'"
                                value-format="yyyy-MM"
                                v-model="value2"
                                type="month"
                                placeholder="选择月"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="监测点名称:">
                            <el-input v-model="value" clearable placeholder="请输入监测点名称"></el-input>
                        </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">导出</el-button> -->
                        </el-form-item>
                    </el-form>
                    <el-tabs :tab-position="tabPosition" v-model="active1" @tab-click="handleClick11">
                        <el-tab-pane label="暂态指标监测点日报" name="first-first">
                            <el-row :gutter="10">
                                <el-col :span="14" class="mt10">
                                    <div
                                        style="margin-bottom: 5px; font-size: 14px; font-weight: 600"
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点电压暂降和短时中断分布情况
                                    </div>
                                    <el-table
                                        stripe
                                        :data="serialData1"
                                        highlight-current-row
                                        height="274px"
                                        :key="Math.random()"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column show-overflow-tooltip label="残余电压" min-width="120">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="featureAmplitude"
                                                label="U(%)"
                                                min-width="120"
                                            ></el-table-column>
                                        </el-table-column>
                                        <el-table-column show-overflow-tooltip label="持续时间t(s)">
                                            <el-table-column show-overflow-tooltip label="t1">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration100"
                                                    label="(0.01,0.1]"
                                                    min-width="100"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t2">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration250"
                                                    label="(0.1,0.25]"
                                                    min-width="100"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t3">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration500"
                                                    label="(0.25,0.5]"
                                                    min-width="100"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t4">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration1000"
                                                    label="(0.5,1]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t5">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration3000"
                                                    label="(1,3]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t6">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration10000"
                                                    label="(3,10]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t7">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration20000"
                                                    label="(10,20]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t8">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration60000"
                                                    label="(20,60]"
                                                ></el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>

                                <el-col :span="10" class="mt10">
                                    <div
                                        style="margin-bottom: 5px; font-size: 14px; font-weight: 600"
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点电压暂升分布情况
                                    </div>
                                    <el-table
                                        stripe
                                        highlight-current-row
                                        :data="serialData11"
                                        height="274px"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column show-overflow-tooltip label="电压幅值" min-width="100">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="featureAmplitude"
                                                label="U(%)"
                                                min-width="100"
                                            ></el-table-column>
                                        </el-table-column>
                                        <el-table-column show-overflow-tooltip label="持续时间t(s)">
                                            <el-table-column show-overflow-tooltip label="t1">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration500"
                                                    label="(0.01,0.1]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t2">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration5000"
                                                    label="(0.1,0.25]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t3">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration60000"
                                                    label="(0.25,0.5]"
                                                ></el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24" class="mt10">
                                    <div
                                        style="margin-top: 5px; margin-bottom: 5px; font-size: 14px; font-weight: 600"
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点暂态事件发生次数
                                    </div>
                                    <el-table
                                        stripe
                                        highlight-current-row
                                        :data="serialData111"
                                        :height="height1"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="date"
                                            label="时间"
                                        ></el-table-column>
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="orgName"
                                            label="所属单位"
                                        ></el-table-column>
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="voltageLevelName"
                                            label="监测点电压等级"
                                            min-width="120"
                                        ></el-table-column>

                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="monitorName"
                                            label="监测点名称"
                                        ></el-table-column>
                                        <el-table-column show-overflow-tooltip label="暂态事件发生次数">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="shortInterruptionCount"
                                                label="短时中断"
                                            ></el-table-column>
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="voltageDipCount"
                                                label="电压暂降"
                                            ></el-table-column>
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="voltageRiseCount"
                                                label="电压暂升"
                                            ></el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="暂态指标监测点月报" name="first-second">
                            <el-row :gutter="10">
                                <el-col :span="14" class="mt10">
                                    <div
                                        style="margin-bottom: 5px; font-size: 14px; font-weight: 600"
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点电压暂降和短时中断分布情况
                                    </div>
                                    <el-table
                                        stripe
                                        highlight-current-row
                                        :data="serialData2"
                                        height="274px"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column show-overflow-tooltip label="残余电压" min-width="110">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="featureAmplitude"
                                                label="U(%)"
                                                min-width="110"
                                            ></el-table-column>
                                        </el-table-column>
                                        <el-table-column show-overflow-tooltip label="持续时间t(s)">
                                            <el-table-column show-overflow-tooltip label="t1">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration100"
                                                    label="(0.01,0.1]"
                                                    min-width="110"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t2">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration250"
                                                    label="(0.1,0.25]"
                                                    min-width="110"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t3">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration500"
                                                    label="(0.25,0.5]"
                                                    min-width="110"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t4">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration1000"
                                                    label="(0.5,1]"
                                                    min-width="110"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t5">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration3000"
                                                    label="(1,3]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t6">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration10000"
                                                    label="(3,10]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t7">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration20000"
                                                    label="(10,20]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t8">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration60000"
                                                    label="(20,60]"
                                                ></el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                                <el-col :span="10" class="mt10">
                                    <div
                                        style="margin-bottom: 5px; font-size: 14px; font-weight: 600"
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点电压暂升分布情况
                                    </div>
                                    <el-table
                                        stripe
                                        highlight-current-row
                                        :data="serialData22"
                                        height="274px"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column show-overflow-tooltip label="电压幅值" min-width="110">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="featureAmplitude"
                                                label="U(%)"
                                                min-width="110"
                                            ></el-table-column>
                                        </el-table-column>
                                        <el-table-column show-overflow-tooltip label="持续时间t(s)">
                                            <el-table-column show-overflow-tooltip label="t1">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration500"
                                                    label="(0.01,0.1]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t2">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration5000"
                                                    label="(0.1,0.25]"
                                                ></el-table-column>
                                            </el-table-column>
                                            <el-table-column show-overflow-tooltip label="t3">
                                                <el-table-column
                                                    show-overflow-tooltip
                                                    prop="duration60000"
                                                    label="(0.25,0.5]"
                                                ></el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24" class="mt10">
                                    <div
                                        style="
                                            margin-top: 5px;
                                            margin-top: 5px;
                                            margin-bottom: 5px;
                                            font-size: 14px;
                                            font-weight: 600;
                                        "
                                        :style="`color:${echartsColor.WordColor}`"
                                    >
                                        监测点暂态事件发生次数
                                    </div>
                                    <el-table
                                        stripe
                                        highlight-current-row
                                        :data="serialData222"
                                        :height="height1"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="date"
                                            label="时间"
                                        ></el-table-column>
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="orgName"
                                            label="所属单位"
                                        ></el-table-column>
                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="voltageLevelName"
                                            label="监测点电压等级"
                                            min-width="120px"
                                        ></el-table-column>

                                        <el-table-column
                                            show-overflow-tooltip
                                            prop="monitorName"
                                            label="监测点名称"
                                        ></el-table-column>
                                        <el-table-column show-overflow-tooltip label="暂态事件发生次数">
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="shortInterruptionCount"
                                                label="短时中断"
                                            ></el-table-column>
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="voltageDipCount"
                                                label="电压暂降"
                                            ></el-table-column>
                                            <el-table-column
                                                show-overflow-tooltip
                                                prop="voltageRiseCount"
                                                label="电压暂升"
                                            ></el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { viewheight } from '@/assets/commjs/common'
import {
    getEventDipShortDistribution,
    getEventRiseDistribution,
    getMonitorEventCount
} from '@/api/Statistical-analysis/statisticalReport.js'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: { Area },
    data() {
        return {
            type: 5,
            echartsColor: JSON.parse(window.localStorage.echartsColor),
            areaid: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            tab: 'first-first',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', date)
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', date)
                        }
                    }
                ]
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 2678400000
                }
            },
            value: '',
            value2: this.getEndTime(),
            voltageLevel: '',
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            vh: '',
            height: null,
            height1: null,
            device: '',
            getHeight: '',
            tabPosition: 'top',
            active1: 'first-first',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData: [],
            serialData1: [],
            serialData11: [],
            serialData111: [],
            serialData2: [],
            serialData22: [],
            serialData222: [],
            level: []
        }
    },
    created() {
        this.account()
    },
    mounted() {
        this.level = dicData('Dev_Voltage', ['Load_Type'])

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = (viewheight() - 90) / 2 + 'px'
            this.height = window.sessionStorage.getItem('appheight') - 215
            //echarts图表调用
            this.height1 = window.sessionStorage.getItem('appheight') - 525
        },
        getEndTime() {
            var now = new Date()
            var sep = '-'
            var year = now.getFullYear()
            var month = now.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            var date = now.getDate()
            if (date < 10) {
                date = '0' + date
            }

            // 拼接当前的日期
            var endTime = year + sep + month + sep + date
            return endTime
        },
        getEndTime1() {
            var now = new Date()
            var sep = '-'
            var year = now.getFullYear()
            var month = now.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            var date = now.getDate()
            if (date < 10) {
                date = '0' + date
            }

            // 拼接当前的日期
            var endTime = year + sep + month
            // console.log(123, endTime);
            return endTime
        },
        handleClick11(tab) {
            this.tab = tab.name
            if (tab.name == 'first-second') {
                this.value2 = this.getEndTime1()
                this.type = 3
                this.account()
            } else {
                this.type = 5
                this.value2 = this.getEndTime()
                this.account()
            }
        },
        handleNodeClick(data) {
            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;'
            }
        },

        //方法调用台账统计数据接口
        account() {
            this.isLoading = true
            this.isLoading2 = true
            //监测终端统计单位表格数据
            getEventDipShortDistribution({
                monitorName: this.value,
                type: this.type,
                startTime: this.value2,
                endTime: this.value2,
                id: this.areaid
            }).then(res => {
                this.isLoading = false
                this.serialData1 = res.data
                this.serialData2 = res.data
            })
            getEventRiseDistribution({
                monitorName: this.value,
                type: this.type,
                startTime: this.value2,
                endTime: this.value2,
                id: this.areaid
            }).then(res => {
                this.isLoading = false
                this.serialData11 = res.data
                this.serialData22 = res.data
            })
            getMonitorEventCount({
                monitorName: this.value,
                type: this.type,
                startTime: this.value2,
                endTime: this.value2,
                id: this.areaid
            }).then(res => {
                this.isLoading = false
                this.serialData111 = res.data
                this.serialData222 = res.data
            })
        }
    }
}
</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: 100;
}
::v-deep .el-tabs__header {
    margin: 0 0 5px;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 5px;
}
</style>
