<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="80" 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 { getRailwayDetailInfo } from '@/api/SpecialAnalysisModuleDesign/ElectricRailwayLine/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: 120 },
                { prop: 'tractionStationName', label: '牵引站名称', width: 120 },
                { prop: 'railwayLineName', label: '电铁线路', width: 120 },
                { prop: 'railwayType', label: '铁路类型', width: 120 },
                { prop: 'voltageLevel', label: '电压等级(kV)', width: 120 },
                { prop: 'ratedCapacity', label: '牵引容量(MVA)', width: 120 },
                { prop: 'activePowerTimes', label: '有效功率(MV)', width: 120 },

                {
                    label: '超标天数',
                    children: [
                        {
                            prop: 'vtimes',
                            label: '谐波电压',
                            width: 120
                        },
                        {
                            prop: 'itimes',
                            label: '谐波电流',
                            width: 120
                        },
                        {
                            prop: 'unbalanceTimes',
                            label: '电压不平等',
                            width: 120
                        },
                        {
                            prop: 'inegTimes',
                            label: '负序电流',
                            width: 120
                        }
                    ]
                }
            ],
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        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 == "Onshore_Wind") {
            //     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

            getRailwayDetailInfo(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 == 'voltageLevel') {
                let title = ''
                dicData('Dev_Voltage', []).forEach(item => {
                    if (item.id == row.row.voltageLevel) {
                        title = item.name
                    }
                })
                return title
            } else if (row.column.property == 'railwayType') {
                return row.row.railwayType == 1 ? '高铁' : '普铁'
            } else if (row.column.property == 'vtimes') {
                return row.row.vtimes == 1 ? '是' : '否'
            } else if (row.column.property == 'itimes') {
                return row.row.itimes == 1 ? '是' : '否'
            } else if (row.column.property == 'unbalanceTimes') {
                return row.row.unbalanceTimes == 1 ? '是' : '否'
            } else if (row.column.property == 'inegTimes') {
                return row.row.inegTimes == 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: 800px;
    }
}
::v-deep .el-table .cell {
    text-align: center;
}
</style>
