<template>
    <div class="page">
        <headNav  title="执行任务"></headNav>

        <div class="content" v-if="jobData">
            <van-cell-group v-if="jobData.enforce_obj">
                <van-cell title="单位名称" is-link :value="jobData.enforce_obj_name" @click="turnToCompany" />
                <van-cell title="单位地址" :value="jobData.enforce_obj.enforce_obj_address" />
                <van-cell title="单位法人" :value="jobData.enforce_obj.legal_person" />
                <van-cell title="联系方式" :value="jobData.enforce_obj.legal_person_phone" />
            </van-cell-group>
            <van-cell-group class="mt20">
                <van-cell title="下发单位" :value="jobData.enforce_org_name" />
                <van-cell title="编号" :value="jobData.job_no" />
                <van-cell title="检查时间" :value="jobData.startDate" />
                <van-cell title="检查类型" :value="jobData.jobType" />
                <van-cell v-if="jobData.job_desc" title="任务描述" :value="jobData.job_desc" />
                <van-cell class="noline" title="检查内容和情况" />
                <div class="check">
                    <van-field
                        v-model="jobData.job_result_content"
                        rows="4"
                        autosize
                        readonly
                        type="textarea"
                        placeholder="请输入"
                    />
                </div>
                <van-divider class="ml10" />
                <van-cell title="现场照片" class="custom-title">
                    <van-uploader
                        v-model="fileList"
                        :max-count="fileList.length"
                        :deletable="false"
                    />
                </van-cell>
                <van-cell class="noline" title="备注" />
                <div class="check">
                    <van-field
                        v-model="jobData.job_result_remark"
                        rows="4"
                        autosize
                        readonly
                        type="textarea"
                        placeholder="请输入"
                    />
                </div>
                <van-divider class="ml10" />
                <van-field class="ml10" name="radio" required label="检查结论">
                    <template #input>
                        <van-radio-group v-model="jobData.enforce_result" input-align="right" direction="horizontal" disabled>
                            <van-radio name="PASS">合格</van-radio>
                            <van-radio name="NOT_PASS">不合格</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
            </van-cell-group>
        </div>

        <v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import mask_overLay from '@/components/overLay_xy.vue';
import { get } from "@/utils/http.js";
import { dateFormat } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';

export default {
    components: {
        headNav,
        'v-mask': mask_overLay,
    },
    data () {
        return {
            showOverLay: false,
            tipMsg: '加载中...',
            isLoading: false,
            jobData: null,
            fileList: [],
        }
    },
	computed: {
		jobId() {
			return this.$route.params.ID
		},
	},
    mounted () {
        if (this.jobId) {
            this.loadJobDatas();
        }
    },
    methods: {
        async loadJobDatas() {
            if (this.isLoading) {
                return
            }
            this.isLoading = true;
            this.showOverLay = true
            const obj = await get(`/v2/api/enforce-job/${this.jobId}`);
            if (obj) {
                obj.startDate = dateFormat('YYYY-mm-dd', new Date(obj.start_time));
                switch (obj.job_type) {
                    case 'OTHER':
                        obj.jobType = '其他检查';
                        break;
                    case 'SPECIAL':
                        obj.jobType = '专项检查';
                        break;
                    case 'REPORT':
                        obj.jobType = '举报检查';
                        break;
                    case 'TOWNS':
                        obj.jobType = '乡镇检查';
                        break;
                    default:
                        obj.jobType = '日常检查';
                        break;
                }
                if (obj.job_result_pictures && obj.job_result_pictures.length > 0) {
                    let pics = [];
                    obj.job_result_pictures.split(',').map(fileId => {
                        pics.push({
                            url: handleProblemImgs(fileId),
                            isImage: true,
                            fileID: fileId
                        });
                    });
                    this.fileList = pics;
                }
            }
            this.jobData = obj;
            this.showOverLay = false;
            setTimeout(() => {
                this.isLoading = false;
            }, 2000);
        },
        turnToCompany() {
            if (this.jobData && this.jobData.enforce_obj_id) {
                this.$router.push(`/companyInfo/${this.jobData.enforce_obj_id}`);
            }
        },
    }
}
</script>

<style lang="scss">
.noline::after {
    border-bottom: none;
}
.van-radio-group--horizontal {
    justify-content: flex-end;
    width: 100%;
}
.custom-title {
    .van-cell__title {
        flex: 0.5;
    }
}
</style>

<style lang="scss" scoped>
.check {
    margin: auto 16px;
    border: 1px solid #f0f0f0;
}
</style>