<template>
    <div class="page">
        <headNav title="责令改正通知"></headNav>

        <div class="content" v-if="jobData">
            <div class="container">
                <van-row class="row" @click="showNotice(1)">
                    <van-col span="19" class="title">部分检查情况异常，责令立即改正</van-col>
                    <van-col span="5" v-if="!isDeadline" class="arrow">
                        <span :class="immediateSended?'FontColorSuccess fb':'FontColorError fb'">{{ immediateSended?'已下发':'未下发' }}</span>
                        <van-icon color="#898989" name="arrow" />
                    </van-col>
                    <van-col span="5" v-else>
                        <span class="FontColorSuccess fb">无需下发</span>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col class="notice">《责令立即改正通知》</van-col>
                </van-row>
                <van-divider />
                <van-row class="row" @click="showNotice(2)">
                    <van-col span="19" class="title">部分检查情况异常，责令限期改正</van-col>
                    <van-col span="5">
                        <template v-if="isDeadline" class="arrow">
                            <div class="FontColorOther fb" v-if="jobData.notification_audit_status =='AUDIT'">待审批</div>
                            <div class="FontColorOther fb" v-else-if="jobData.notification_audit_status =='SENDED'">已下发</div>
                            <div class="FontColorOther fb" v-else-if="jobData.notification_audit_status =='REJECT'">被驳回</div>
                            <div class="FontColorError fb" v-else>未下发</div>
                            <van-icon color="#898989" name="arrow" />
                        </template>
                        <template v-else>
                            <span class="FontColorSuccess fb">无需下发</span>
                        </template>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="11" class="notice">《责令限期改正通知》</van-col>
                    <van-col span="13" class="notice" v-if="isDeadline && jobData.notification_audit_status =='REJECT'">驳回原因：{{jobData.deadline_job_reason}}</van-col>
                </van-row>
            </div>
            <div class="mg" v-if="showFinishBtn">
                <van-button block type="info" @click="finishJob">完成任务</van-button>
            </div>
            <div class="qrContent">
                <div class="qrItem" v-if="!isDeadline && jobData.immediately_file_id">
                    <span>责令立即改正通知地址</span>
                    <qrCode :url="immediateUrl"/>
                </div>
                <div class="qrItem" v-if="isDeadline && jobData.deadline_file_id">
                    <span>责令限期改正通知地址</span>
                    <qrCode :url="deadlineUrl"/>
                </div>
            </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 { get, put } from "@/utils/http.js";
import qrCode from '@/components/qrCode.vue';
import { isEmpty,notEmpty } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';

export default {
    components: {
        headNav,
        'v-mask': mask_overLay,
        qrCode
    },
    data () {
        return {
            showOverLay: false,
            isLoading: false,
            jobData: null,
            showFinishBtn: false,
        }
    },
	computed: {
		jobId() {
			return this.$route.params.ID
		},
        isDeadline() {
            return this.$route.params.type == '2'
        },
        immediateSended() {
            if (!this.isDeadline && this.jobData) {
                return this.jobData.immediately_file_id > 0
            }
            return true;
        },
        immediateUrl() {
            if (this.jobData && this.jobData.immediately_file_id) {
                return handleProblemImgs(this.jobData.immediately_file_id);
            }
            return null
        },
        deadlineUrl() {
            if (this.jobData && this.jobData.deadline_file_id) {
                return handleProblemImgs(this.jobData.deadline_file_id);
            }
            return null
        }
	},
    mounted () {
        if (this.jobId) {
            this.loadJobData();
        }
    },
    methods: {
        async loadJobData() {
            if (this.isLoading) {
                return
            }
            this.isLoading = true;
            this.showOverLay = true;
			const res = await get(`/v2/api/enforce-job/${this.jobId}`);
            this.jobData = res;
            if (this.isDeadline) {
                if (this.jobData.notification_audit_status =='SENDED') {
                    this.showFinishBtn = true;
                }
            }
            else {
                if (res.immediately_file_id) {
                    this.showFinishBtn = true;
                }
            }
            this.showOverLay = false;
            setTimeout(() => {
                this.isLoading = false;
            }, 2000);
        },
        finishJob() {
            put(`/v2/api/enforce-job/${this.jobId}`, {
                id: this.jobId,
                job_status: 'ARCHIVED',
                finish_time: new Date()
            }).then((res) => {
                this.$toast.success('归档成功！');
                this.$router.go(-2);
            }).catch(() => {
                this.$toast.fail("归档失败！");
            });
        },
        showNotice(type) {
            if (type == 1) {
                if (this.jobData.immediately_file_id) {
                    this.$router.push({
                        name: 'pdf',
                        params: {
                            url: this.immediateUrl,
                            title: '责令立即改正通知'
                        }
                    })
                }
                else if (!this.isDeadline) {
                    this.$router.push(`/correctImmediately/${this.jobId}`)
                }
            }
            else {
                const status = this.formData && this.formData.notification_audit_status || '';
                if ((status == 'AUDIT' || status == 'SENDED') && this.formData.deadline_file_id) {
                    this.$router.push({
                        name: 'pdf',
                        params: {
                            url: this.deadlineUrl,
                            title: '责令限期改正通知'
                        }
                    })
                }
                else if (this.isDeadline) {
                    this.$router.push(`/correctDeadline/${this.jobId}`)
                }
            }
        }
    }
}
</script>

<style lang="scss">
.row {
    .van-col {
        display: flex;
        align-items: center;
    }
}
</style>

<style lang="scss" scoped>
.container {
    background-color: #FFFFFF;
    padding: 20px;
    color: #585858;
}
.row {
    font-size: 14px;
    .title {
        font-weight: bolder;
    }
}
.notice {
    margin-top: 10px;
    font-size: 14px;
    color: #898989;
}
.arrow {
    display: flex;
    align-items: center;
}
.fb {
    font-weight: bolder;
}
.qrContent {
    display: flex;
    justify-content: center;
    font-size: 14px;

    .qrItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px;
    }
}
</style>