<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-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="../../../assets/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_byzs',
      completeVisible: false,
      dialogVisible: false,
      detail: null
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        const { query = {} } = route
        this.currentActive = query.active || 'interview_byzs'
      }
    },
    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 } }).catch(() => {})
      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>
