<template>
    <div class="page">
        <headNav title="检查总结"></headNav>

        <div class="content" v-if="jobData">
            <van-cell-group title="检查结果">
                <div class="result">
                    <span :class="jobData.enforce_result == 'PASS' ? 'FontColorSuccess':'FontColorError'">{{ jobData.enforce_result == 'PASS' ? '检查正常' : '检查异常' }}</span>
                </div>
            </van-cell-group>
            <template v-if="jobData.enforce_result == 'PASS'">
                <van-cell-group title="检查判断">
                    <div class="check">
                        <van-checkbox v-model="checked" shape="square">检查情况良好，未发现异常隐患情况</van-checkbox>
                    </div>
                </van-cell-group>
            </template>
            <template v-else>
                <van-cell-group title="异常情况">
                    <div class="info">{{jobData.job_result_content}}</div>
                </van-cell-group>
                <van-cell-group title="检查判断">
                    <van-radio-group v-model="checkbox">
                        <div class="check">
                            <van-radio name="1" shape="square">部分检查情况异常，责令立即改正</van-radio>
                            <div class="notice">《责令立即改正通知》</div>
                        </div>
                        <div class="check">
                            <van-radio name="2" shape="square">部分检查情况异常，责令限期改正</van-radio>
                            <div class="notice">《责令限期改正通知》</div>
                        </div>
                    </van-radio-group>
                </van-cell-group>
            </template>

            <div class="mg">
                <van-button round block type="info" @click="confirmResult">确定</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 { get, put } from "@/utils/http.js";
import { isEmpty,notEmpty } from '@/utils/tool';
import { Dialog } from 'vant';

export default {
    components: {
        headNav,
        'v-mask': mask_overLay,
    },
    data () {
        return {
            showOverLay: false,
            isLoading: false,
            jobData: null,
            checkbox: '',
            checked: true,
        }
    },
	computed: {
		jobId() {
			return this.$route.params.ID
		},
	},
    mounted () {
        if (this.jobId) {
            this.loadJobData();
        }
    },
    methods: {
        async loadJobData() {
            if (this.isLoading) {
                return
            }
            this.isLoading = true;
            this.showOverLay = true
			this.jobData = await get(`/v2/api/enforce-job/${this.jobId}`);
            this.showOverLay = false;
            setTimeout(() => {
                this.isLoading = false;
            }, 2000);
        },
        confirmResult() {
            if (this.jobData.enforce_result == 'PASS') {
                if (!this.checked) {
                    this.$toast.fail('请做出检查判断');
                    return;
                }
                const vm = this;
				Dialog.confirm({
					title: '温馨提示',
					message: '是否归档任务？',
				}).then(() => {
					put(`/v2/api/enforce-job/${vm.jobId}`, {
						job_status: 'ARCHIVED',
        				finish_time: new Date()
					}).then(res => {
						vm.$toast.success('归档成功！');
						vm.$router.back();
					})
				}).catch(e => {

				})
            }
            else {
                if (isEmpty(this.checkbox)) {
                    this.$toast.fail('请做出检查判断');
                    return;
                }
                this.$router.replace(`/simpleCheckNotice/${this.jobId}/${this.checkbox}`);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.result {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    &>span {
        font-weight: bolder;
        font-size: 18px;
    }
}
.check, .info {
    color: #585858;
    font-size: 14px;
    padding: 10px 20px;
}
.check {
    font-weight: bolder;
}
.notice {
    margin-top: 8px;
    margin-left: 20px;
    color: #898989;
    font-size: 12px;
}
</style>