<template>
  <app-layout>
    <vue-form
      :menus="menus"
      :default-active="currentActive"
      @page-change="handlePageChange"
      @success="handleSuccess"
      @error="handleError"
      @back="$router.push('/my/account')"
      @prev="handlePrev"
      @next="handleNext"
    >
      <template #aside-append>
        <div class="aside-payment"><a href="https://accounts.ezijing.com/payment" target="_blank">查看缴费记录</a></div>
        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
      </template>
    </vue-form>
    <app-complete :type="1" v-model="completeVisible"></app-complete>
    <el-dialog
      title="资料提交成功"
      :visible.sync="dialogVisible"
      :center="true"
      :close-on-click-modal="false"
      width="348px"
    >
      <div class="dialog-tips">
        <p>请注意接听招办老师的邀约电话</p>
        <div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">我知道啦</el-button>
      </template>
    </el-dialog>
  </app-layout>
</template>

<script>
import AppLayout from '../layout.vue'
import getMenu from './form'
import AppComplete from '../application/complete.vue'
import * as api from '@/api/my'

export default {
  components: { AppLayout, AppComplete },
  data() {
    const menus = getMenu(this)
    return {
      menus: [menus],
      currentActive: 'interview_byz',
      completeVisible: false,
      dialogVisible: false,
      detail: null
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        const { query = {} } = route
        this.currentActive = query.active || 'interview_byz'
      }
    },
    showSubmitedDialog(value) {
      this.dialogVisible = value
    }
  },
  computed: {
    isSubmited() {
      const stageList = [
        'FILLING',
        'PREPAYMENT',
        'INTERVIEW_APPLICATION',
        'AUDITION',
        'INTERVIEW',
        'PAYMENT',
        'REGISTRATION',
        'CLOSED'
      ]
      if (this.detail) {
        return stageList.findIndex(item => item === this.detail.material.submission_stage) > 2
      }
      return false
    },
    showSubmitedDialog() {
      return this.isSubmited && this.currentActive === 'interview_zp'
    }
  },
  methods: {
    // 获取报名信息
    getApplication() {
      api.getApplication().then(response => {
        const { data, error, message } = response
        if (error.toString() === '0') {
          this.detail = data
        } else {
          this.$message.error(message)
        }
      })
    },
    handlePageChange(value) {
      this.currentActive = value
      this.$router.push({ path: this.$route.path, query: { active: value } })
      console.log('页面切换了', value)
    },
    handleSuccess(data) {
      this.getApplication()
      console.log('提交成功了', data)
      this.$message({ type: 'success', message: data.message })
    },
    handleError(data) {
      console.log('提交失败了', data)
      this.$message({ type: 'error', message: data.message })
    },
    handlePrev(to) {
      this.$router.push(to)
    },
    handleNext(to) {
      this.$router.push(to)
    }
  },
  beforeMount() {
    this.getApplication()
  }
}
</script>

<style lang="scss" scoped>
.dialog-tips {
  text-align: center;
  p {
    color: #262626;
    line-height: 20px;
  }
  .icon {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
