<template>
  <el-dialog
    title="您当前完成进度如下："
    width="348px"
    :center="true"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    @open="handleOpen"
    @close="handleClose"
  >
    <div>
      <ul v-if="detail">
        <li
          v-for="item in currentOptions"
          :class="progress[item.code].progress === 1 ? 'is-success' : 'is-error'"
          :key="item.code"
        >
          <span class="name">{{ item.title }}</span>
          <span class="line"></span>
          <span class="status">{{ progress[item.code].progress === 1 ? '已完成' : '未完成' }}</span>
          <span class="view" @click="handleView(item.view.to)">立即查看</span>
        </li>
      </ul>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">我知道啦</el-button>
    </template>
  </el-dialog>
</template>

<script>
import * as api from '@/api/my'
export default {
  props: { value: { type: Boolean, default: false }, type: { type: Number, default: 0 } },
  data() {
    return {
      dialogVisible: false,
      detail: null,
      progress: {},
      options: [
        [
          {
            title: '个人资料',
            code: 'applicaitonInfo',
            view: { to: { path: '/my/application', query: { active: 'application_info' } } }
          }
          // {
          //   title: '推荐信',
          //   code: 'applicationTjx',
          //   view: { to: { path: '/my/application', query: { active: 'application_tjx' } } }
          // }
          // {
          //   title: '无犯罪证明',
          //   code: 'applicationWfzzm',
          //   view: { to: { path: '/my/application', query: { active: 'application_wfzzm' } } }
          // }
        ],
        [
          {
            title: '毕业证书',
            code: 'interviewByzs',
            view: { to: { path: '/my/interview', query: { active: 'interview_byzs' } } }
          },
          // {
          //   title: '学位证书',
          //   code: 'interviewXwzs',
          //   view: { to: { path: '/my/interview', query: { active: 'interview_xwzs' } } }
          // },
          // {
          //   title: '学位证书英文证明',
          //   code: 'interviewXwzsEnglish',
          //   view: { to: { path: '/my/interview', query: { active: 'interview_xwzsywzm' } } }
          // },
          // {
          //   title: '英文简历',
          //   code: 'interviewYwjl',
          //   view: { to: { path: '/my/interview', query: { active: 'interview_ywjl' } } }
          // },
          // {
          //   title: '成绩单',
          //   code: 'interviewCjd',
          //   view: { to: { path: '/my/interview', query: { active: 'interview_cjd' } } }
          // },
          {
            title: '2寸照片',
            code: 'interviewZp',
            view: { to: { path: '/my/interview', query: { active: 'interview_zp' } } }
          }

          // {
          //   title: '推荐信',
          //   code: 'interviewTjx',
          //   view: { to: { path: '/my/application', query: { active: 'application_tjx' } } }
          // }
        ]
      ]
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.dialogVisible = value
      }
    }
  },
  computed: {
    currentOptions() {
      return this.options[this.type]
    }
  },
  methods: {
    // 获取报名信息
    getApplication() {
      api.getApplication(this.$route.query).then(response => {
        const { data, error, message } = response
        if (error.toString() === '0') {
          const { progress } = data
          this.detail = data

          const fillingMissedRequiredList = progress.FILLING.attachments.missed_required_list
          // 个人资料
          const applicaitonInfo = { progress: 0 }
          const infoRequriedList = ['basic_info', 'educations', 'careers', 'answers']
          for (const key of infoRequriedList) {
            if (progress.FILLING[key].progress < 1) {
              applicaitonInfo.progress = 0
              break
            }
            applicaitonInfo.progress = 1
          }
          if (applicaitonInfo.progress === 1 && !fillingMissedRequiredList.ID_CARD_PHOTO) {
            applicaitonInfo.progress = 1
          } else {
            applicaitonInfo.progress = 0
          }
          // 推荐信
          const applicationTjx = { progress: 0 }
          applicationTjx.progress = progress.FILLING.reco_letters ? progress.FILLING.reco_letters.progress : 0
          // 无犯罪证明
          const applicationWfzzm = { progress: 0 }
          applicationWfzzm.progress = fillingMissedRequiredList.NO_CRIMINAL_CERT ? 0 : 1

          const missedRequiredList = progress.INTERVIEW_APPLICATION.attachments.missed_required_list
          // 2寸照片
          const interviewZp = { progress: 0 }
          interviewZp.progress = missedRequiredList.PERSONAL_PHOTO_FOR_ID ? 0 : 1
          // 毕业证书
          const interviewByzs = { progress: 0 }
          interviewByzs.progress = missedRequiredList.DIPLOMA_CN ? 0 : 1
          // 学位证书
          const interviewXwzs = { progress: 0 }
          interviewXwzs.progress = missedRequiredList.DEGREE_CERT_CN ? 0 : 1
          // 学位证书英文
          const interviewXwzsEnglish = { progress: 0 }
          interviewXwzsEnglish.progress = missedRequiredList.DEGREE_CERT_EN ? 0 : 1
          // 英文简历
          const interviewYwjl = { progress: 0 }
          interviewYwjl.progress = missedRequiredList.RESUME_EN ? 0 : 1
          // 成绩单
          const interviewCjd = { progress: 0 }
          interviewCjd.progress = missedRequiredList.REPORT_CARD_CN || missedRequiredList.REPORT_CARD_EN ? 0 : 1
          // 推荐信
          const interviewTjx = { progress: 0 }
          interviewTjx.progress = progress.INTERVIEW_APPLICATION.reco_letters
            ? progress.INTERVIEW_APPLICATION.reco_letters.progress
            : 0

          this.progress = {
            applicaitonInfo,
            applicationTjx,
            applicationWfzzm,
            interviewZp,
            interviewByzs,
            interviewXwzs,
            interviewXwzsEnglish,
            interviewYwjl,
            interviewCjd,
            interviewTjx
          }
        } else {
          this.$message.error(message)
        }
      })
    },
    handleView(to) {
      this.dialogVisible = false
      this.$router.push(to)
    },
    handleOpen() {
      this.getApplication()
    },
    handleClose() {
      this.$emit('input', this.dialogVisible)
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.name {
  width: 80px;
  text-align: right;
}
.line {
  width: 40px;
  height: 1px;
  margin: 0 10px;
  background-color: #ccc;
}
.is-success {
  .status {
    color: #33c011;
  }
}
.is-error {
  .status {
    color: #af1b40;
  }
}
.view {
  margin-left: 40px;
  color: #57acff;
  text-decoration: underline;
  cursor: pointer;
}
</style>
