<template>
  <div class="upload-box">
    <card style="margin:0 20px;" v-if="!isLook">
      <v-form
        ref="form"
        :model="formModel"
        :fields="fields"
        @submit="onSubmit"
        @fileStatus="fileStatus"
      >
        <div class="btn-box">
          <input
            type="button"
            value="确认提交"
            class="submit-button"
            @click="handleSubmit"
          />
          <input
            type="button"
            value="撤销"
            class="submit-button"
            @click="revoke"
          />
        </div>
      </v-form>
    </card>
    <template v-else>
      <div class="look-form">
        <div class="form-item">
          <div class="label">1,已签字确认的个人资料页</div>
          <div class="up-box">
            <img :src="formModel.apply" alt="" @click="imgViewShow(formModel.apply)">
          </div>
        </div>
      </div>
      <div class="look-form">
        <div class="form-item">
          <div class="label">2,个人护照信息页</div>
          <div class="up-box">
            <img :src="formModel.passport" alt="" @click="imgViewShow(formModel.passport)">
          </div>
        </div>
      </div>
      <div class="look-form">
        <div class="form-item">
          <div class="label">3,学位证书页</div>
          <div class="up-box">
            <img :src="formModel.degree" alt="" @click="imgViewShow(formModel.degree)">
          </div>
        </div>
      </div>
      <div class="status">
        审核状态：{{ currentStu }}
      </div>
      <div class="status" v-if="auditStatus == 0">
        审核备注：{{ approveRemark }}
      </div>
      <div class="status" v-if="auditStatus == 1 && ispay == 0">
        三级认证费用：￥2300元
      </div>
      <div class="btn-box">
        <input @click="orderPays" type="button" value="支付" class="submit-button" v-if="auditStatus == 1 && ispay == 0">
        <template v-if="auditStatus == -1">
          <input @click="goForm" type="button" value="修改" class="submit-button">
          <input @click="revoke" type="button" value="撤销" class="submit-button">
        </template>
        <template v-if="auditStatus == 0">
          <input @click="goForm" type="button" value="修改" class="submit-button">
        </template>
      </div>
    </template>
    <h5-pay :productId="productId" ref="h5pay"></h5-pay>
    <van-image-preview v-model="imagePreview" :images="imgView"></van-image-preview>
  </div>
</template>

<script>
import h5Pay from './buy/components/h5Pay.vue'
import Card from '@/components/Card'
import VForm from '@/components/attestationFormUpload'
import { Toast, Dialog, ImagePreview } from 'vant'
import * as api from '@/api/attestation'

export default {
  metaInfo() {
    return {
      title: this.isLook ? '查看信息' : '上传'
    }
  },
  name: 'submitStudent',
  components: {
    Card,
    VForm,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [ImagePreview.name]: ImagePreview,
    h5Pay
  },
  data() {
    return {
      imagePreview: false,
      imgView: [],
      productId: '6734697826573352960',
      approveRemark: '',
      auditStatus: 2,
      ispay: false,
      isLook: false,
      formModel: { apply: '', passport: '', degree:''},
      fields: [
        {
          fieldType: 'uploader',
          name: 'apply',
          label: '1,已签字确认的个人资料页',
          placeholder: '请上传照片',
          examples: 'https://zws-imgs-pub.ezijing.com/static/public/ec3457296e311c4c1917b5febc2c1a7e.png'
        },
        {
          fieldType: 'uploader',
          name: 'passport',
          label: '2,个人护照信息页',
          placeholder: '请上传照片',
          examples: 'https://zws-imgs-pub.ezijing.com/static/public/d74236d102ec6be2aeb5ab49a57cd7e5.png'
        },
        {
          fieldType: 'uploader',
          name: 'degree',
          label: '3,学位证书页',
          placeholder: '请上传照片',
          examples: 'https://zws-imgs-pub.ezijing.com/static/public/356814af81ac3ce50ab9501dfa05f481.png'
        }
      ],
      type: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(route) {
        this.formModel = Object.assign(this.formModel, route.query)
      }
    }
  },
  computed: {
    currentStu() {
      const stu = parseInt(this.auditStatus)
      let cont = ''
      switch(stu) {
        case -1:
          cont = '待审核'
          break
        case 0:
          cont = '审核驳回'
          break
        case 1:
          if (parseInt(this.ispay) === 0) {
            cont = '审核通过'
          } else {
            cont = '已完成'
          }
          break
      }
      return cont
    }
  },
  mounted() {
    if (this.$route.query.edit) {
      this.getCertificationDetail()
    }
  },
  methods: {
    imgViewShow(img) {
      this.imgView = [img]
      this.imagePreview = true
    },
    orderPays() {
      this.$refs.h5pay.pay()
    },
    goForm() {
      this.isLook = false
    },
    getCertificationDetail() {
      api.getAttestationDetail(this.$route.query.id).then(response => {
        // formModel: { apply: '', passport: '', degree:''}
        if (response.apply !== '') {
          this.formModel.apply = response.apply
          this.formModel.passport = response.passport
          this.formModel.degree = response.degree
          this.auditStatus = response.approve_status
          this.ispay = response.pay
          this.approveRemark = response.approve_remark
          if (this.$route.query.look) {
            this.isLook = true
          }
        }
      })
    },
    revoke() {
      // 撤销
      Dialog.confirm({
        message: '你确定要撤回申请吗？撤回后，需要重新填写资料提交申请。'
      }).then(() => {
        if (this.$route.query.id) {
          api.revoke(this.$route.query.id, { status: -2 }).then(response => {
            if (response.success) {
              Toast('撤销成功')
              window.sessionStorage.removeItem('dataId')
              window.sessionStorage.removeItem('dataUrl')
              setTimeout(() => {
                this.$router.replace({
                  path: '/attestation'
                })
              }, 1000)
            } else {
              Toast('撤销失败')
            }
          })
          .catch(() => {
            Toast('撤销失败')
          })
        } else {
          this.$router.replace({
            path: '/attestation'
          })
        }
      })
    },
    fileStatus(state) {
      this.type = state
    },
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit() {
      const ruleForm = this.$refs.form.ruleForm
      const param = {}
      param.apply = ruleForm.apply
      param.passport = ruleForm.passport
      param.degree = ruleForm.degree
      param.type = 2
      console.log(ruleForm)
      for (let i = 0; i < Object.values(ruleForm).length; i++) {
        if (Object.values(ruleForm)[i] === '') {
          Toast('上传资料不完整。请将资料补充完整，再确认提交')
          return
        }
      }
      api.addSubmitStudent(this.$route.query.id, param).then(response => {
        if (response.success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '上传成功'
            })
            .then(() => { //ganniniangde
              // queding
              this.isLook = true
              this.getCertificationDetail()
            })
        } else {
          this.$toast(response.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.status{
  text-align: center;
  margin: 10px 20px;
}
.upload-box{
  padding-top: 20px;
}
.btn-box{
  display: flex;
  justify-content: space-around;
  .submit-button{
    width: 40%;
  }
}
.look-form{
  margin: 0px 20px;
  .form-item{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: .5px solid #ccc;
    .up-box{
      display: flex;
      padding-top: 10px;
      margin-bottom: 10px;
      height: 90px;
      img{
        width: 50%;
        height: 100%;
        display: block;
      }
    }
  }
}
.btn-box{
  margin-top: 30px;
}
</style>
