<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <Timeinterval ref="interval" :interval="3"></Timeinterval>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="accountinformation">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="text" @click="closeHandle">
                            条件筛选
                            <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                        </el-button>
                    </el-form-item>
                </el-form>

                <div class="container" id="container">
                    <i @click="closeHandle" class="el-icon-circle-close coles"></i>
                    <el-form :inline="true" :model="formData" label-width="90px" class="">
                        <el-form-item label="干扰源类型:" class="box">
                            <el-select
                                v-model.trim="formData.loadType"
                                placeholder="请选择"
                                multiple
                                collapse-tags
                                clearable
                            >
                                <el-option
                                    v-for="item in interferenceSource"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="{
                                        label: item.name,
                                        value: item.id,
                                        name: item.name,
                                        id: item.id,
                                        code: item.code,
                                        sort: item.sort
                                    }"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="电压等级:" class="box">
                            <el-select
                                v-model.trim="formData.scale"
                                placeholder="请选择"
                                multiple
                                collapse-tags
                                clearable
                            >
                                <el-option
                                    v-for="item in level"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="{
                                        label: item.name,
                                        value: item.id,
                                        name: item.name,
                                        id: item.id,
                                        code: item.code,
                                        sort: item.sort
                                    }"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="通讯状态:" class="box">
                            <el-select
                                v-model.trim="formData.comFlag"
                                placeholder="请选择"
                                clearable
                                multiple
                                collapse-tags
                            >
                                <el-option
                                    v-for="item in communication"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="筛选数据:">
                            <el-input
                                style="width: 300px"
                                v-model.trim="formData.searchValue"
                                placeholder="根据监测点名称,所属变电站,监测终端编号查询"
                                clearable
                                class="text"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <template>
                    <vxe-table
                        stripe
                        :data="
                            accountinformationData.slice(
                                (formData.pageNum - 1) * formData.pageSize,
                                formData.pageNum * formData.pageSize
                            )
                        "
                        :height="height"
                        border
                        class="xshou"
                        :row-config="{ isCurrent: true, isHover: true }"
                        ref="Accountinformation"
                        style="width: 100%"
                        header-cell-class-name="table_header"
                        :row-class-name="rowClassName"
                        :sort-config="{
                            trigger: 'cell',
                            sortMethod: sortJ
                        }"
                    >
                        <template v-for="(item, index) in tableHeaderAccountinformation">
                            <vxe-table-colgroup
                                :field="item.prop"
                                :title="item.label"
                                :key="index"
                                :min-width="item.width"
                                show-overflow
                                align="center"
                            >
                                <template v-for="(val, index) in item.children">
                                    <vxe-table-column
                                        :field="val.prop"
                                        :title="val.label"
                                        :key="index"
                                        :min-width="val.width"
                                        show-overflow
                                        align="center"
                                    ></vxe-table-column>
                                </template>
                            </vxe-table-colgroup>
                        </template>
                    </vxe-table>
                    <el-pagination
                        align="right"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="formData.pageNum"
                        :page-sizes="[20, 30, 40, 50, 100]"
                        :page-size="formData.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="accountinformationData.length"
                        class="mt10"
                    ></el-pagination>
                </template>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getLineLedgerData } from '@/api/accountinformation'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            vh: '',
            view: false,
            height: null,
            isLoading: false,
            formData: {
                comFlag: [0, 1],
                loadType: [],
                scale: [],
                deptIndex: '',
                pageNum: 1,
                pageSize: 20,
                serverName: 'event-boot',
                searchBeginTime: '',
                searchEndTime: '',
                searchValue: '',
                statisticalType: {}
            },
            item: ['', ''],
            total: 20, // 总条数
            //干扰源类型数据
            interferenceSource: [],
            //电压等级数据
            level: [],
            //通讯状态状态数据
            communication: [
                {
                    id: 1,
                    label: '正常'
                },
                {
                    id: 0,
                    label: '中断'
                }
            ],
            //监测覆盖率报表表头
            tableHeaderAccountinformation: [
                { prop: 'areaName', label: '省公司', width: 120 },
                { prop: 'gdName', label: '市公司', width: 120 },
                { prop: 'scale', label: '监测点电压等级', width: 150, sortable: true },
                { prop: 'lineName', label: '监测点名称', width: 120 },
                { prop: 'bdName', label: '所属变电站', width: 120 },
                { prop: 'loadType', label: '干扰源类型', width: 120 },
                { prop: 'objName', label: '监测对象名称', width: 180 },
                {
                    prop: 'shortCapacity',
                    label: '最小短路容量(MVA)',
                    width: 190,
                    sortable: true
                },
                {
                    prop: 'devCapacity',
                    label: '供电设备容量(MVA )',
                    width: 190,
                    sortable: true
                },
                {
                    prop: 'dealCapacity',
                    label: '用户协议容量(MVA)',
                    width: 190,
                    sortable: true
                },
                { prop: 'comFlag', label: '通讯状态 ', width: 120 },
                { prop: 'id', label: '监测点序号', width: 120, sortable: true },
                { prop: 'devName', label: '监测终端编号 ', width: 140 },
                { prop: 'ptType', label: '监测终端接线方式', width: 160 },
                {
                    prop: 'voltageDev',
                    label: '电压偏差上限(%)',
                    width: 160,
                    sortable: true
                },
                {
                    prop: 'uvoltageDev',
                    label: '电压偏差下限(%)',
                    width: 160,
                    sortable: true
                },
                {
                    prop: 'limitValue',
                    label: '限值',
                    children: [
                        { prop: 'freqDev', label: '频率(Hz)', width: 120, sortable: true },
                        {
                            prop: 'ubalance',
                            label: '三相电压不平衡度(%)',
                            width: 190,
                            sortable: true
                        },
                        { prop: 'ineg', label: '负序电流(A)', width: 120, sortable: true },
                        {
                            prop: 'flicker',
                            label: '长时间闪变',
                            width: 120,
                            sortable: true
                        },
                        {
                            prop: 'uaberrance',
                            label: '电压总谐波畸变率(%)',
                            width: 190,
                            sortable: true
                        },
                        {
                            prop: 'oddHarm',
                            label: '奇数次谐波电压(%)',
                            width: 180,
                            sortable: true
                        },
                        {
                            prop: 'evenHarm',
                            label: '偶数次谐波电压(%)',
                            width: 180,
                            sortable: true
                        }
                    ]
                },
                {
                    prop: 'evaluate',
                    label: '电流限值',
                    children: [
                        { prop: 'iharm2', label: '2次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm3', label: '3次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm4', label: '4次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm5', label: '5次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm6', label: '6次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm7', label: '7次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm8', label: '8次谐波(A)', width: 120, sortable: true },
                        { prop: 'iharm9', label: '9次谐波(A)', width: 120, sortable: true },
                        {
                            prop: 'iharm10',
                            label: '10次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm11',
                            label: '11次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm12',
                            label: '12次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm13',
                            label: '13次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm14',
                            label: '14次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm15',
                            label: '15次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm16',
                            label: '16次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm17',
                            label: '17次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm18',
                            label: '18次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm19',
                            label: '19次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm10',
                            label: '20次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm21',
                            label: '21次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm22',
                            label: '22次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm23',
                            label: '23次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm24',
                            label: '24次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'iharm25',
                            label: '25次谐波(A)',
                            width: 140,
                            sortable: true
                        },
                        {
                            prop: 'inUharm',
                            label: '0.5-1.5次间谐波(A)',
                            width: 180,
                            sortable: true
                        },
                        {
                            prop: 'inUharm16',
                            label: '2.5-15.5次间谐波(A)',
                            width: 190,
                            sortable: true
                        }
                    ]
                }
            ],
            accountinformationData: [],
            device: '',
            type: {},
            deptId: ''
        }
    },
    created() {
        this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
    },
    mounted() {
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.accountinformation()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 150
        },
        sortJ({ data, sortList }) {
            const { property, order } = sortList[0]
            let list = []
            if (order === 'asc' || order === 'desc') {
                if (property === 'scale') {
                    list = data.sort((a, b) => {
                        return (
                            a[property].slice(0, a[property].length - 2) - b[property].slice(0, b[property].length - 2)
                        )
                    })
                } else {
                    list = data.sort((a, b) => {
                        return a[property] - b[property]
                    })
                }
                if (order === 'desc') {
                    list.reverse()
                }
                return list
            }
        },
        rowClassName({ row, rowIndex }) {
            row.runNo = rowIndex + 1
        },
        //获取类型
        getclassificationData() {
            // 干扰源类型
            this.interferenceSource = dicData('Interference_Source', ['Load_Type'])
            this.formData.loadType = this.interferenceSource
            //电压等级
            this.level = dicData('Dev_Voltage_Stand', ['Load_Type'])
            this.formData.scale = this.level
        },
        // 切换选项
        handleNodeClick(data) {
            this.formData.deptIndex = data.id
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        //方法调用监测点台账信息数据接口
        accountinformation() {
            this.$emit('Loading', true)
            this.formData.pageNum = 1
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getLineLedgerData(this.formData).then(res => {
                this.$emit('Loading', false)
                this.accountinformationData = res.data
            })
        },
        //导出
        exportEvent() {
            this.$refs.Accountinformation.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.accountinformationData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.accountinformation()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.accountinformation()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .vxe-table .cell {
    text-align: center;
}

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

::v-deep .el-pagination__editor {
    width: 50px;
}
.text {
    width: 210px;
}
.xshou {
    cursor: pointer;
}
.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 50%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 10%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
<style lang="scss" scoped>
// ::v-deep .vxe-body--row.row--hover {
//     background-color: $themeColor !important;
//     color: #FFF !important;
//     z-index: 300000;
// }
</style>
