<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 class="welcome" v-if="welcomeShow">
      <div class="inner">
        <div class="welcome-close" @click="handleClose"></div>
        <div class="welcome-main">
          <img src="../../../assets/images/welcome.png" width="350" />
          <div class="welcome-content">
            <h1>欢迎您申请</h1>
            <h2>美国威斯康星协和大学</h2>
            <div class="welcome-button" @click="handleStart">马上开始</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/my'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
export default {
  name: 'AppHome',
  data() {
    const user = window.G.UserInfo
    return {
      user,
      material: {},
      progress: {},
      submissionStage: {
        0: ['FILLING', 'PREPAYMENT'],
        1: ['INTERVIEW_APPLICATION', 'AUDITION', 'INTERVIEW', 'PAYMENT'],
        2: ['REGISTRATION'],
        3: ['CLOSED']
      },
      result: {},
      welcomeShow: false
    }
  },
  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
          const welcomeShowed = window.localStorage.getItem(this.user.id) === 'true'
          material.attachments = material.attachments || []
          if (!material.attachments.length && !welcomeShowed) {
            this.welcomeShow = true
          }
        } 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')
    },
    handleStart() {
      this.welcomeShow = false
      this.createDriver()
    },
    handleClose() {
      this.welcomeShow = false
      window.localStorage.setItem(this.user.id, true)
    },
    createDriver() {
      const driver = new Driver({
        opacity: '0.8',
        padding: 5,
        allowClose: false,
        doneBtnText: '我知道了',
        nextBtnText: '下一步',
        onReset: () => {
          window.localStorage.setItem(this.user.id, true)
        }
      })

      // Define the steps for introduction
      driver.defineSteps([
        {
          element: '.nav-application',
          popover: {
            className: 'first-step-popover-class',
            title: '第一步：',
            description: '点击<span style="color:#af1b40">报名申请</span>，进入基本信息的填写。',
            position: 'bottom-right'
          }
        },
        {
          element: '.nav-interview',
          popover: {
            title: '第二步：',
            description: '点击<span style="color:#af1b40">申请面试</span>，进入面试所需材料的上传。',
            position: 'bottom-right'
          }
        },
        {
          element: '.nav-admission',
          popover: {
            title: '第三步：',
            description: '点击<span style="color:#af1b40">办理入学</span>，进入办理入学材料的上传。',
            position: 'bottom-right'
          }
        }
      ])

      driver.start()
    }
  },
  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 2px;
  }
}
.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;
}
.welcome {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.welcome-close {
  float: right;
  width: 23px;
  height: 23px;
  background: url('../../../assets/images/welcome_close.png') no-repeat;
  background-size: contain;
  cursor: pointer;
}
.welcome-main {
  display: flex;
  align-items: center;
}
.welcome-content {
  text-align: center;
  h1 {
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    line-height: 56px;
  }
  h2 {
    font-size: 26px;
    font-weight: normal;
    color: #fff;
    line-height: 26px;
  }
}
.welcome-button {
  margin-top: 40px;
  display: inline-block;
  padding: 10px 32px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 20px;
  border-radius: 5px;
  border: 3px solid #fff;
  cursor: pointer;
  &:hover {
    color: #af1b40;
    background-color: #fff;
  }
}
</style>
<style>
div#driver-popover-item {
  padding: 10px;
  max-width: 178px;
  min-width: auto;
}
div#driver-popover-item .driver-popover-title {
  font-size: 16px;
}
.driver-close-btn,
.driver-prev-btn {
  display: none !important;
}
#driver-highlighted-element-stage {
  border-radius: 8px !important;
}
div#driver-popover-item .driver-popover-footer {
  text-align: center;
}
div#driver-popover-item .driver-popover-footer button {
  background-color: #af1b40;
  line-height: 36px;
  color: #fff;
  border-radius: 4px;
  padding: 0 26px;
  text-shadow: none;
  border: 0;
}
div#driver-popover-item .driver-popover-footer .driver-btn-group {
  float: none;
}
.driver-highlighted-element {
  pointer-events: none;
}
</style>
