<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
                                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-form-item label="运维单位:">
                        <Organization @click="queryNodeClick" ref="area" :valueTitle="editCheckName"
                            :editCheckCode="editCheckCode"></Organization>
                    </el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="
                        pageNum = 1;
                    pageListInit()">
                        查询
                    </el-button>

                    <el-button style="float: right" type="primary" icon="el-icon-download"
                        @click="exportEvent">导出</el-button>
                    <el-button style="float: right" type="primary" class="ml10" icon="el-icon-s-promotion"
                        @click="uploadGw()">上送网公司</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" :title="item.label" :sortable="item.sortable"
                            :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-pagination background align="right" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    class="mt10"></el-pagination>
            </el-col>
        </el-row>


    </div>
</template>

<script>


import { dicData } from '@/assets/commjs/dictypeData'
import { pageTrackList, upGw } from '@/api/pmsUpload/processFollow'
import Organization from '@/views/Process-supervision/Supervisionmanage2/Area/Organization.vue'

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

            multipleSelection: [],
            auditStatusList: [],
            auditResultList: [],
            proStageList: [],
            approvalStatusList: [],
            approvalResultList: [],

            tableData: [
                { prop: 'cityOrgName',sortable:true, label: '所属地市', width: 180 },
                { prop: 'maintOrgName', sortable:true, label: '运维单位', width: 180 },
                { prop: 'tempUserDossierName', label: '用户/项目名称', width: 350 },
                { prop: 'proStage',sortable:true, label: '项目阶段', width: 180 },
                { prop: 'auditStatus',sortable:true, label: '规划可研-评估状态', width: 180 },
                { prop: 'auditResult',sortable:true, label: '规划可研-评估结论', width: 180 },
                { prop: 'auditUserName', label: '规划可研-审查人名称', width: 180 },
                { prop: 'auditTime',sortable:true, label: '规划可研-审查时间', width: 180 },
                { prop: 'approvalStatus',sortable:true, label: '竣工验收-验收状态', width: 180 },

                { prop: 'approvalResult',sortable:true, label: '竣工验收-验收结论', width: 180 },
                { prop: 'approvalDutyUserName', label: '竣工验收-验收负责人名称', width: 180 },
                { prop: 'approvalTime',sortable:true, label: '竣工验收-验收时间', width: 180 },
                { prop: 'consNo', label: '营销用户编号', width: 180 },
                { prop: 'testIsOv',sortable:true, label: '试运行-是否超标', width: 180 },
                { prop: 'allOvCountDay', label: '总超标天数', width: 180 },
                { prop: 'monitorDay', label: '监测天数', width: 180 },
                { prop: 'startMonitorDate', label: '开始监测日期', width: 180 },

                { prop: 'monitorIds', label: '关联监测点', width: 180 },
                { prop: 'operateDate', label: '投运日期', width: 180 },
                { prop: 'testRunDay', label: '运行天数', width: 180 },
                {
                    prop: 'auditFinalTime',
                    label: '审查完成时间',
                    width: 180,
                    sortable:true
                },
                { prop: 'auditIssueOrgName',sortable:true, label: '审查出具单位名称', width: 180 },
                { prop: 'professionalAuditOpinion', label: '电能质量专业审查意见', width: 180 },

                { prop: 'auditOrgName',sortable:true, label: '审查单位名称', width: 180 },
                { prop: 'approvalFinalTime',sortable:true, label: '验收完成时间', width: 180 },
                { prop: 'legacyProblem', label: '遗留问题', width: 180 },
                { prop: 'approvalAdvise', label: '验收建议', width: 180 },
                { prop: 'approvalJoinUserName', label: '验收参与人名称', width: 180 },
                { prop: 'relConsTime', label: '关联营销档案时间', width: 180 },

                { prop: 'testResult', label: '测试结论', width: 180 },
                { prop: 'testRunIssueOrgName', label: '试运行出具单位名称', width: 180 },
                { prop: 'monitorDate',sortable:true, label: '监测日期', width: 180 },


            ],
            pageData: [],

            objId: '',

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

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

            editCheckCode: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            editCheckName: '',

        }
    },
    created() {

        let day = new Date()
        day.setDate(day.getDate() - 1)
        this.statisticalType = '03'
        this.searchBeginTime = this.$tools.formatDate(day, 'yyyy-MM-dd')


        this.proStageList = dicData('project_phase', [])
        this.auditStatusList = dicData('pms_eval_status', [])
        this.auditResultList = dicData('pms_eval_review', [])

        this.approvalStatusList = dicData('pms_acceptance_phase', [])
        this.approvalResultList = dicData('pms_conclusion', [])

    },
    mounted() {
        this.pageListInit()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 170
        },
        //获取主网运行指标统计数据
        pageListInit() {
            this.isLoading = true
            let param = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                maintOrg: this.editCheckCode,
                dataType: this.statisticalType,
                searchBeginTime: this.searchBeginTime,
            }
            pageTrackList(param).then(res => {
                this.total = res.data.total
                this.pageData = res.data.records
                this.isLoading = false
            })
        },

        queryNodeClick(data) {
            this.editCheckCode = data.id
            this.editCheckName = data.name
        },

        //每页条数改变时触发 选择一页显示多少行
        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
        },


        //上报网公司按钮触发
        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)
                })
                upGw(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 == 'auditStatus') {
                let tem = this.auditStatusList.find(item => item.gvalue === row.row.auditStatus)
                if (tem) {
                    return tem.name
                }
            } else if (row.column.property == 'auditResult') {
                let tem = this.auditResultList.find(item => item.gvalue === row.row.auditResult)
                if (tem) {
                    return tem.name
                }
            } else if (row.column.property == 'proStage') {
                let tem = this.proStageList.find(item => item.gvalue === row.row.proStage)
                if (tem) {
                    return tem.name
                }
            } else if (row.column.property == 'approvalStatus') {
                let tem = this.approvalStatusList.find(item => item.gvalue === row.row.approvalStatus)
                if (tem) {
                    return tem.name
                }
            } else if (row.column.property == 'approvalResult') {
                let tem = this.approvalResultList.find(item => item.gvalue === row.row.approvalResult)
                if (tem) {
                    return tem.name
                }
            } 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>
