<template>
  <div v-if="loaded">
    <template v-if="isComplete">
      <ul class="complete-list">
        <li>
          <router-link to="/preview?material=0">
            <img src="https://webapp-pub.ezijing.com/project/ciis/apply_icon_2.png" />
            <p>查看资料</p>
          </router-link>
        </li>
        <li>
          <a href="https://accounts.ezijing.com/payment" target="_blank">
            <img src="https://webapp-pub.ezijing.com/project/ciis/apply_icon_1.png" />
            <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 {
  position: relative;
  height: calc(100vh - 120px);
  background: url(https://webapp-pub.ezijing.com/project/ciis/apply_banner.png) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 90px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  li {
    position: relative;
    width: 200px;
    height: 120px;
    background-color: #fff;
    border-radius: 6px;
    z-index: 1;
    color: #000;
    img {
      margin-bottom: 10px;
    }
    a {
      color: inherit;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    &:first-child {
      color: #fff;
      background-color: #e27f4d;
    }
  }
}
</style>
