<template>
    <div class="page">
        <headNav title="审批详情"></headNav>

        <div class="content" v-if="info">
            <van-cell-group>
                <van-cell title="被检查单位" center :value="info.enforce_obj_name" />
                <van-cell title="单位地址" center>
                    <span>{{info.enforce_obj.enforce_obj_address}}</span>
                    <van-icon class="loc" name="location-o" color="#02A7F0" />
                </van-cell>
                <van-cell title="执法机构" :value="info.enforce_org_name" />
                <van-cell title="检查成员" :value="info.executor_names" />
                <van-cell title="检查时间" :value="info.start_time" />
                <van-cell title="任务类型" :value="parseType(info.job_type)" />
                <van-cell title="任务编号" :value="info.job_no" />
                <template v-if="haveApprove">
                    <van-cell title="审批状态" :value="parseStatus()" />
                    <van-cell title="审批人" :value="info.notification_audit_user_name || info.approve_user_name" />
                    <van-cell title="审批时间" :value="parseTime()" />
                </template>
                <div class="problems">
                    <div>限改问题：</div>
                    <template v-if="info.approveDetails">
                        <div v-for="(problem, proInd) in info.approveDetails" :key="proInd">
                            <div>{{`${proInd+1}.${problem.problem}`}}</div>
                            <div class="FontColorNormal">{{problem.check_desc && problem.check_desc.join('，')}}</div>
                        </div>
                    </template>
                    <div v-if="noticeResult" v-html="noticeResult"></div>
                </div>
            </van-cell-group>
            <van-cell-group v-if="!haveApprove">
                <van-cell>
                    <template #title>
                        <span>审批意见</span>
                        <span class="required">*</span>
                    </template>
                    <template #default>
                        <van-radio-group v-model="job_status" direction="horizontal">
                            <van-radio name="PASS">通过</van-radio>
                            <van-radio name="REJECT">驳回</van-radio>
                        </van-radio-group>
                    </template>
                </van-cell>
                <div class="remark">
                    <div>备注说明：</div>
                    <div>
                        <van-field
                            v-model="remark"
                            rows="2"
                            autosize
                            type="textarea"
                            maxlength="200"
                            placeholder="请输入"
                            show-word-limit
                        />
                    </div>
                </div>
            </van-cell-group>
            <div style="margin: 16px;" v-if="!haveApprove">
                <van-button round block type="info" @click="submitApprove">提交</van-button>
            </div>
        </div>

        <v-mask :showOverLay="showOverLay" tipMsg="加载中..."></v-mask>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import mask_overLay from '@/components/overLay_xy.vue';
import { notEmpty, dateFormat } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
    },
    computed: {
        jobId() {
            return this.$route.params.ID
        },
        isNotification() {
            // if (this.info) {
            //     return this.info.job_type == 'NORMAL' || 
            //             this.info.job_type == 'SPECIAL' || 
            //             this.info.job_type == 'REPORT'
            // }
            return true;
        },
        haveApprove() {
            if (this.info) {
                const status = this.info.notification_audit_status;
                return status != 'AUDIT' && status != 'NOT';
            }
            return false
        },
        noticeResult() {
            if (this.info && notEmpty(this.info.static_notice_result)) {
                const res = JSON.parse(this.info.static_notice_result);
                if (res && res.deadline && res.deadline.mark) {
                    const mark = res.deadline.mark;
                    return mark.replace(/\n/g, '<br>');
                }
            }
            return null;
        },
    },
    data () {
        return {
            showOverLay: false,
            job_status: null,
            remark: '',
            info: null,
        }
    },
    mounted () {
        if (this.jobId) {
            this.loadDetailDatas();
        }
    },
    methods: {
        loadDetailDatas() {
            this.showOverLay = true;
            this.$http.get(`/v2/api/enforce-job/${this.jobId}/approve-detail`).then(res => {
                if (res.data) {
                    const item = res.data;
                    const time = item.start_time || item.update_time;
                    if (time) {
                        item.start_time = dateFormat('YYYY-mm-dd', new Date(time));
                    }
                    this.info = item;
                }
                this.showOverLay = false;
            })
        },
        submitApprove() {
            if (!notEmpty(this.job_status)) {
                this.$toast.fail('请选择审批意见');
                return
            }
            if (this.job_status == 'REJECT' && !notEmpty(this.remark)) {
                this.$toast.fail('请输入驳回原因');
                return
            }

            this.showOverLay = true;

            let url = handleProblemImgs(this.info.deadline_file_id);
            const name = this.info.enforce_org_name || '';
            const date = dateFormat('YYYY年mm月dd日', new Date(this.info.start_time));
            const reason = this.remark || '';

            let content = '';
            if (this.isNotification) {
                content = `根据《中华人民共和国消防法》第五十三条的规定，我${name}于${date}对你单位（场所）进行消防监督检查，即刻查看检查结果：${url}`;
                const params = {
                    status: this.job_status,
                    reason,
                    message: content
                };
                this.$http.put(`/v2/api/enforce-job/${this.info.id}/deadline-approve`, params).then(res => {
                    this.$toast.success('处理成功');
                    this.$router.back();
                }).catch(err => {
                    this.showOverLay = false;
                });
            }
            else {
                const params = {
                    status: this.job_status,
                    reason,
                    enforce_org_id: this.info.enforce_org_id
                };
                this.$http.put(`/v2/api/enforce-job/${this.info.id}/approve`, params).then(res => {
                    this.$toast.success('处理成功');
                    this.$router.back();
                }).catch(err => {
                    this.showOverLay = false;
                });
            }
        },
        parseTime() {
            const date = this.isNotification ? this.info.notification_audit_time : this.info.approve_time;
            if (date) {
                return dateFormat('YYYY-mm-dd HH:MM:SS', new Date(date));
            }
            return '-'
        },
        parseType(type) {
            switch (type) {
                case 'NORMAL':
                    return '日常检查'
                    break;
                case 'SPECIAL':
                    return '专项'
                    break;
                case 'REPORT':
                    return '举报'
                    break;
                case 'TOWNS':
                    return '乡镇检查'
                    break;
                default:
                    break;
            }
            return '其他'
        },
        parseStatus() {
            if (this.isNotification) {
                const status = this.info.notification_audit_status;
                switch (status) {
                    case 'NOT':
                        return '未下发'
                        break;
                    case 'AUDIT':
                        return '待审批'
                        break;
                    case 'SENDED':
                        return '已下发（审批通过）'
                        break;
                
                    default:
                        break;
                }
                return '被驳回'
            }
            else {
                const status = this.info.job_status;
                switch (status) {
                    case 'AUDIT':
                        return '审核中'
                        break;
                    case 'REJECT':
                        return '已驳回'
                        break;
                    case 'TODO':
                        return '待执行'
                        break;
                    case 'DOING':
                        return '执行中'
                        break;
                
                    default:
                        break;
                }
                return '已归档'
            }
        },
    },
}
</script>

<style lang="scss">
.remark {
    .van-cell {
        padding: 10px 0;
    }
}
.content {
    .van-cell__value {
        white-space: normal;
        flex: 2;
    }
}
</style>

<style lang="scss" scoped>
.problems {
    font-size: 14px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    &>div {
        word-wrap: break-word;
        white-space: normal;
        text-overflow: ellipsis;
    }
}
.remark {
    font-size: 14px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
}
</style>