<template>
  <app-layout>
    <vue-form
      :menus="menus"
      :default-active="currentActive"
      :tab-active="tabActive"
      @page-change="handlePageChange"
      @tab-change="handleTabChange"
      @success="handleSuccess"
      @error="handleError"
      @back="$router.push('/my/account')"
      @prev="handlePrev"
      @next="handleNext"
      v-if="detail"
    >
      <template #aside-append>
        <div class="aside-preview" @click="dialogVisible = true" v-if="visible">预览全部</div>
        <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 === 'application_pay'">
        <app-pay />
      </template>
    </vue-form>
    <el-dialog title="预览全部" :visible.sync="dialogVisible" width="790px" class="dialog-preview">
      <app-preview :hasEdit="true" @edit="handlePreviewEdit" v-if="dialogVisible" />
    </el-dialog>
    <app-complete v-model="completeVisible"></app-complete>
  </app-layout>
</template>

<script>
import AppLayout from '../layout.vue'
import getMenu from './form'
import AppPay from './pay.vue'
import AppPreview from './preview.vue'
import AppComplete from './complete.vue'

import * as api from '@/api/my'

export default {
  components: { AppLayout, AppPay, AppPreview, AppComplete },
  data() {
    const menus = getMenu(this)
    return {
      menus: [menus],
      currentActive: 'application_info',
      tabActive: 'application_info_profile',
      dialogVisible: false,
      detail: null,
      completeVisible: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        const { query = {} } = route
        this.currentActive = query.active || 'application_info'
        this.tabActive = query.tab || 'application_info_profile'
      }
    }
  },
  computed: {
    visible() {
      return this.currentActive !== 'application_info' || this.tabActive !== 'application_info_first'
    }
  },
  methods: {
    // 获取报名信息
    getApplication() {
      api.getApplication().then(response => {
        const { data, error, message } = response
        if (error.toString() === '0') {
          this.detail = data
          if (
            !data.progress.FILLING.attachments ||
            data.progress.FILLING.attachments.missed_required_list.ID_CARD_PHOTO
          ) {
            this.tabActive = 'application_info_first'
          }
          const { submission_stage: submissionStage = 'FILLING' } = data.material
          if (submissionStage !== 'FILLING') {
            this.menus[0].children.forEach(item => {
              if (item.id === 'application_pay') {
                item.show = true
              }
            })
          }
        } else {
          this.$message.error(message)
        }
      })
    },
    handlePageChange(value) {
      this.currentActive = value
      this.$router.push({ path: this.$route.path, query: { active: value } })
    },
    handleTabChange(value) {
      this.tabActive = value
      const query = Object.assign({}, this.$route.query, { tab: value })
      this.$router.push({ query })
    },
    handleSuccess(data) {
      console.log('提交成功了', data)
      this.$message({ type: 'success', 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)
    },
    handlePreviewEdit(to) {
      this.$router.push(to)
      this.dialogVisible = false
    },
    // 更换推荐人
    changeProvider(data) {
      api.updateProvider(data.id, data).then(response => {
        const { error, message } = response
        if (error.toString() === '0') {
          this.$message({ type: 'success', message })
        } else {
          this.$message.error(message)
        }
      })
    },
    // 再次邀请推荐
    sendToProvider(data) {
      api.sendToProvider(data.id).then(response => {
        const { error, message } = response
        if (error.toString() === '0') {
          this.$message({ type: 'success', message })
        } else {
          this.$message.error(message)
        }
      })
    }
  },
  beforeMount() {
    this.getApplication()
  }
}
</script>
<style lang="scss" scoped>
::v-deep .aside-preview {
  margin-top: -20px;
  padding-left: 64px;
  font-size: 14px;
  font-weight: 700;
  line-height: 44px;
  color: #222;
  cursor: pointer;
}
.dialog-preview {
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}
::v-deep .el-form--label-top .el-form-item__label {
  line-height: 24px;
}
</style>
