<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline">

            <el-row>
                <el-col :span="24">
                    <el-form-item label="日期">
                        <div style="display: flex">
                            <el-select disabled v-model="statisticalType" style="width: 180px; margin-right: 5px"
                                @change="timeChange">
                                <el-option label="年" value="01"></el-option>
                                <el-option label="月" value="02"></el-option>
                                <el-option label="日" value="03"></el-option>
                            </el-select>
                            <el-date-picker style="width: 180px" v-model="searchBeginTime"
                                v-if="statisticalType == '01'" type="year" value-format="yyyy-MM-dd"
                                @change="yearChange" placeholder="选择年"></el-date-picker>
                            <el-date-picker style="width:180px" v-if="statisticalType == '02'" value-format="yyyy-MM-dd"
                                v-model="searchBeginTime" @change="monthChange" type="month"
                                placeholder="选择日期"></el-date-picker>
                            <el-date-picker style="width:180px" v-if="statisticalType == '03'" value-format="yyyy-MM-dd"
                                v-model="searchBeginTime" @change="dateChange" type="date"
                                placeholder="选择日期"></el-date-picker>
                        </div>
                    </el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="
                        pageNum = 1;
                    pageListInit()">
                        查询
                    </el-button>

                    <el-button type="primary" style="float: right" icon="el-icon-download"
                        @click="exportEvent">导出</el-button>
                    <el-button type="primary" style="float: right" class="ml10" icon="el-icon-s-promotion"
                        @click="uploadGw()">上送网公司</el-button>

                    <el-button type="primary" style="float: right" class="ml10"
                        @click="reCalReportFlag = true">重新计算</el-button>

                </el-col>


            </el-row>


        </el-form>

        <el-row>
            <el-col :span="24">
                <vxe-table :data="pageData" :height="height" border size="mini" ref="workOrderTable" style="width: 100%"
                    v-loading="isLoading" header-cell-class-name="table_header" @checkbox-all="selectAllChangeEvent"
                    @checkbox-change="handleSelectionChange">
                    <vxe-table-column key="checkboxs" type="checkbox" align="center" width="55"></vxe-table-column>

                    <template v-for="(item, index) in tableData">
                        <vxe-table-column align="center"  show-overflow :field="item.prop" :sortable="item.sortable"
                            :title="item.label" :key="index" :min-width="item.width" :formatter="tableDateFilter">
                        </vxe-table-column>
                    </template>

                    <vxe-table-column key="uploadStatus" field="uploadStatus" title="状态" fixed="right" align="center"
                        width="100">
                        <template slot-scope="scope">
                            <el-tag type="primary" size="small" style="color: #409eff; background: #ecf5ff"
                                v-if="scope.row.uploadStatus == 0">
                                未上送
                            </el-tag>
                            <el-tag type="primary" size="small" style="color: #67c23a; background: #f0f9eb"
                                v-if="scope.row.uploadStatus == 1">
                                已上送
                            </el-tag>
                            <el-tag type="primary" size="small" style="color: #909399; background: #f4f4f5"
                                v-if="scope.row.uploadStatus == 2">
                                取消上送
                            </el-tag>
                            <el-tag type="primary" size="small" style="color: orange; background: #f4f4f5"
                                v-if="scope.row.uploadStatus == 3">
                                待重新上送
                            </el-tag>

                        </template>
                    </vxe-table-column>


                </vxe-table>

            </el-col>
        </el-row>

        <el-dialog :close-on-click-modal="false" title="统计时间" :visible.sync="reCalReportFlag" width="20%">
            <el-form label-width="90px">
                <el-form-item label="选择时间:" class="mt20">
                    <el-date-picker v-model="reCalReportFlagValue" type="month" value-format="yyyy-MM"
                        :picker-options="pickerOptions" @change="changeFn" placeholder="选择月"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="reCalReport">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>


import { dicData } from '@/assets/commjs/dictypeData'
import { dayCalReport, getReportList, upReportGw } from '@/api/pmsUpload/processFollow'

