<template>
    <div>
        <div class="Top" ref="top">
            <div>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <div style="display: flex">
                        <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" class="ml10" @click="onSubmit" icon="el-icon-search">
                                查询
                            </el-button>
                            <el-button type="primary" @click="exportEvent" class="ml10" icon="el-icon-download">
                                导出
                            </el-button>
                        </el-form-item>
                    </div>
                </el-form>
                <vxe-table
                    :data="totalData"
                    :height="height"
                    size="mini"
                    stripe
                    border
                    :row-config="{ isHover: true, isCurrent: true }"
                    ref="classification"
                    v-loading="isLoading"
                    style="width: 100%"
                    header-cell-class-name="table_header"
                >
                    <vxe-table-column
                        align="center"
                        field="orgNo"
                        show-overflow
                        min-width="120px"
                        title="所属单位"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="monitoringObject"
                        title="监测对象"
                        min-width="120px"
                        :formatter="formatter"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="lowPowerFactor89"
                        title="0.8-0.9"
                        min-width="120px"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="lowPowerFactor78"
                        title="0.7-0.8"
                        min-width="120px"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="lowPowerFactor7"
                        title="0.7以下"
                        min-width="120px"
                    ></vxe-table-column>
                    <vxe-table-column
                        align="center"
                        field="lowPowerFactorRatio"
                        title="低功率因数占比(%)"
                        min-width="160px"
                    ></vxe-table-column>
                </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>
        </div>
    </div>
</template>

<script>
import { dicData } from '@/assets/commjs/dictypeData'
import { getPowerQualityStream } from '@/api/SpecialAnalysisModuleDesign/DistributedPhotovoltaic/index.js'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            vh1: '',
            totalData: [],
            form: {
                endTime: '',
                id: '',
                pageNum: 1,
                pageSize: 20,
                startTime: '',
                type: 0
            },
            total: 0,
            height: null,
            isLoading: false,
            timeOptions :[
            { label: '年份', value: 1 },
            { label: '季度', value: 2 },
            { label: '月份', value: 3 }
        ]
        }
    },
    created() {},
    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.height = window.sessionStorage.getItem('appheight') - 167 + 'px'
        },
        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
            getPowerQualityStream(this.form).then(res => {
                this.totalData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },

        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是复选框 不导出 // }
            })
        },
        // 数据过滤
        formatter(row, column) {
            let title = ''
            dicData('Monitor_Obj', []).forEach(item => {
                if (item.id == row.row.monitoringObject) {
                    title = item.name
                }
            })
            return title
        }
    }
}
</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;
}
.prop {
    font-weight: 600;
}
::v-deep .vxe-table__body-wrapper.is-scrolling-none {
    height: 227px !important;
}
</style>
