<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>
            <el-form-item label="筛选数据:">
                <el-input v-model="formInline.searchValue" clearable size="small" placeholder="请输入台账名称" />
            </el-form-item>
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="20">
            <el-col :span="24">
                <vxe-table
                    class="xiaoshou"
                    stripe
                    :data="tableData"
                    id="rebateSetTable"
                    ref="rebateSetTable"
                    :row-config="{ isCurrent: true, isHover: true }"
                    border
                    :height="`${vth}`"
                    :style="'height:' + vh"
                    header-cell-class-name="table_header"
                >
                    <vxe-table-column align="center" field="number" title="序号" width="80">
                        <template v-slot="row">
                            <span>{{ (formInline.pageNum - 1) * formInline.pageSize + row.seq }}</span>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="subName"
                        title="变电站"
                        :show-overflow="true"
                        min-width="120"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="lineName"
                        title="监测点名称"
                        :show-overflow="true"
                        min-width="120"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="businessType"
                        title="行业类型"
                        :show-overflow="true"
                        :formatter="formFilter"
                        min-width="120"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="calssificationGrade"
                        title="分类等级"
                        :show-overflow="true"
                        min-width="120"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.calssificationGrade == null ? '/' : scope.row.calssificationGrade }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="voltageScale"
                        title="电压等级"
                        min-width="120"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="superiorsSubstation"
                        title="上级变电站"
                        :show-overflow="true"
                        min-width="120"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.superiorsSubstation == null ? '/' : scope.row.superiorsSubstation }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="hangLine"
                        title="挂接线路"
                        :show-overflow="true"
                        min-width="120"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.hangLine == null ? '/' : scope.row.hangLine }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column align="center" field="pt" title="PT变比" min-width="120">
                        <template slot-scope="scope">
                            {{ scope.row.pt1 + '/' + scope.row.pt2 }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column align="center" field="ct" title="CT变比" min-width="120">
                        <template slot-scope="scope">
                            {{ scope.row.ct1 + '/' + scope.row.ct2 }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="shortCapacity"
                        title="短路容量(MVA)"
                        min-width="150"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="deviceCapacity"
                        title="设备容量(MVA)"
                        min-width="150"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="dealCapacity"
                        title="协议容量(MVA)"
                        min-width="150"
                    ></vxe-table-column>
                    <vxe-table-column align="center" field="integrityValue" title="数据完整率(%)" min-width="150">
                        <template slot-scope="scope">
                            {{ (scope.row.integrityValue * 100).toFixed(2) }}
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="harmDes"
                        title="谐波情况"
                        :show-overflow="true"
                        min-width="150"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="powerDes"
                        title="电能质量情况"
                        :show-overflow="true"
                        min-width="150"
                    ></vxe-table-column>
                </vxe-table>
                <el-pagination
                    class="mt10"
                    align="right"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formInline.pageNum"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="formInline.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/TimePicker/index4'
import { pageTable } from '@/api/templateConfiguration'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area'
export default {
    components: { Timeinterval, Area },
    data() {
        return {
            vh: null,
            vth: null,
            formInline: {
                deptId: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                searchValue: '',
                beginTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 20
            },
            total: 0,
            isLoading: false,
            tableData: [],
            businessType: []
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.query()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 100 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') - 100
        },
        //区域选择
        handleNodeClick(data) {
            this.formInline.deptId = data.id
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formInline.pageSize = val
            this.query1()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.query1()
        },
        // 获取类型
        getclassificationData() {
            //地区特征
            this.businessType = dicData('Interference_Source', [])
            // console.log(this.businessType);
        },
        //过滤
        formFilter(row, column) {
            // if (row.column.property == "businessType") {
            let title = ''
            this.businessType.forEach(item => {
                if (item.value == row.row.businessType) {
                    title = item.label
                } else {
                    title = '/'
                }
            })
            return title
            // } else {
            //   return row.row[row.column.property];
            // }
        },
        query() {
            this.isLoading = true
            if (this.formInline.searchValue !== '') {
                this.formInline.pageNum = 1
            }
            this.formInline.beginTime = this.$refs.Timeinterval.timeValue[0]
            this.formInline.endTime = this.$refs.Timeinterval.timeValue[1]
            pageTable(this.formInline).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        //分页查询用
        query1() {
            this.isLoading = true
            this.formInline.beginTime = this.$refs.Timeinterval.timeValue[0]
            this.formInline.endTime = this.$refs.Timeinterval.timeValue[1]
            pageTable(this.formInline).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        //导出
        exportEvent() {
            this.formInline.beginTime = this.$refs.Timeinterval.timeValue[0]
            this.formInline.endTime = this.$refs.Timeinterval.timeValue[1]
            let data = JSON.parse(JSON.stringify(this.formInline))
            data.pageNum = 1
            data.pageSize = 10000
            this.Num = 0
            //未建档非线性用户录入及查询
            pageTable(data).then(res => {
                res.data.records.forEach(item => {
                    this.Num += 1
                    item.number = this.Num
                    item.pt = item.pt1 + '/' + item.pt2
                    item.ct = item.ct1 + '/' + item.ct2
                    item.integrityValue = (item.integrityValue * 100).toFixed(2)
                    item.powerDes = item.powerDes.replace(/;/g, '\n')
                    this.businessType.forEach(item1 => {
                        if (item1.value == item.businessType) {
                            item.businessType = item1.label
                        } else {
                            item.businessType = '/'
                        }
                    })
                    if (item.businessType == null) {
                        item.businessType = '/'
                    } else if (item.calssificationGrade == null) {
                        item.calssificationGrade = '/'
                    } else if (item.superiorsSubstation == null) {
                        item.superiorsSubstation = '/'
                    } else if (item.hangLine == null) {
                        item.hangLine = '/'
                    }
                })
                this.$refs.rebateSetTable.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'csv', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                    // columnFilterMethod: function (column, $columnIndex) {
                    //   return !(column.$columnIndex === 0);
                    // },
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
.xiaoshou {
    cursor: pointer !important;
}
</style>
