<template>
    <div class="custom-table">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80"/>
            <el-table-column prop="create_time" show-overflow-tooltip label="创建时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.create_time, true) }}</template>
            </el-table-column>
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="被检查单位">
                <template slot-scope="scope">{{scope.row.enforce_obj_name}}</template>
            </el-table-column>
            <el-table-column prop="enforce_obj_address" show-overflow-tooltip label="单位地址">
                <template slot-scope="scope">{{scope.row.enforce_obj && scope.row.enforce_obj.enforce_obj_address}}</template>
            </el-table-column>
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="执法机构" align="center">
                <template slot-scope="scope">{{scope.row.enforce_org_name}}</template>
            </el-table-column>
            <el-table-column prop="executor_names" show-overflow-tooltip label="检查人员" align="center"/>
            <el-table-column prop="job_desc" show-overflow-tooltip label="举报概要内容" align="center"/>
            <el-table-column prop="name" label="任务状态" align="center">
                <template slot-scope="scope">{{ parseJobStatus(scope.row.job_status) }}</template>
            </el-table-column>
            <el-table-column prop="last_enforce_date" show-overflow-tooltip label="检查期限" align="center">
                <template slot-scope="scope">{{ formatDateMonth(scope.row.last_enforce_date) }}</template>
            </el-table-column>
            <el-table-column prop="name" label="检查结果" show-overflow-tooltip align="center">
                <template slot-scope="scope">{{ parseStatus(scope.row.enforce_result) }}</template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="scope.row.job_status==='AUDIT'" @click="approveDetail(scope.row.id)">审核</el-button>
<!--                    <el-button type="text" size="small" v-if="scope.row.allot_status === '0'"-->
<!--                               @click="distributionDetail(scope.row)">分配-->
<!--                    </el-button>-->
                    <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
                <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next, sizes"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog title="审核"
                   :visible.sync="showApproveStatus"
                   width="28%"
                   moda="false"
                   destroy-on-close
                   class="custom-dialog">
            <approve-status ref="approveStatus"></approve-status>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showApproveStatus = false">取 消</el-button>
                <el-button type="primary" @click="confirmApproveStatus">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getJobs,reportApprovelJob} from '@/api/job'
    import {jobMixin} from '@/mixin/job'
    import {resourceMixin} from '@/mixin/resource'
    import {formatDate,formatDateMonth} from '@/utils/tool'
    import {auth} from '@/utils/auth'

    // import AssignUser from '@/component/AssignUser'
    import ApproveStatus from '@/component/ApproveStatus'

    export default {
        components: {
            // AssignUser,
            ApproveStatus
        },
        computed: {
            pageTotal() {
                const page = Math.ceil(this.total / this.query.size)
                return page > 0 ? page : 1
            }
        },
        mixins: [jobMixin, resourceMixin],
        data() {
            return {
                loading: false,
                formData: {
                    job_status: '',
                    org: '',
                    account: '',
                    last_enforce_date: '',
                    company: '',
                    limit: '',
                    createDate: '',
                    result: '',
                    allot_status: '',
                    executor_ids:'',
                    executor_names:'',
                    id: undefined
                },
                query: {
                    page: 1,
                    size: 10,
                    sort: "create_time desc"
                },
                total: 0,
                tableData: [],
                showAssignUser: false,
                showApproveStatus: false,
                jobId: '',
                orgId: ''
            }
        },
        mounted() {
            this.handleQuery()
        },
        methods: {
            formatDate,
            formatDateMonth,
            resetForm(data) {
                this.query.query = data;
                this.query.page = 1;
                this.handleQuery()
            },
            handleSizeChange(val) {
                this.query.size = val
                this.handleQuery()
            },
            handleCurrentChange(val) {
                this.query.page = val
                this.handleQuery()
            },
            handleQuery() {
                this.loading = true
                if(!this.query.query){
                    this.query.query = "job_type=='REPORT';job_status=in=('TODO','DOING','ARCHIVED')"
                }else {
                    this.query.query = this.query.query + ";job_type=='REPORT'"
                }
                getJobs(this.query).then(res => {
                    if (res) {
                        this.total = res.total || 0
                        const list = res.data || []
                        list.map(item => {
                            item.start_time = formatDate(item.start_time, true)
                        })
                        this.tableData = list
                    }
                    this.loading = false
                })
            },
            handleDetail(id) {
                this.$router.push({
                    path: '/monitor/report/detail',
                    query: {
                        id
                    }
                })
            },
            approveDetail(id) {
                this.formData.id = id;
                this.showApproveStatus = true;
            },
            distributionDetail(row) {
                this.formData.id = row.id;
                this.orgId = row.enforce_org_id;
                this.formData.executor_ids = row.executor_ids;
                this.showAssignUser = true;
            },
            confirmAssignUser() {
                this.$refs.assignUser.$refs['form'].validate((valid) => {
                    if (valid) {
                        // 分配人员数据
                        var data = {
                            //任务ID，检查人员，检查时间
                            id: this.jobId,
                            userAccount: this.$refs.assignUser.formData.userAccount,
                            checkDate: this.$refs.assignUser.formData.checkDate
                        }
                        console.log("分配人员数据:", JSON.stringify(data))
                        this.showAssignUser = false
                    } else {
                        return false;
                    }
                });
            },
            confirmApproveStatus() {
                this.$refs.approveStatus.$refs['form'].validate((valid) => {
                    if (valid) {
                        // 审批状态数据
                        var data;
                        if(this.$refs.approveStatus.formData.enforce_result==='REJECT'){
                            data = {
                                status: this.$refs.approveStatus.formData.enforce_result,
                                reason: this.$refs.approveStatus.formData.info,
                            }
                        }else {
                            data = {
                                //任务ID，状态，检查人员，检查时间,审批人id,审批人姓名
                                // id:this.formData.id,
                                status: this.$refs.approveStatus.formData.enforce_result,
                                reason: this.$refs.approveStatus.formData.info,
                                enforce_obj_id:this.$refs.approveStatus.formData.company,
                                enforce_org:this.$refs.approveStatus.formData.enforce_org,
                                executors:this.$refs.approveStatus.formData.executors,
                                last_enforce_date:this.$refs.approveStatus.formData.last_enforce_date+"-01",
                            }
                        }
                        reportApprovelJob(this.formData.id, data).then(res => {
                            this.$message.success('审核完成');
                            this.showApproveStatus = false
                            this.resetForm()
                        }).catch(error => {
                            this.$message.warning('当前用户无权限');
                        })
                        console.log("审批状态数据:", JSON.stringify(data))

                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>