<template>
    <div>
        <el-form ref="form" inline :model="form">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval :interval="7" ref="Timeinterval" :timeOptions="timeOptions"></Timeinterval>
            </el-form-item>
            <el-form-item label="是否上送网公司测点:">
                <el-select v-model.trim="form.isUpToGrid" clearable collapse-tags placeholder="是否上送网公司测点">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="完整性筛选:">
                <el-select v-model.trim="form.limitValue" clearable collapse-tags placeholder="完整性筛选">
                    <el-option v-for="item in limitValueList" :key="item.value" :label="item.name"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="queryInit">查询</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>

        <div class="boxS">
            <div class="boxTableS">
                <vxe-table stripe :data="tableData" v-loading="loading" ref="monitorInte" border size="mini"
                    :row-config="{ isCurrent: true, isHover: true }" :height="vh - 90"
                    header-cell-class-name="table_header">
                    <vxe-table-column type="index" width="70" align="center" title="序号">
                        <template v-slot="row">
                            <span>{{ (form.pageNum - 1) * form.pageSize + row.seq }}</span>
                        </template>
                    </vxe-table-column>

                    <vxe-table-column field="monitorName" show-overflow-tooltip align="center" title="投运监测点名称"
                        min-width="150px"></vxe-table-column>
                    <vxe-table-column field="deptName" show-overflow-tooltip align="center" title="所属单位"
                        min-width="200px"></vxe-table-column>

                    <vxe-table-column field="stationName" show-overflow-tooltip align="center" title="所属电站"
                        min-width="100px"></vxe-table-column>

                    <vxe-table-column field="integrityRate" show-overflow-tooltip align="center" title="数据完整性(%)"
                        min-width="100px">
                        <template slot-scope="scope">
                            <span>
                                {{ scope.row.integrityRate == null ? 0 : (scope.row.integrityRate * 100).toFixed(2) }}
                            </span>
                        </template>
                    </vxe-table-column>
                    <!--          <vxe-table-column
                        field="createBy"
                        show-overflow-tooltip
                        align="center"
                        title="操作人员"
                        min-width="100px"
                    ></vxe-table-column>-->
                </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>
            </div>
        </div>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'

import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { getMonitorIntegrityData } from '@/api/Management-operation/mainnetwork/mainnetwork'

export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            form: {
                deptId: '',
                isUpToGrid: 1,
                limitValue: null,
                beginDate: '',
                endDate: '',
                pageNum: 1,
                pageSize: 20
            },
            total: 0,
            typeList: [
                {
                    id: 0,
                    name: '否'
                },
                {
                    id: 1,
                    name: '是'
                }
            ],
            limitValueList: [
                {
                    value: 0.99,
                    name: '完整性小于99%'
                },
                {
                    value: 0.98,
                    name: '完整性小于98%'
                },
                {
                    value: 0.97,
                    name: '完整性小于97%'
                },
                {
                    value: 0.96,
                    name: '完整性小于96%'
                },
                {
                    value: 0.95,
                    name: '完整性小于95%'
                },
                {
                    value: 0.9,
                    name: '完整性小于90%'
                }
            ],
            loading: false,
            vh: 0,
            zoom: '', //图表焦点校验

            tableData: [],
            timeOptions: [
                { label: '月份', value: 3 },
                { label: '周', value: 4 },
                { label: '日', value: 7 }
            ]
        }
    },
    created() {
        this.form.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
        this.zoom = 1 / document.body.style.zoom

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.$refs.Timeinterval.preClick()
        this.init()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        //导出
        exportEvent() {
            getMonitorIntegrityData({
                ...this.form,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                this.$refs.monitorInte.exportData({
                    filename: '监测点数据完整性', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        },
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 150
        },
        queryInit() {
            this.loading = true
            this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            getMonitorIntegrityData(this.form).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.loading = false

            })
        },

        init() {
            this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            getMonitorIntegrityData(this.form).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },

        formatTime(time) {
            return (
                time.getFullYear() +
                '-' +
                (time.getMonth() + 1 < 10 ? '0' : '') +
                (time.getMonth() + 1) +
                '-' +
                (time.getDate() < 10 ? '0' : '') +
                time.getDate()
            )
        },

        handleSizeChange(e) {
            this.form.pageSize = e
            this.onSubmit()
        },
        handleCurrentChange(e) {
            this.form.pageNum = e
            this.onSubmit()
        },
        handleNodeClick(data) {
            // console.log(data);
            this.form.deptId = data.id
        }
    },

    computed: {},

    watch: {}
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
</style>

<style lang="scss" scoped>
.boxS {
    width: 100%;
    // display: flex !important,

    // justify-content: space-between,
}
</style>
