<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"
      @uploaded="getApplication"
    >
      <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>
      <!-- 入学协议 -->
      <!-- <template #content v-if="currentActive === 'admission_xy'">
        <app-xy />
      </template> -->
    </vue-form>
    <el-dialog
      title="办理入学资料提交成功"
      :visible.sync="dialogVisible"
      :center="true"
      :close-on-click-modal="false"
      width="348px"
    >
      <div class="dialog-tips">
        <p>请确认是否已缴费，如未缴费点击下方缴费按钮 <br />（已缴费，请忽略）</p>
        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
      </div>
      <template #footer>
        <el-button type="primary" @click="toPay">立即缴费</el-button>
        <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 * as api from '@/api/my'
import AppXy from './xy'
export default {
  components: { AppLayout, AppXy },
  data() {
    const menus = getMenu(this)
    return {
      menus: [menus],
      currentActive: 'admission_cjd',
      dialogVisible: false,
      detail: null
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        const { query = {} } = route
        this.currentActive = query.active || 'admission_cjd'
      }
    },
    showSubmitedDialog(value) {
      this.dialogVisible = value
    }
  },
  computed: {
    isSubmited() {
      if (this.detail) {
        return !!this.detail.material.attachments.find(item => item.file_type_id === 'ADMISSION_AGREEMENT')
      }
      return false
    },
    showSubmitedDialog() {
      return this.isSubmited && this.currentActive === 'admission_xy'
    }
  },
  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) {
      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)
    },
    toPay() {
      this.dialogVisible = false
      this.$router.push({ path: '/my/admission', query: { active: 'admission_xfjn' } })
    }
  },
  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>
