<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area" @send="takeover"></Area>
            </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="onSubmit">查询</el-button>
                <el-button size="small" type="primary" v-if="biaoCode === 'tjrbpush'" @click="push">上送网公司</el-button>
                <el-button size="small" type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>

            </el-form-item>

            <el-form-item style="float: right;margin-right: 10px">
                <el-button size="small" type="primary" @click="reportStatistics">
                    月报手动重新统计
                </el-button>
            </el-form-item>
        </el-form>
        <vxe-table stripe :data="tableData" size="mini" ref="Workstatistics"
            :row-config="{ isCurrent: true, isHover: true }" :height="vh" border style="width: 100%"
            header-cell-class-name="table_header" :header-cell-style="{
                height: '25px',
                padding: '0px'
            }" :row-style="{ height: '28px' }" :cell-style="{ padding: '0px' }" @checkbox-all="selectAllChangeEvent"
            @checkbox-change="handleSelectionChange">
            <vxe-table-column type="checkbox" align="center" width="55"></vxe-table-column>
            <template v-for="(item, index) in Workstatistics">
                <vxe-table-colgroup v-if="item.prop == 'isUploadHead'" :field="item.prop" :title="item.label"
                    :key="index" :min-width="item.width" show-overflow align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-tag type="primary" size="small" style="color: #409eff; background: #ecf5ff"
                            v-if="scope.row.isUploadHead == 0">
                            未上送
                        </el-tag>
                        <el-tag type="primary" size="small" style="color: #67c23a; background: #f0f9eb"
                            v-if="scope.row.isUploadHead == 1">
                            已上送
                        </el-tag>
                        <el-tag type="primary" size="small" style="color: #909399; background: #f4f4f5"
                            v-if="scope.row.isUploadHead == 2">
                            取消上送
                        </el-tag>
                    </template>
                </vxe-table-colgroup>
                <vxe-table-colgroup v-else-if="item.prop == 'cityName'" :field="item.prop" :title="item.label"
                    :key="index" :min-width="item.width" show-overflow align="center">
                    <template slot-scope="scope">
                        {{ scope.row.cityName == null ? '/' : scope.row.cityName }}
                    </template>
                </vxe-table-colgroup>
                <vxe-table-colgroup v-else-if="item.prop == 'countyName'" :field="item.prop" :title="item.label"
                    :key="index" :min-width="item.width" show-overflow align="center">
                    <template slot-scope="scope">
                        {{ scope.row.countyName == null ? '/' : scope.row.countyName }}
                    </template>
                </vxe-table-colgroup>
                <vxe-table-colgroup v-else :field="item.prop" :title="item.label" :key="index" :min-width="item.width"
                    show-overflow align="center">
                    <template v-for="(item, index) in item.children">
                        <vxe-table-column :field="item.prop" :title="item.label" :key="index" :min-width="item.width"
                            show-overflow align="center"></vxe-table-column>
                    </template>
                </vxe-table-colgroup>
            </template>
        </vxe-table>
        <el-pagination background align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formData.pageNum" :page-sizes="[20, 30, 50, 100]" :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt10"></el-pagination>
        <el-dialog :close-on-click-modal="false" title="统计时间" :visible.sync="problemTime" width="20%">
            <el-form label-width="90px">
                <el-form-item label="选择时间:" class="mt20">
                    <el-date-picker v-model="problemTimeValue" 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="problemTime = false">取 消</el-button>
                <el-button type="primary" @click="timeQuery">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
