<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 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 style="float: right" size="small" type="primary" icon="el-icon-del" @click="delTem">删除
                    </el-button>

                    <el-button style="float: right" size="small" type="primary" icon="el-icon-plus" @click="addTem">新增
                    </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-column key="operate" field="" show-overflow align="center" title="操作" min-width="200px"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="openUpdate(scope.row)">修改
                            </el-button>
                        </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>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-form ref="form" :rules="rules" :model="form" label-width="190px" style="padding: 0px 20px 0px 0px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="运维单位:" prop="maintOrg">
                            <Organization @click="handleNodeClick" ref="Organization" :valueTitle="form.maintOrgName"
                                :editCheckCode="form.maintOrg"></Organization>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="临时用户档案" prop="tempUserDossierId">
                            <el-select v-model="form.tempUserDossierId" filterable placeholder="请选择临时用户档案"
                                @change="tempUserDossierChange">
                                <el-option v-for="item in tempUserDossierList" :key="item.objId" :label="item.consName"
                                    :value="item.objId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="验收参与人" prop="approvalJoinUserId">
                            <el-select v-model="form.approvalJoinUserId" placeholder="请选择验收参与人" @change="userToForm">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="验收建议" prop="approvalAdvise">
                            <el-input v-model="form.approvalAdvise" placeholder="验收建议"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="遗留问题:" prop="legacyProblem">
                            <el-input v-model="form.legacyProblem" placeholder="请输入遗留问题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="整改状态" prop="rectificationStatus">
                            <el-select v-model="form.rectificationStatus" placeholder="请选择整改状态">
                                <el-option v-for="item in rectificationStatusList" :key="item.gvalue" :label="item.name"
                                    :value="item.gvalue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="12">
                        <el-form-item label="整改时间:" prop="rectificationTime">
                            <el-date-picker clearable v-model.trim="form.rectificationTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="整改时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="整改人:" prop="rectificationUserId">
                            <el-select v-model="form.rectificationUserId" placeholder="请选择整改人" @change="userToForm2">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="整改措施:" prop="rectificationMeasure">
                            <el-input v-model="form.rectificationMeasure" placeholder="整改措施"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>


import { dicData } from '@/assets/commjs/dictypeData'
import {
    approvalCreate, getAllUserList, selectList, getApprovalById,
    pageApprovalList,
    upApprovalGw, delApproval
} 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: {
                maintOrg: '',
                maintOrgName: '',
                rectificationTime: '',
                approvalJoinUserId: '',
                tempUserDossierId: '',
                legacyProblem: '',
                rectificationUserId: ''
            },
            dialogVisible: false,
            dialogTitle: '',
            statisticalType: '03',
            searchBeginTime: '',
            searchEndTime: '',

            userList: [],
            multipleSelection: [],
            rectificationStatusList: [{ gvalue: '1', name: '是' }, { gvalue: '0', name: '否' }],
            tempUserDossierList: [],

            tableData: [
                { prop: 'cityOrgName',sortable:true, label: '所属地市', width: 180 },
                { prop: 'maintOrgName', sortable:true, label: '运维单位', width: 180 },
                { prop: 'tempUserDossierName', label: '用户/项目名称', width: 180 },
                { prop: 'approvalJoinUserName', label: '验收参与人名称', width: 180 },
                { prop: 'approvalAdvise', label: '验收建议', width: 180 },
                { prop: 'legacyProblem', label: '遗留问题', width: 180 },
                { prop: 'rectificationStatus', label: '整改状态', width: 180 },
                { prop: 'rectificationTime', label: '整改时间', width: 180 },
                { prop: 'rectificationUserName', label: '整改人名称', width: 180 },
                { prop: 'rectificationMeasure', label: '整改措施', width: 180 },
                { prop: 'createTime', label: '创建时间', width: 180 }
            ],
            pageData: [],

            objId: '',

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

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

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

        }
    },
    created() {

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



    },
    mounted() {
        this.pageListInit()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        getAllUserList().then(res => {
            this.userList = res.data
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        openUpdate(row) {
            this.dialogTitle = '修改评估问题整改数据'
            this.dialogVisible = true

            getApprovalById({ id: row.objId }).then(res => {
                this.form = res.data
                let da = { maintOrg: res.data.maintOrg }
                selectList(da).then(res => {
                    this.tempUserDossierList = res.data
                })
            })

        },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.maintOrg = data.code
            this.form.maintOrgName = data.name
            this.form.tempUserDossierId = ''
            this.form.tempUserDossierName = ''

            let da = { maintOrg: data.code }
            selectList(da).then(res => {
                this.tempUserDossierList = res.data
            })
        },
        tempUserDossierChange(val) {
            if (val && val != null && val != '') {
                let obj = this.tempUserDossierList.find(item => item.objId === val)
                this.form.tempUserDossierName = obj.consName
            } else {
                this.form.tempUserDossierName = ''
            }
        },
        userToForm(val) {
            if (val && val != null && val != '') {
                let obj = this.userList.find(item => item.id === val)
                this.form.approvalJoinUserName = obj.name
            } else {
                this.form.approvalJoinUserName = ''
            }
        },

        userToForm2(val) {
            if (val && val != null && val != '') {
                let obj = this.userList.find(item => item.id === val)
                this.form.rectificationUserName = obj.name
            } else {
                this.form.rectificationUserName = ''
            }
        },

        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,
            }
            pageApprovalList(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
        },

        addTem() {
            this.dialogTitle = '新增评估问题整改数据'
            this.operateType = 0
            this.dialogVisible = true
        },

        delTem() {
            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)
                })
                delApproval(objIds).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                    }
                    this.pageListInit()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消上送'
                })
            })
        },

        //每页条数改变时触发 选择一页显示多少行
        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('form')
            this.dialogVisible = false
        },

        resetForm(formName) {
            this.$refs[formName].resetFields()
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    if (this.dialogTitle == '新增评估问题整改数据') {
                        approvalCreate(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.pageListInit()
                            }

                        })
                    } else {
                        approvalCreate(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                })
                                this.handleClose()
                                this.pageListInit()
                            }

                        })
                    }

                } else {
                    console.log('error submit!!')
                    return 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)
                })
                upApprovalGw(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 == 'rectificationStatus') {
                let tem = this.rectificationStatusList.find(item => item.gvalue === row.row.rectificationStatus)
                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>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}
</style>