export default {
    components: {},
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            form: {},
            dialogVisible: false,
            diaTitle: '',
            statisticalType: '02',
            searchBeginTime: '',
            timeData: '',
            searchEndTime: '',

            multipleSelection: [],


            tableData: [
                { prop: 'cityOrgName', label: '所属地市名称', width: 180 },
                { prop: 'statisticalLevel', label: '统计单位层级', width: 180 },
                { prop: 'statisticalDate', label: '统计日期', width: 180 },
                { prop: 'newUserNum', label: '并/入网申请当月新增用户（项目）数量（个）', width: 260 },
                { prop: 'newUserCount', label: '并/入网申请累计新增用户（项目）数量（个）', width: 260 },
                { prop: 'reportAuditNum', label: '规划可研当月预测评估审查数量（个）', width: 260 },
                { prop: 'reportAuditCount', label: '规划可研累计预测评估审查数量（个）', width: 260 },

                { prop: 'approvalAuditNum', label: '竣工验收当月竣工核查数量（个）', width: 260 },
                { prop: 'approvalAuditCount', label: '竣工验收累计竣工核查数量（个）', width: 260 },
                { prop: 'approvalProblemNum', label: '竣工验收当月发现问题数量（个）', width: 260 },
                { prop: 'approvalProblemCount', label: '竣工验收累计发现问题数量（个）', width: 260 },
                { prop: 'approvalRectificationProblemNum', label: '竣工验收当月整改验收问题数量（个）', width: 260 },
                { prop: 'approvalRectificationProblemCount', label: '竣工验收累计整改验收问题数量（个）', width: 260 },
                { prop: 'testRunUserCount', label: '试运行累计转试运行用户数量（户）', width: 260 },
                { prop: 'testRunOvUserNum', label: '试运行超标用户数量（户）', width: 180 },

                { prop: 'testRunOvUserRate', label: '试运行用户超标占比（%）', width: 180 },
                { prop: 'runUserCount', label: '累计转生产运行用户数量（户）', width: 180 },
                { prop: 'runOvUserNum', label: '生产运行超标用户数量（户）', width: 180 },
                {
                    prop: 'runOvUserRate',
                    label: '生产运行超标用户占比（%）',
                    width: 220,
                },
            ],
            pageData: [],

            reCalReportFlagValue: '',
            reCalReportFlag: false,
            pickerOptions: {
                disabledDate: time => {
                    return this.checkTime(time)
                }
            },
            objId: '',

            operateType: 0, //0.新增 1.修改
            rules: {},

            pageNum: 1,
            pageSize: 20,
            total: 0,

        }
    },
    created() {

        let day = new Date()
        this.statisticalType = '02'
        this.searchBeginTime = this.$tools.formatDate(day, 'yyyy-MM-dd').substring(0, 8) + '01'

    },
    mounted() {
        this.pageListInit()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 150
        },
        checkTime(time) {
            let t = new Date().getDate()
            // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
            // 如果想之前的不能选择把 > 换成 <
            return time.getTime() > Date.now()
        },

        changeFn(val) {
            // console.log(val);
            let year = parseInt(val.substring(0, 4))
            let month = parseInt(val.substring(5, 7))
            // console.log(year, month);
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                if (month < 10) {
                    this.timeData = year + '-' + '0' + month + '-31'
                } else {
                    this.timeData = year + '-' + month + '-31'
                }
            } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                if (month < 10) {
                    this.timeData = year + '-' + '0' + month + '-30'
                } else {
                    this.timeData = year + '-' + month + '-30'
                }
            } else if (month == 2) {
                if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    this.timeData = year + '-' + '0' + month + '-29'
                } else {
                    this.timeData = year + '-' + '0' + month + '-28'
                }
            }
            // console.log(this.timeData);
        },

        //获取主网运行指标统计数据
        pageListInit() {
            this.isLoading = true
            let param = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orgId: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                dataType: this.statisticalType,
                searchBeginTime: this.searchBeginTime,
            }
            getReportList(param).then(res => {
                this.pageData = res.data
                this.isLoading = false
            })
        },



        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.pageListInit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageNum = val
            this.pageListInit()
        },
        //重置
        Reset() {
            this.$refs.area.form.valueTitle = '全国'
            this.$refs.interval.intervald = 1
        },
        //导出
        exportEvent() {
            this.$refs.workOrderTable.exportData({
                filename: '全过程月报数据' + new Date().getTime(), // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.pageData,
                columnFilterMethod: function (column, $columnIndex) {
                    return !(column.$columnIndex === 0)
                }
            })
        },


        handleClose() {
            this.resetForm('ruleForm')
            this.dialogVisible = false
        },

        reCalReport() {
            if (this.timeData == '') {
                this.$message({
                    type: 'warning',
                    message: '请选择时间'
                })
                return
            }
            let param = { date: this.timeData }
            dayCalReport(param).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        type: 'success',
                        message: '重新计算成功'
                    })

                }

            })
        },

        //上报网公司按钮触发
        uploadGw() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择至少一条上送'
                })
                return
            }

            this.$confirm('是否确认上送数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let objIds = []
                this.multipleSelection.forEach(item => {
                    objIds.push(item.objId)
                })
                upReportGw(objIds).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                    }
                    this.pageListInit()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消上送'
                })
            })

        },


        handleSelectionChange(val) {
            this.multipleSelection = val.records
        },
        selectAllChangeEvent(val) {
            this.multipleSelection = val.records
        },

        tableDateFilter(row, column) {
            if (row.column.property == 'stationType') {
                if ('zf01' == row.row.stationType) {
                    return '变电站'
                }
            } else if (row.column.property == 'dataSource') {
                if ('01' == row.row.dataSource) {
                    return '监测数据'
                }
            } else {
                return row.row[row.column.property]
            }
        },


        timeChange() {
            let day = new Date()
            day.setDate(day.getDate() - 1)
            if (this.statisticalType == '01') {
                this.searchBeginTime = this.$tools.formatDate(day, 'yyyy-MM-dd').substring(0, 5) + '01-01'
                this.searchEndTime = this.searchBeginTime.substring(0, 5) + '12-31'
            } else if (this.statisticalType == '02') {
                this.searchBeginTime = this.$tools.formatDate(day, 'yyyy-MM-dd').substring(0, 8) + '01'
                this.searchEndTime =
                    this.$tools.formatDate(day, 'yyyy-MM-dd').substring(0, 8) +
                    this.getDaysInMonth(
                        this.searchBeginTime.substring(5, 7) - 0,
                        this.searchBeginTime.substring(0, 4) - 0
                    )
            } else {
                this.searchBeginTime = this.$tools.formatDate(day, 'yyyy-MM-dd')
                this.searchEndTime = this.searchBeginTime
            }
        },

        dateChange(e) {
            this.searchEndTime = this.searchBeginTime
        },
        monthChange(e) {
            this.searchEndTime = this.searchBeginTime.substring(0, 8) + this.getDaysInMonth(e.substring(5, 7), e.substring(0, 4))
        },
        yearChange(e) {
            this.searchEndTime = this.searchBeginTime.substring(0, 5) + '12-31'
        },
        getDaysInMonth(month, year) {
            return new Date(year, month, 0).getDate()
        },

    }
}
</script>
<style lang="less" scoped></style>
