<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" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="exportEvent" icon="el-icon-download">导出</el-button>
            </el-form-item>
        </el-form>

        <vxe-table
            :data="tableData"
            :height="vh + 'px'"
            border
            stripe
            :row-config="{ isCurrent: true, isHover: true }"
            size="mini"
            ref="classification"
            v-loading="isLoading"
            style="width: 100%"
            :seq-config="{ seqMethod }"
            header-cell-class-name="table_header"
        >
            <vxe-table-column type="seq" width="110" align="center" title="序号"></vxe-table-column>

            <vxe-table-colgroup
                align="center"
                v-for="(item, index) in tableHeaderTotal"
                :field="item.prop"
                :title="item.label"
                :min-width="item.width"
                show-overflow
                :key="index"
                :formatter="formatter"
            >
                <vxe-table-colgroup
                    align="center"
                    v-for="(item, index) in item.children"
                    :field="item.prop"
                    :title="item.label"
                    :min-width="item.width"
                    show-overflow
                    :key="index"
                    :formatter="formatter"
                >
                    <vxe-table-colgroup
                        align="center"
                        v-for="(item, index) in item.children"
                        :field="item.prop"
                        :title="item.label"
                        :min-width="item.width"
                        show-overflow
                        :formatter="formatter"
                        :key="index"
                    ></vxe-table-colgroup>
                </vxe-table-colgroup>
            </vxe-table-colgroup>
        </vxe-table>
        <el-pagination
            background
            class="mt10"
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import { getWindFarmDetailInfo } from '@/api/SpecialAnalysisModuleDesign/WindFarm/index.js'

export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            form: {
                endTime: '',
                id: '',
                monitorTag: '',
                pageNum: 1,
                pageSize: 20,
                startTime: '',
                type: 0
            },
            total: 0,
            isLoading: false,

            vh: undefined,
            tableData: [],
            //暂态事件统计
            tableHeaderTotal: [
                { prop: 'orgName', label: '所属单位', width: 150 },
                { prop: 'measurementPointName', label: '监测点名称', width: 150 },

                {
                    label: '负载率',
                    children: [
                        {
                            prop: 'loadRateAvg',
                            label: '平均值',
                            width: 110
                        },
                        {
                            prop: 'loadRate95',
                            label: '95%值',
                            width: 110
                        },
                        {
                            prop: 'loadRate99',
                            label: '99%值',
                            width: 110
                        }
                    ]
                },
                {
                    label: '超标情况',
                    children: [
                        {
                            prop: 'isV',
                            label: '谐波电压',
                            width: 110
                        },
                        {
                            prop: 'isI',
                            label: '谐波电流',
                            width: 110
                        },
                        {
                            prop: 'isUnbalance',
                            label: '电压不平衡度',
                            width: 130
                        },
                        {
                            prop: 'isINeg',
                            label: '负序电流',
                            width: 110
                        }
                    ]
                },
                {
                    label: '超标次数',
                    children: [
                        {
                            prop: 'vtimes',
                            label: '谐波电压',
                            width: 110
                        },
                        {
                            prop: 'itimes',
                            label: '谐波电流',
                            width: 110
                        }
                    ]
                },

                {
                    label: '总有功功率',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'totalActivePower95',
                            label: '95值',
                            width: 110
                        },
                        {
                            prop: 'totalActivePower99',
                            label: '99值',
                            width: 110
                        },
                        {
                            prop: 'totalActivePowerAvg',
                            label: '平均值',
                            width: 110
                        }
                    ]
                },
                {
                    label: 'A相有功功率',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'apActivePower95',
                            label: '95值',
                            width: 110
                        },
                        {
                            prop: 'apActivePower99',
                            label: '99值',
                            width: 110
                        },
                        {
                            prop: 'apActivePowerAvg',
                            label: '平均值',
                            width: 110
                        }
                    ]
                },
                {
                    label: 'B相有功功率',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'bpActivePower95',
                            label: '95值',
                            width: 110
                        },
                        {
                            prop: 'bpActivePower99',
                            label: '99值',
                            width: 110
                        },
                        {
                            prop: 'bpActivePowerAvg',
                            label: '平均值',
                            width: 110
                        }
                    ]
                },
                {
                    label: 'C相有功功率',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'cpActivePower95',
                            label: '95值',
                            width: 110
                        },
                        {
                            prop: 'cpActivePower99',
                            label: '99值',
                            width: 110
                        },
                        {
                            prop: 'cpActivePowerAvg',
                            label: '平均值',
                            width: 110
                        }
                    ]
                },
                {
                    label: '基波电压',
                    children: [
                        // { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
                        {
                            prop: 'apFundamentalVoltage',
                            label: 'A相',
                            width: 110
                        },
                        {
                            prop: 'bpFundamentalVoltage',
                            label: 'B相',
                            width: 110
                        },
                        {
                            prop: 'cpFundamentalVoltage',
                            label: 'C相',
                            width: 110
                        }
                    ]
                },
                {
                    prop: 'negativeSequenceVoltageUnbalance',
                    label: '负序电压不平衡度',
                    width: 160
                },
                { prop: 'gridDipNum', label: '电网暂降次数', width: 140 },
                { prop: 'offlineNum', label: '脱网事件次数', width: 140 }
            ],
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 169
        },
        info() {
            dicData('Monitoring_Labels', []).forEach(item => {
                if (item.code == 'Smelt_Load') {
                    this.form.monitorTag = item.id
                }
            })
        },
        // 查询
        onSubmit() {
            this.isLoading = true
            this.form.startTime = this.$refs.interval.timeValue[0]
            this.form.endTime = this.$refs.interval.timeValue[1]
            this.form.type = this.$refs.interval.intervald

            getWindFarmDetailInfo(this.form).then(res => {
                this.isLoading = false
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        handleNodeClick(data) {
            this.form.id = data.id
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.form.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.onSubmit()
        },
        //导出
        exportEvent() {
            this.$refs.classification.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        },
        seqMethod(row) {
            return (this.form.pageNum - 1) * this.form.pageSize + row.$rowIndex + 1
        },
        // 数据过滤
        formatter(row) {
            if (row.column.property == 'isI') {
                return row.row.isI == 1 ? '是' : '否'
            } else if (row.column.property == 'isINeg') {
                return row.row.isINeg == 1 ? '是' : '否'
            } else if (row.column.property == 'isUnbalance') {
                return row.row.isUnbalance == 1 ? '是' : '否'
            } else if (row.column.property == 'isV') {
                return row.row.isV == 1 ? '是' : '否'
            } else {
                return row.row[row.column.property]
            }
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
.box {
    display: flex;
    .boxR {
        flex: 1;
    }
    .boxL {
        width: 1100px;
    }
}
::v-deep .el-table .cell {
    text-align: center;
}
</style>
