<template>
  <div class="my">
    <div class="card">
      <div class="result">
        <div class="result-left"><img src="../../../assets/images/my_icon.png" />招生办反馈</div>
        <div class="result-right">{{ result.submit_status_desc || '未收到报名信息' }}</div>
      </div>
    </div>
    <div class="card" style="min-height: 360px">
      <ul class="nav">
        <li class="nav-application" @click="toApplication"></li>
        <li class="nav-interview" @click="toInterview"></li>
        <li class="nav-admission" @click="toAdmission"></li>
      </ul>
      <div class="progress">
        <el-steps :active="activeProgress" finish-status="success" align-center>
          <el-step v-for="(item, index) in 3" :key="index">
            <template #title>{{ getProgressStatusText(index) }}</template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/my'
export default {
  name: 'AppHome',
  data() {
    return {
      material: {},
      progress: {},
      submissionStage: {
        0: ['FILLING', 'PREPAYMENT'],
        1: ['INTERVIEW_APPLICATION', 'AUDITION', 'INTERVIEW', 'PAYMENT'],
        2: ['REGISTRATION'],
        3: ['CLOSED']
      },
      result: {}
    }
  },
  computed: {
    activeProgress() {
      for (const key in this.submissionStage) {
        const list = this.submissionStage[key]
        if (list.includes(this.material.submission_stage)) {
          return parseInt(key)
        }
      }
      return 0
    }
  },
  methods: {
    // 获取进度值
    getProgressStatusText(index) {
      if (this.activeProgress === index) {
        return '进行中'
      } else {
        return this.activeProgress > index ? '已完成' : '待进行'
      }
    },
    // 获取报名信息
    getApplication() {
      api.getApplication().then(response => {
        const { data, error, message } = response
        if (error.toString() === '0') {
          const { material, progress } = data
          this.material = material
          this.progress = progress
        } else {
          this.$message.error(message)
        }
      })
    },
    // 获取报名审核状态
    getApplicationStatus() {
      api.getApplicationStatus().then(response => {
        this.result = response.data
      })
    },
    // 报名申请
    toApplication() {
      this.$router.push('/my/application?active=application_info')
    },
    // 申请面试
    toInterview() {
      if (this.activeProgress < 1) {
        this.$message.warning('请完成报名申请并缴报名费')
        return
      }
      this.$router.push('/my/interview')
    },
    // 办理入学
    toAdmission() {
      if (this.activeProgress < 2) {
        this.$message.warning('请等待面试结果')
        return
      }
      this.$router.push('/my/admission')
    }
  },
  beforeMount() {
    this.getApplication()
    this.getApplicationStatus()
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: #fff;
  border-radius: 5px;
}
.card + .card {
  margin-top: 10px;
}
.nav {
  display: flex;
  justify-content: space-between;
  padding: 40px 70px 20px;
  li {
    position: relative;
    width: 188px;
    height: 128px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
.nav-application {
  background-image: url('../../../assets/images/my_01.png');
  &:hover {
    background-image: url('../../../assets/images/my_01_hover.png');
  }
}
.nav-interview {
  background-image: url('../../../assets/images/my_02.png');
  &:hover {
    background-image: url('../../../assets/images/my_02_hover.png');
  }
}
.nav-admission {
  background-image: url('../../../assets/images/my_03.png');
  &:hover {
    background-image: url('../../../assets/images/my_03_hover.png');
  }
}
.result {
  min-height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.result-left {
  line-height: 14px;
  color: var(--main-color);
  img {
    margin-right: 10px;
  }
}
.result-right {
  padding-left: 40px;
  color: #666;
}
.progress {
  margin: 0 40px;
}
</style>
