<template>
  <div v-if="loaded">
    <template v-if="isComplete">
      <ul class="complete-list">
        <li>
          <router-link to="/preview">
            <i class="el-icon-edit-outline"></i>
            <p>查看资料</p>
          </router-link>
        </li>
        <li>
          <a href="https://accounts.ezijing.com/payment" target="_blank">
            <i class="el-icon-tickets"></i>
            <p>开具发票</p>
          </a>
        </li>
      </ul>
    </template>
    <template v-else>
      <index-welcome @update="handleUpdate" v-if="!isSubmited" />
      <index-pay v-else />
    </template>
  </div>
</template>

<script>
import IndexWelcome from './indexWelcome.vue'
import IndexPay from './indexPay.vue'

import * as api from '@/api/my'
export default {
  components: { IndexWelcome, IndexPay },
  data() {
    return {
      loaded: false,
      progress: {},
      isComplete: false
    }
  },
  methods: {
    // 获取报名信息
    getApplication() {
      this.loaded = false
      api.getApplication().then(response => {
        const { progress = {}, material = {} } = response.data
        this.progress = progress
        if (material?.basic_info?.ciis_submit_type === '1') {
          this.isComplete = true
          this.loaded = true
          return
        }
        // 缴费成功
        if (progress.PREPAYMENT.total_progress) {
          this.$router.push('/my/account')
        } else {
          this.loaded = true
        }
      })
    },
    handleUpdate(data) {
      const { progress } = data
      this.progress = progress
    }
  },
  computed: {
    isSubmited() {
      const { FILLING = {} } = this.progress
      if (FILLING && FILLING.basic_info) {
        return !!FILLING.basic_info.progress
      }
      return false
    }
  },
  beforeCreate() {
    document.body.style.background = '#fff'
  },
  beforeMount() {
    this.getApplication()
  },
  destroyed() {
    document.body.style = ''
  }
}
</script>

<style lang="scss">
.complete-list {
  margin-top: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 100px;
  li {
    width: 200px;
    height: 120px;
    border: 1px solid #ddd;
    i {
      font-size: 30px;
    }
    a {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