import { statisticReportPage, pushMonthReportStatistic, statisticReport } from '@/api/Supervisionmanage2/Workplan'
import { listRoleMenu, updateRoleMenu } from '@/api/admin/role'
export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            biaoCode: '',
            id: JSON.parse(window.sessionStorage.getItem('Info')).roleList[0],
            isLoading: false,
            problemTime: false,
            zoom: '', //图表焦点校验
            vh: undefined,
            problemTimeValue: '',
            timeData: '',
            formData: {
                searchValue: '',
                searchBeginTime: '',
                searchEndTime: '',
                pageNum: 1,
                pageSize: 20
            },
            pickerOptions: {
                disabledDate: time => {
                    return this.checkTime(time)
                }
            },

            total: 0,
            tableData: [],
            multipleSelection: [],
            Workstatistics: [
                { prop: 'provinceName', label: '所属网省', width: 150 },
                { prop: 'cityName', label: '所属地市', width: 150 },
                { prop: 'countyName', label: '所属县区', width: 150 },
                {
                    prop: 'converterStation',
                    label: '特高压换流站',
                    children: [
                        {
                            prop: 'convertYearSupvNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        { prop: 'convertMonthSupvNum', label: '本月监督数量', width: 120 },
                        { prop: 'convertTotalSupvNum', label: '累计监督数量', width: 120 },
                        { prop: 'convertMonthQuesNum', label: '本月问题数量', width: 120 },
                        { prop: 'convertTotalQuesNum', label: '累计问题数量', width: 120 },
                        {
                            prop: 'convertMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'convertTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'newEnergy',
                    label: '新能源场站(在运站)',
                    children: [
                        {
                            prop: 'energyYearSupvNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        { prop: 'energyMonthSupvNum', label: '本月监督数量', width: 120 },
                        { prop: 'energyTotalSupvNum', label: '累计监督数量', width: 120 },
                        { prop: 'energyMonthQuesNum', label: '本月问题数量', width: 120 },
                        { prop: 'energyTotalQuesNum', label: '累计问题数量', width: 120 },
                        {
                            prop: 'energyMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'energyTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'extension',
                    label: '新能源场站(改扩建)',
                    children: [
                        {
                            prop: 'energyYearSupvNewNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        {
                            prop: 'energyMonthSupvNewNum',
                            label: '本月监督数量',
                            width: 120
                        },
                        {
                            prop: 'energyTotalSupvNewNum',
                            label: '累计监督数量',
                            width: 120
                        },
                        {
                            prop: 'energyMonthQuesNewNum',
                            label: '本月问题数量',
                            width: 120
                        },
                        {
                            prop: 'energyTotalQuesNewNum',
                            label: '累计问题数量',
                            width: 120
                        },
                        {
                            prop: 'energyMonthReformNewNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'energyTotalReformNewNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'sensitive ',
                    label: '电能质量敏感用户',
                    children: [
                        {
                            prop: 'sensitiveYearSupvNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        {
                            prop: 'sensitiveMonthSupvNum',
                            label: '本月监督数量',
                            width: 120
                        },
                        {
                            prop: 'sensitiveTotalSupvNum',
                            label: '累计监督数量',
                            width: 120
                        },
                        {
                            prop: 'sensitiveMonthQuesNum',
                            label: '本月问题数量',
                            width: 120
                        },
                        {
                            prop: 'sensitiveTotalQuesNum',
                            label: '累计问题数量',
                            width: 120
                        },
                        {
                            prop: 'sensitiveMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'sensitiveTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'plan',
                    label: '供电电压计划',
                    children: [
                        {
                            prop: 'powerMonthPlanNum',
                            label: '本月前计划开展数量',
                            width: 150
                        },
                        {
                            prop: 'powerMonthConductedNum',
                            label: '本月前已开展数量',
                            width: 140
                        },
                        { prop: 'powerMonthQuesNum', label: '本月问题数量', width: 140 },
                        { prop: 'powerTotalQuesNum', label: '累计问题数量', width: 140 },
                        {
                            prop: 'powerMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'powerTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'capacitor ',
                    label: '电容器组监督',
                    children: [
                        {
                            prop: 'capacitorYearSupvNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        {
                            prop: 'capacitorMonthSupvNum',
                            label: '本月监督数量',
                            width: 120
                        },
                        {
                            prop: 'capacitorTotalSupvNum',
                            label: '累计监督数量',
                            width: 120
                        },
                        {
                            prop: 'capacitorMonthQuesNum',
                            label: '本月问题数量',
                            width: 120
                        },
                        {
                            prop: 'capacitorTotalQuesNum',
                            label: '累计问题数量',
                            width: 120
                        },
                        {
                            prop: 'capacitorMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'capacitorTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },
                {
                    prop: 'capacitor ',
                    label: '评估报告监督',
                    children: [
                        {
                            prop: 'appraisalReportYearSupvNum',
                            label: '本年计划监督数量',
                            width: 140
                        },
                        {
                            prop: 'appraisalReportMonthSupvNum',
                            label: '本月监督数量',
                            width: 120
                        },
                        {
                            prop: 'appraisalReportTotalSupvNum',
                            label: '累计监督数量',
                            width: 120
                        },
                        {
                            prop: 'appraisalReportMonthQuesNum',
                            label: '本月问题数量',
                            width: 120
                        },
                        {
                            prop: 'appraisalReportTotalQuesNum',
                            label: '累计问题数量',
                            width: 120
                        },
                        {
                            prop: 'appraisalReportMonthReformNum',
                            label: '本月整改问题数量',
                            width: 140
                        },
                        {
                            prop: 'appraisalReportTotalReformNum',
                            label: '累计整改问题数量',
                            width: 140
                        }
                    ]
                },

                { prop: 'planYearCountNum', label: '总本年监督数量', width: 130 },
                { prop: 'planCountNum', label: '总累计监督数量', width: 130 },
                { prop: 'problemCountNum', label: '总累计问题数量', width: 130 },
                { prop: 'reformCountNum', label: '总整改问题数量', width: 130 },
                { prop: 'alarmCountNum', label: '总预告警单数量', width: 130 },
                { prop: 'alarmBackCountNum', label: '总反馈单数量', width: 110 },
                { prop: 'isUploadHead', label: '上送标识', width: 100 },
            ]
        }
    },
    created() { },
    mounted() {
        this.listmenuRoleList()
        this.zoom = 1 / document.body.style.zoom

        // this.onSubmit();
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 95
        },
        checkTime(time) {
            let t = new Date().getDate()
            // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
            // 如果想之前的不能选择把 > 换成 <
            return time.getTime() > Date.now()
        },
        //获取权限
        listmenuRoleList() {
            let p = { id: this.id }
            listRoleMenu(p).then(response => {
                let ids = []
                //console.log("权限资源",response.data)
                response.data.forEach(item => {
                    if (item.code === 'tjrbpush') {
                        this.biaoCode = item.code
                    }
                })
            })
        },
        takeover(val) {
            this.formData.searchValue = val[0].id
            this.onSubmit()
        },
        handleSelectionChange(val) {
            // console.log(val);
            this.multipleSelection = val.records
        },
        selectAllChangeEvent(val) {
            // console.log(val);
            this.multipleSelection = val.records
        },
        //查询
        onSubmit() {
            this.isLoading = true
            this.$refs.Timeinterval.timeOptions = [
                // { label: "年份", value: 1 },
                // { label: "季度", value: 2 },
                { label: '月份', value: 3 }
                // { label: "周", value: 4 },
                // // { label: "自定义", value: 5 },
            ]
            this.item = this.$refs.Timeinterval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            statisticReportPage(this.formData).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        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);
        },
        //月报统计
        reportStatistics() {
            this.problemTime = true
            // let form = {
            //   timeId: this.formData.searchEndTime
            // }
            // statisticReport(form).then(res=>{
            //   if ((res.code = "A0000")) {
            //           this.$message({
            //             type: "success",
            //             message: res.message,
            //           });
            //         }
            // })
        },
        //确认
        timeQuery() {
            let form = {
                timeId: this.timeData
            }
            statisticReport(form).then(res => {
                if ((res.code == 'A0000')) {
                    this.$message({
                        type: 'success',
                        message: res.message
                    })
                }
                // this.problemTime = false;
            })
        },
        //导出
        exportEvent() {
            this.item = this.$refs.Timeinterval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            statisticReportPage(this.formData).then(res => {
                res.data.records.forEach(item => {
                    if (item.isUploadHead == 0) {
                        item.isUploadHead = '未上送'
                    } else if (item.isUploadHead == 1) {
                        item.isUploadHead = '已上送'
                    } else if (item.isUploadHead == 2) {
                        item.isUploadHead = '取消上送'
                    }
                })
                let month = parseInt(this.formData.searchBeginTime.substring(5, 7))
                // if(month <10)
                this.$refs.Workstatistics.exportData({
                    filename: month + '月统计月报', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        },
        //计划上送网公司
        push() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择一条数据上送网公司!!!',
                    type: 'warning'
                })
                return
            }
            let isUpload = []
            this.multipleSelection.forEach(item => {
                isUpload.push(item.isUploadHead)
            })
            // if(isUpload.includes(1) == true){
            //       this.$message({
            //               type: "warning",
            //               message: '已上送,无需重复上送',
            //               });
            //               return
            // }else{
            this.$confirm('是否确认上送网公司?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let monthReportId = []
                    this.multipleSelection.forEach(item => {
                        monthReportId.push(item.monthReportId)
                    })

                    pushMonthReportStatistic(monthReportId).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.onSubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上送'
                    })
                })
            // }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        handleNodeClick(data) {
            this.formData.searchValue = data.id
        }
    },

    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;
}

::v-deep .vxe-table .cell {
    text-align: center;
}
</style>
