<template>
    <div class="page">
        <headNav title="任务详情"></headNav>
        <div class="content" v-if="info">
            <van-cell-group>
                <van-cell title="被检查单位" is-link :value="info.enforce_obj_name" @click="showCompany" />
                <van-cell title="单位地址">
                    <span>{{info.enforce_obj.enforce_obj_address}}</span>
                    <van-icon name="location-o" color="#02A7F0" />
                </van-cell>
                <van-cell title="执法机构" :value="info.enforce_org_name" />
                <van-cell title="检查成员" is-link :value="info.executor_names" @click="showExecutors" />
                <van-cell title="创建时间" :value="info.create_time" />
                <van-cell title="任务编号" :value="info.job_no" />
                <van-cell title="任务下发" :value="info.approve_user_name" />
                <van-cell title="任务名称" :value="info.job_name" />
                <van-cell title="任务内容" :value="info.job_desc" />
                <van-cell title="任务状态" :value-class="info.cls" :value="info.status" />
            </van-cell-group>
            <div style="margin: 16px;" v-if="taskStart">
                <van-button round block type="info" @click="startExecTask">{{ info.job_status == 'DOING' ? '继续检查' : '开始检查' }}</van-button>
            </div>
            <van-cell-group v-if="info.job_status == 'ARCHIVED'" title="检查结果">
                <van-cell title="检查记录" is-link value="查看详情" @click="showCheckRecord" />
                <van-cell title="检查文书" is-link value="查看详情" @click="showCheckPDF" />
                <van-cell title="检查结果" :value="info.enforce_result == 'NOT_PASS' ? '不合格' : '合格'"/>
                <div v-if="showCheckResult" class="check-result" :class="taskIsPass?'check-result-pass':'check-result-error'">
                    <span :class="taskIsPass?'check-pass':'check-error'">{{ taskIsPass ? '合格'  : '不合格'}}</span>
                </div>
            </van-cell-group>
        </div>

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

<script>
import headNav from "@/components/headNav.vue";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";
import { dateFormat } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';
import { Dialog } from 'vant';

export default {
    components: {
        headNav,
        baiduMap,
        "v-mask": mask_overLay,
    },
    computed: {
        taskId() {
            return this.$route.params.ID
        },
        taskStart() {
            if (this.info) {
                const s = this.info.job_status;
                return s == 'TODO' || s == 'DOING';// || s == 'AUDIT';
            }
            return false
        }
    },
    data() {
        return {
            info: null,
            showOverLay: false,
            showCheckResult: false,
            taskIsPass: false,
        }
    },
    mounted() {
        if (this.taskId) {
            this.loadTaskDatas();
        }
    },
    methods: {
        loadTaskDatas() {
            this.showOverLay = true;
            this.$http.get(`/v2/api/enforce-job/${this.taskId}`).then(res => {
                if (res.data) {
                    const obj = Object.assign({}, res.data);
                    if (obj.create_time) {
                        obj.create_time = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(obj.create_time));
                    }
                    if (obj.job_status) {
                        switch (obj.job_status) {
                            case "TODO":
                                obj.status = "待执行";
                                obj.cls = 'FontColorWarn';
                                break;
                            case "DOING":
                                obj.status = "执行中";
                                obj.cls = 'FontColorOther';
                                break;
                            case "ARCHIVED":
                                obj.status = "已归档";
                                obj.cls = 'FontColorSuccess';
                                break;
                            default:
                                break;
                        }
                    }
                    this.info = obj;
                    if (obj.job_status == 'ARCHIVED') {
                        this.taskIsPass = obj.enforce_result != 'NOT_PASS';
                        this.showCheckResult = true;
                    }
                }
                this.showOverLay = false;
            });
        },
        startExecTask() {
            if (this.info.result_file_id) {
                this.$router.push(`/town/check/${this.taskId}`);
                return
            }

            if (this.info.execute_step == 'RECORD') {
                this.$router.push(`/town/record/${this.taskId}`);
                return;
            }

            const vm = this
            Dialog.confirm({
                title: '温馨提示',
                message: '开始检查前请确保执法记录仪已处于开启状态',
            }).then(() => {
                if (vm.info.job_status === 'DOING') {
                    vm.$router.push(`/town/exec/${this.taskId}`);
                }
                else {
                    vm.$http.put(`/v2/api/enforce-job/${vm.taskId}`, {
                        job_status: 'DOING',
                        start_time: new Date()
                    }).then(res => {
                        vm.$router.push(`/town/exec/${vm.taskId}`);
                    })
                }
            }).catch(e => {

            })
        },
        showCompany() {
            if (this.info && this.info.enforce_obj_id) {
                this.$router.push(`/companyInfo/${this.info.enforce_obj_id}`);
            }
        },
        showExecutors() {
            this.$router.push(`/checkPersonnelInfo/${this.taskId}`);
        },
        showCheckRecord() {
            this.$router.push(`/town/scan/${this.taskId}`);
        },
        showCheckPDF() {
            const url = handleProblemImgs(this.info.result_file_id);
            this.$router.push({
                name: 'pdf',
                params: {
                    url,
                    title: '检查文书'
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.content {
    position: relative;
    .check-result {
        position: absolute;
        top: 80px;
        right: 30px;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        transform: rotate(-40deg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .check-result-pass {
        border: 2px solid #3fbf83;
    }
    .check-pass {
        color: #3fbf83;
        font-size: 24px;
    }
    .check-result-error {
        border: 2px solid #ff5d5d;
    }
    .check-error {
        font-size: 24px;
        color: #ff5d5d;
    }
}
</style>