<template>
    <div>
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>
            <el-form-item><el-button type="primary" icon="el-icon-search" @click="query">查询</el-button></el-form-item>
        </el-form>
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <h5>DISDIP表格(国际发配电联盟UNIPEDE)</h5>
                    <el-table
                        stripe
                        :data="disdipTable1"
                        border
                        style="width: 100%"
                        height="170"
                        header-cell-class-name="table_header"
                        highlight-current-row
                    >
                        <el-table-column prop="name" label="剩余电压" align="center"></el-table-column>
                        <el-table-column label="持续时间" align="center">
                            <el-table-column align="center" label="20ms" prop="twentyMs"></el-table-column>
                            <el-table-column align="center" label="100ms" prop="oneHundredMs"></el-table-column>
                            <el-table-column align="center" label="500ms" prop="fiveHundredMs"></el-table-column>
                            <el-table-column align="center" label="1s" prop="oneS"></el-table-column>
                            <el-table-column align="center" label="2s" prop="threeS"></el-table-column>
                            <el-table-column align="center" label="20s" prop="twentyS"></el-table-column>
                            <el-table-column align="center" label="60s" prop="sixtyS"></el-table-column>
                            <el-table-column align="center" label="180s" prop="oneEightyS"></el-table-column>
                        </el-table-column>
                    </el-table>
                    <el-row>
                        <el-col :span="24">
                            <h5>IEC61000-4-11(用电终端的电压暂降抗度)</h5>
                            <el-table
                                stripe
                                header-cell-class-name="table_header"
                                :data="disdipTable2"
                                border
                                style="width: 100%"
                                height="170"
                                highlight-current-row
                            >
                                <el-table-column prop="name" label="剩余电压" align="center"></el-table-column>
                                <el-table-column prop="name" label="持续时间" align="center">
                                    <el-table-column
                                        prop="tenTwentyMs"
                                        label="10-20ms"
                                        align="center"
                                    ></el-table-column>
                                    <el-table-column
                                        prop="twentyOneHundredMs"
                                        label="20-100ms"
                                        align="center"
                                    ></el-table-column>
                                    <el-table-column
                                        prop="zeroPiontOneTwoS"
                                        label="0.1-0.2s"
                                        align="center"
                                    ></el-table-column>
                                    <el-table-column
                                        prop="zeroPiontFive1S"
                                        label="0.2-0.5s"
                                        align="center"
                                    ></el-table-column>
                                    <el-table-column
                                        prop="zeroPiontTwoFiveS"
                                        label="0.5-1s"
                                        align="center"
                                    ></el-table-column>
                                    <el-table-column prop="greater1S" label=">1s" align="center"></el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12" style="height: 400px">
                    <div style="width: 100%">
                        <onlinedisecharts ref="onlinedisecharts" :item="item"></onlinedisecharts>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <h5>IEC61000-2-8(公共用电暂降测量统计)</h5>
                    <el-table
                        stripe
                        header-cell-class-name="table_header"
                        :data="disdipTable3"
                        border
                        style="width: 100%"
                        :height="vh - 590"
                        highlight-current-row
                    >
                        <el-table-column prop="name" label="剩余电压" width="140px" align="center"></el-table-column>
                        <el-table-column prop="time" label="持续时间" align="center">
                            <el-table-column prop="q" label="0.01-0.1s" align="center"></el-table-column>
                            <el-table-column prop="w" label="0.1-0.25s" align="center"></el-table-column>
                            <el-table-column prop="e" label="0.25-0.5s" align="center"></el-table-column>
                            <el-table-column prop="r" label="0.5-1s" align="center"></el-table-column>
                            <el-table-column prop="t" label="1-3s" align="center"></el-table-column>
                            <el-table-column prop="y" label="3-20s" align="center"></el-table-column>
                            <el-table-column prop="u" label="20-60s" align="center"></el-table-column>
                            <el-table-column prop="i" label="60-180s" align="center"></el-table-column>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { IEC411, IEC28, eventDisdip } from '@/api/monitoringpointStatistics/echart'

