<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div>
                    <el-col :span="24">
                        <el-form ref="form" :inline="true" class="demo-form-inline">
                            <el-form-item><Area @click="handleNodeClick"></Area></el-form-item>
                            <el-form-item label="干扰源类型:">
                                <el-select
                                    v-model.trim="form.ids"
                                    placeholder="请选择"
                                    clearable
                                    collapse-tags
                                    multiple
                                >
                                    <el-option
                                        v-for="item in interferenceSource"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="评价指标:">
                  <el-select v-model="form.pjzb" placeholder="请选择">
                    <el-option
                      v-for="item in pjzblist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item> -->
                            <el-form-item style="margin-bottom: 0px">
                                <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
                                    查询
                                </el-button>
                                <el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
                            </el-form-item>
                        </el-form>
                        <vxe-table
                            size="mini"
                            border
                            stripe
                            :row-config="{ isCurrent: true, isHover: true }"
                            ref="classification1"
                            :data="tableData"
                            :height="height - 45"
                            style="width: 100%"
                            v-loading="isLoading"
                            header-cell-class-name="table_header"
                        >
                            <vxe-table-colgroup
                                field="orgName"
                                title="所属单位"
                                align="center"
                                show-overflow
                                min-width="120px"
                            ></vxe-table-colgroup>
                            <vxe-table-colgroup
                                field="eventType"
                                title="干扰源类型"
                                align="center"
                                show-overflow
                                :formatter="formFilter"
                                min-width="120px"
                            ></vxe-table-colgroup>
                            <vxe-table-colgroup
                                field="eventCount"
                                title="电压暂降(次)"
                                align="center"
                                show-overflow
                                min-width="120px"
                            ></vxe-table-colgroup>
                            <vxe-table-colgroup
                                field="riseCount"
                                title="电压暂升(次)"
                                align="center"
                                show-overflow
                                min-width="120px"
                            ></vxe-table-colgroup>
                            <vxe-table-colgroup
                                field="interruptCount"
                                title="短时中断(次)"
                                align="center"
                                show-overflow
                                min-width="120px"
                            ></vxe-table-colgroup>
                            <!-- <vxe-table-colgroup
                field="zjcs"
                title="暂态次数"
                align="center"
                show-overflow
                min-width="120px"
              >
              </vxe-table-colgroup> -->
                        </vxe-table>
                        <!-- <el-pagination
              background
              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"
              class="mt10"
            >
            </el-pagination> -->
                    </el-col>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getEventBenchmarkLevelList } from '@/api/Statistical-analysis/baselineLevelAssessment.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'

export default {
    components: { Area, Timeinterval },
    data() {
        return {
            form: {
                ids: [],
                returnType: 2,
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                startTime: '',
                endTime: '',
                type: 1
                // pageSize: 20,
                // pageNum: 1,
            },
            total: 0,
            pjzblist: [],

            interferenceSource: [], //干扰源类型
            kai: true,
            height: null,
            isLoading: false,

            tableData: []
        }
    },
    created() {},
    mounted() {
        this.getclassificationData()

        //echarts图表调用

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.steady()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 80
        },
        dc() {
            this.$refs.classification1.exportData({
                filename: 'export1', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                isFooter: true,
                data: this.tableData
            })
        },

        getclassificationData() {
            this.interferenceSource = dicData('Monitoring_Labels', [])
            this.interferenceSource.forEach(item => {
                this.form.ids.push(item.id)
            })

            // this.pjzblist = dicData("Event_Statis", []);
            // this.pjzblist.shift();
            // this.form.pjzb = this.pjzblist[0].id;
        },
        handleNodeClick(data) {
            this.form.id = data.id
        },

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.isLoading = true
            this.form.startTime = this.$refs.Timeinterval.timeValue[0]
            this.form.endTime = this.$refs.Timeinterval.timeValue[1]
            this.form.type = this.$refs.Timeinterval.intervald
            getEventBenchmarkLevelList(this.form).then(res => {
                this.tableData = res.data
                this.isLoading = false
            })
        },

        handleSizeChange(e) {
            this.form.pageSize = e
            this.steady()
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
            this.steady()
        },
        formFilter(row, column) {
            if (row.column.property == 'eventType') {
                let title = ''
                dicData('Monitoring_Labels', []).forEach(item => {
                    if (item.id == row.row.eventType) {
                        title = item.label
                    }
                })
                return title
            } else {
                return row.row[row.column.property]
            }
        }
    }
}
</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;
}
.prop {
    font-weight: 600;
}
</style>
