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

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryFn">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="24" :style="'height:' + vhh + ';overflow:hidden'">
            <el-col :span="8">
                <!-- 剩余电压表格 -->
                <el-table
                    stripe
                    highlight-current-row
                    :data="voltageData"
                    :height="height"
                    border
                    align="center"
                    :row-config="{ isCurrent: true, isHover: true }"
                    v-loading="isLoading"
                    style="width: 100%"
                    header-cell-class-name="table_header"
                >
                    <template v-for="(item, index) in tableHeaderVoltage">
                        <el-table-column
                            align="center"
                            :prop="item.prop"
                            :label="item.label"
                            :key="index"
                            :width="item.width"
                        ></el-table-column>
                    </template>
                </el-table>
            </el-col>
            <!-- echarts图1 -->
            <el-col :span="8">
                <ITICechartsLeft :form="form" ref="left"></ITICechartsLeft>
            </el-col>
            <!-- echarts图2 -->
            <el-col :span="8">
                <ITICechartsRight :form="form" ref="right"></ITICechartsRight>
            </el-col>
        </el-row>
        <el-row :style="'height:' + vhh + ';overflow:hidden'">
            <div class="dw">
                <el-table
                    stripe
                    highlight-current-row
                    :data="tolerateData"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                >
                    <template v-for="(item, index) in tableHeaderTolerate">
                        <el-table-column
                            align="center"
                            :prop="item.prop"
                            :label="item.label"
                            :key="index"
                            :width="item.width"
                        ></el-table-column>
                    </template>
                </el-table>
            </div>
            <ITICecharts @transfer-data="transferData" :form="form" ref="echart"></ITICecharts>
        </el-row>
    </div>
</template>

<script>
import { getPwEventCategoryDetails } from '@/api/Distributionnetwork/transient/transient'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
import ITICechartsLeft from './components/ITICechartsLeft.vue'
import ITICechartsRight from './components/ITICechartsRight.vue'
import ITICecharts from '../curve/components/ITICecharts.vue'
export default {
    components: {
        Area,
        Timeinterval,
        ITICechartsLeft,
        ITICechartsRight,
        ITICecharts
    },
    data() {
        return {
            height: null,
            vhh: '',
            item: ['', ''],
            form: {
                endTime: '',
                id: '',
                startTime: '',
                type: ''
            },
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ],
            //暂态事件分布统计表格数据
            tableHeaderVoltage: [
                { prop: 'featureAmplitude', label: '剩余电压(%)', width: 120 },
                { prop: 'duration20', label: '20ms' },
                { prop: 'duration100', label: '100ms' },
                { prop: 'duration500', label: '500ms' },
                { prop: 'duration1000', label: '1s' },
                { prop: 'duration3000', label: '3s' },
                { prop: 'duration20000', label: '20s' },
                { prop: 'duration60000', label: '60s' },
                { prop: 'duration180000', label: '180s' }
            ],
            voltageData: [],
            //可容忍表格数据
            tableHeaderTolerate: [
                { prop: 'toleranceName', label: '名称' },
                { prop: 'totalEvents', label: '事件总数' },
                { prop: 'tolerable', label: '可容忍' },
                { prop: 'Intolerable', label: '不可容忍' }
            ],
            tolerateData: [],
            isLoading: false,
            device: ''
        }
    },
    created() {
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // this.item=this.$refs.interval.timeValue;
        this.form.type = this.$refs.interval.intervald
        this.device = window.devicePixelRatio

        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let vh = window.sessionStorage.getItem('appheight') - 250
            this.vhh = (window.sessionStorage.getItem('appheight') - 180) / 2 + 'px'
            this.height = vh / 2 + 'px'
        },
        // 表格查询
        onSubmit() {
            this.isLoading = true
            this.form.type = this.$refs.interval.intervald
            this.item = this.$refs.interval.timeValue
            this.form.startTime = this.item[0]
            this.form.endTime = this.item[1]
            // console.log(this.form,'===============================');
            getPwEventCategoryDetails(this.form).then(res => {
                // console.log(res,'==================');
                this.isLoading = false
                this.voltageData = res.data
            })
            // this.$refs.left.echarts()
        },
        //获取数据
        transferData(data, pointIData, pointIunData) {
            // console.log(data,pointIData,pointIunData,1111);
            let obj = [
                {
                    toleranceName: '事件个数',
                    totalEvents: data.data.totalNumberOfEvents,
                    tolerable: pointIData.length,
                    Intolerable: pointIunData.length
                }
            ]
            this.tolerateData = obj
        },
        //查询
        queryFn() {
            this.onSubmit()
            this.$refs.left.echarts()
            this.$refs.right.echarts()
            this.$refs.echart.iticData()
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.id = data.id
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
.dw {
    position: absolute;
    right: 50px;
    width: 500px;
    z-index: 2;
    top: -10px;
}
::v-deep .el-col .el-col-8 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
</style>
