<template>
    <div class="detail">
        <headNav @backPage="backPage" :title="'任务详情'"></headNav>
        <div v-if="infos" class="container">
            <van-cell-group>
                <van-cell title="被检查单位" is-link :value="infos.enforce_obj && infos.enforce_obj.enforce_obj_name" @click="showEnforceObj" />
                <van-cell title="单位地址" :value="infos.enforce_obj && infos.enforce_obj.enforce_obj_address">
                    <template #right-icon>
                        <van-icon name="location" color="#0066cc" class="cell-icon" />
                    </template>
                </van-cell>
                <van-cell title="执法机构" :value="infos.enforce_org_name" />
                <van-cell title="检查成员" is-link :value="infos.execUsers" @click="turnToCheckPerson" />
                <van-cell title="检查类型" value="日常抽查" />
                <van-cell title="任务状态" :value="infos.jobStatus" />
            </van-cell-group>
            <div class="more">
                <div @click="moreMissionDetail">查看更多内容</div>
                <van-icon name="arrow" />
            </div>
            <div class="steps">
                <van-steps :active="activeStep" active-color="#02A7F0">
                    <van-step>预约通知</van-step>
                    <van-step>监督检查</van-step>
                    <van-step>完成任务</van-step>
                </van-steps>
            </div>
            <van-cell-group>
                <van-cell title="检查记录" is-link value="查看详情" @click="showRecord" />
                <van-cell title="检查文书" is-link value="查看详情" @click="showPage" />
                <van-cell title="检查结果" is-link :value="infos.enforceStatus" />
            </van-cell-group>
        </div>
        <van-skeleton v-else title :row="6" />
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"

import { Dialog } from 'vant'

export default {
  name: "dailyDetails",
  components: {
      headNav
  },
  inject: ["reload"],
  components: {
        headNav
  },
  data() {
        return {
            infos: null,
            activeStep: 3
        }
  },
  computed: {
      dailyId() {
          return this.$route.params.ID
      }
  },
  mounted() {
        this.init();
        // if (window.history && window.history.pushState) {
        //     history.pushState(null, null, document.URL);
        //     window.addEventListener("popstate", this.goBack, false);
        // }
  },
//   destroyed() {
//         window.removeEventListener("popstate", this.goBack, false);
//   },
  methods: {
        init() {
            this.getDetailDatas()
        },
        parseEnforceStatus(status) {
            let str = '';
			switch(status) {
				case 'PASS':
					str='合格';
					break;
				case 'NOT_PASS':
					str="不合格";
					break;
				case 'CORRECT_IMMEDIATELY':
					str="不合格立即检查";
					break;
				case 'DEADLINE_CORRECT':
					str="不合格，限期改正";
					break;
				default:
					str='其他';
					break;
			}
			return str
        },
        parseStatus(status) {
            let str = '';
			switch(status) {
				case 'AUDIT':
					str='审核中';
					break;
				case 'REJECT':
					str="已驳回";
					break;
				case 'TODO':
					str="待执行";
					break;
				case 'DOING':
					str="执行中";
					break;
				case 'ARCHIVED':
					str="已归档";
					break;
				default:
					str='其他';
					break;
			}
			return str
        },
        getDetailDatas() {
            this.$http.get(`/v2/api/enforce-job/${this.dailyId}`).then(res => {
                if (res && res.data) {
                    const obj = Object.assign({}, res.data)
                    const execUsers = []
                    if (obj.executors && obj.executors.length > 0) {
                        obj.executors.map((item, index) => {
                            execUsers.push(item.user_name + (index === 0 ? '（主）': '（协）'))
                        })
                    }
                    obj.execUsers = execUsers.join(',')
                    obj.jobStatus = this.parseStatus(obj.job_status)
                    obj.enforceStatus = this.parseStatus(obj.enforce_result)
                    this.infos = obj
                    console.log('obj: ', obj)
                }
            })
        },
        backPage() {
            this.$router.back()
        },
        showEnforceObj() {
            this.$router.push(`/companyInfo/${JSON.stringify(this.infos.enforce_obj)}`)
        },
        turnToCheckPerson() {
            this.$router.push(`/checkPersonnelInfo/${this.dailyId}`);
        },
        moreMissionDetail() {
            this.$router.push(`/missionInfoDetail/${this.dailyId}`);
        },
        showRecent() {
            this.$router.push(`/newHiddenDanger/${this.dailyId}`);
        },
        showFlow() {
            this.$router.push(`/sureProcess/${this.dailyId}`);
        },
        startTask() {
            const vm = this
            Dialog.confirm({
                title: '温馨提示',
                message: '开始检查前请确保执法记录仪已处于开启状态',
            })
            .then(() => {
                // on confirm
                vm.$router.push(`/executeTask/${this.dailyId}`)
            })
        }
  },
}
</script>

<style lang="scss">
.steps {
    padding: 10px 20px;
    .van-steps {
        background-color: transparent !important;

        .van-step__circle-container {
            background-color: transparent !important;
        }
    }
}
</style>

<style lang="scss" scoped>
.detail {
    width: 100%;
}
.container {
    margin-top: 50px;
    width: 100%;
    height: calc(100vh - 40px);
    overflow-y: auto;

    .cell-icon {
        margin-top: 5px;
    }

    .more {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #888888;
    }

    .btns {
        margin: 20px;
    }
}
</style>