<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="监测点类别:">
                <el-select v-model="form.valueMonitor" clearable placeholder="请选择监测点类别">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
                <el-button type="primary" icon="el-icon-download">导出</el-button>
            </el-form-item>
            <el-table
                stripe
                :data="totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :height="vh"
                border
                v-loading="isLoading1"
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <template v-for="(item, index) in tableHeaderTotal">
                    <el-table-column :prop="item.prop" :label="item.label" :min-width="item.width" :key="index">
                        <template v-for="(item, index) in item.children">
                            <el-table-column :prop="item.prop" :label="item.label" :min-width="item.width" :key="index">
                                <template v-for="(item, index) in item.children">
                                    <el-table-column
                                        :prop="item.prop"
                                        :label="item.label"
                                        :key="index"
                                    ></el-table-column>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalData.length"
                class="mt10"
            ></el-pagination>
        </el-form>
    </div>
</template>

<script>
import { getTransientData } from '@/api/TransientStateIndex'
import { dictypeData } from '@/api/user'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
import { getDicDataByTypeName } from '@/api/admin/dept'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            vh: undefined,
            date: '',
            input: '',
            height: null,
            form: {
                valueMonitor: '', //监测点类别
                valueLevel: '', //电压等级
                valuePoint: '', //监测点
                time: '' //统计时间
            },
            //监测点类别数据
            typeList: [],
            VoltageList: [], //电压等级数据
            isLoading1: false,
            //暂态事件统计
            tableHeaderTotal: [
                { prop: 'company', label: '单位', width: 180 },
                { prop: 'onlineMonitoring', label: '监测点类别', width: 120 },
                {
                    label: '在线监测点',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'monthVoltage',
                            label: '日均'
                        },
                        {
                            prop: 'onlineMonitoring',
                            label: '累计'
                        }
                    ]
                },
                {
                    label: '暂态监测点数',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'monthVoltage',
                            label: '日均'
                        },
                        {
                            prop: 'onlineMonitoring',
                            label: '累计'
                        }
                    ]
                },
                {
                    label: '暂态监测点占比(%)',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'monthVoltage',
                            label: '日均'
                        },
                        {
                            prop: 'onlineMonitoring',
                            label: '累计'
                        }
                    ]
                },
                { prop: 'onlineMonitoring', label: '暂态发生次数', width: 120 },
                { prop: 'onlineMonitoring', label: '暂态发生频次', width: 120 }
            ],
            totalData: [],
            device: '',
            currentPage: 1, // 当前页码
            total: 20, // 总条数
            pageSize: 20 // 每页的数据条数
        }
    },
    created() {
        this.onSubmit()
        this.dictionaries()
    },
    mounted() {
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 222
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.currentPage = 1
            this.pageSize = val
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
        },
        transient() {},
        // 表格查询
        onSubmit() {
            this.isLoading1 = true
            this.totalData = []
            //方法调用获取暂态事件统计数据接口
            getTransientData().then(res => {
                // console.log(res);
                this.isLoading1 = false
                this.totalData = res.data
            })
        },
        // 字典表
        dictionaries() {
            getDicDataByTypeName({ dictTypeName: '监测点类型  ' }).then(res => {
                this.typeList = res.data
            })
        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(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;
}
::v-deep .el-row {
    width: 100%;
}
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 48%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }
            .el-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>