import Timeinterval from '@/views/components/TimePicker/index4'
import onlinedisecharts from '@/views/Event-boot/components/echarts/onlinedisecharts'
export default {
    components: { Timeinterval, onlinedisecharts },
    props: {},
    data() {
        return {
            loading: true,
            vh: 0,
            disdipTable1: [],
            disdipTable2: [],
            disdipTable3: [],
            form: {},
            item: ['', '']
        }
    },
    created() {},
    mounted() {
        this.item = this.$refs.Timeinterval.timeValue

        this.query()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight')
        },
        // 查询数据
        async query() {
            this.$emit('Loading', true)
            let form = {
                lineIndex: this.$store.state.user.lineID,
                startTime: this.$refs.Timeinterval.timeValue[0],
                endTime: this.$refs.Timeinterval.timeValue[1]
            }
            ;(this.item = [this.$refs.Timeinterval.timeValue[0], this.$refs.Timeinterval.timeValue[1]]),
                await IEC411(form).then(res => {
                    this.disdipTable2 = res.data

                    this.$refs.onlinedisecharts.query()
                })
            await IEC28(form).then(res => {
                this.disdipTable3 = res.data
            })
            await eventDisdip(form).then(res => {
                this.disdipTable1 = res.data
            })
            this.$emit('Loading', false)
        }
        // //暂降次数
        // eventmonth() {
        //   var months = new Array();
        //   var handle = new Array();
        //   if (this.datamock != null) {
        //     for (var i = 0; i < this.datamock.length; i++) {
        //       if ((this.datamock[i].month == "01") | (i == 0)) {
        //         months[i] =
        //           this.datamock[i].month + "\n(" + this.datamock[i].year + ")";
        //       } else {
        //         months[i] = this.datamock[i].month;
        //       }
        //       handle[i] = this.datamock[i].times;
        //     }
        //   }
        //   const echarts = require("echarts");
        //   var myChartes = echarts.init(document.getElementById("month"));
        //   var option = {
        //     backgroundColor: "#fff", //背景色,
        //     title: {
        //       text: "月份统计",
        //       x: "center"
        //     },
        //     tooltip: {
        //       trigger: "axis",
        //       axisPointer: {
        //         type: "shadow"
        //       },
        //       formatter: function(params) {
        //         var tips = "";
        //         tips += "<font>月份:" + params[0].name + "</font><br/>";
        //         tips += "<font>暂降次数:" + params[0].data + "</font>";
        //         return tips;
        //       }
        //     },
        //     toolbox: {
        //       show: true,
        //       feature: {
        //         dataView: { show: true },
        //         dataZoom: { show: true },
        //         //restore: { show: true },
        //         saveAsImage: { show: true },
        //         myFull: {
        //           show: true,
        //           title: "全屏查看",
        //           icon:
        //             "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
        //           onclick: e => {
        //             this.fullFlag = true;
        //             let element = document.getElementById("month");
        //             if (element.requestFullScreen) {
        //               // HTML W3C 提议
        //               element.requestFullScreen();
        //             } else if (element.msRequestFullscreen) {
        //               // IE11
        //               element.msRequestFullScreen();
        //             } else if (element.webkitRequestFullScreen) {
        //               // Webkit (works in Safari5.1 and Chrome 15)
        //               element.webkitRequestFullScreen();
        //             } else if (element.mozRequestFullScreen) {
        //               // Firefox (works in nightly)
        //               element.mozRequestFullScreen();
        //             }
        //             // 退出全屏
        //             if (element.requestFullScreen) {
        //               document.exitFullscreen();
        //             } else if (element.msRequestFullScreen) {
        //               document.msExitFullscreen();
        //             } else if (element.webkitRequestFullScreen) {
        //               document.webkitCancelFullScreen();
        //             } else if (element.mozRequestFullScreen) {
        //               document.mozCancelFullScreen();
        //             }
        //           }
        //         }
        //       }
        //     },
        //     color: ["#FF8C00"],
        //     legend: {
        //       data: ["暂降次数"],
        //       x: "left"
        //     },
        //     grid: {
        //       left: "3%",
        //       bottom: "3%",
        //       right: "7%",
        //       containLabel: true
        //     },
        //     xAxis: [
        //       {
        //         type: "category",
        //         data: months,
        //         name: "月份",
        //         splitLine: {
        //           show: false
        //         },
        //         axisLabel: {
        //           show: true,
        //           interval: 0
        //         }
        //       }
        //     ],
        //     yAxis: [
        //       {
        //         type: "value",
        //         name: "次"
        //       }
        //     ],
        //     series: [
        //       {
        //         name: "暂降次数",
        //         type: "bar",
        //         barMaxWidth: 45,
        //         itemStyle: {
        //           normal: {
        //             label: {
        //               show: true,
        //               textStyle: {
        //                 label: { show: true, position: "top" },
        //                 color: "#8B008B"
        //               }
        //             }
        //           }
        //         },
        //         data: handle
        //       }
        //     ]
        //   };

        //   setTimeout(() => {
        //     myChartes.resize();
        //   }, 200);
        // }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
    margin-bottom: -10px;
}
h5 {
    margin: 10px 0;
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
