<template>
  <div>
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <div class="tips">注：以下信息请用英文大写字母填写，提交后请下载打印，签字确认信息后上传图片。</div>
      <!-- 通过 pattern 进行正则校验 -->
      <div class="item">
        <p class="txt">姓名 Name<span> (请保证与护照名字完全一致，包括名字顺序和标点符号)</span></p>
        <van-field
          class="bor"
          v-model="form.name"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">性别 Gender</p>
        <van-field
          @click="seleIsShow = true"
          disabled
          class="bor"
          :value="form.gender == 1 ? '男 MALE' : '女 FEMALE'"
          name="pattern"
          placeholder=""
        />
      </div>
      <div class="item">
        <p class="txt">出生地点 Place of birth</p>
        <van-field
          class="bor"
          v-model="form.birth_place"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">出生日期 Date of birth (yyyy-mm-dd)</p>
        <van-field
          @click="seleDateShow = true"
          class="bor"
          disabled
          v-model="form.birth_date"
          name="validator"
          placeholder="请选择"
        />
      </div>
      <div class="item">
        <p class="txt">国籍 Nationality</p>
        <van-field
          class="bor"
          v-model="form.nationality"
          name="pattern"
          placeholder="请填写"
          :rules="[{ pattern, message: '输入有误，请检查并重新填写' }]"
        />
      </div>
      <div class="item">
        <p class="txt">职业 Occupatio</p>
        <van-field
          class="bor"
          v-model="form.occupatio"
          name="pattern"
          placeholder="请填写"
          :rules="[{ pattern, message: '输入有误，请检查并重新填写' }]"
        />
      </div>
      <div class="item">
        <p class="txt">护照号码 Passport Number</p>
        <van-field
          class="bor"
          v-model="form.passport_number"
          placeholder="请填写"
          :rules="[{ pattern, message: '请填写正确的护照号码' }]"
        />
      </div>
      <div class="item">
        <p class="txt">家庭住址 Home address（可填写一个熟悉的美国家庭/酒店地址）</p>
        <van-field
          class="bor"
          v-model="form.address"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">电子邮箱 E-mail address</p>
        <van-field
          class="bor"
          v-model="form.email"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">住宅电话 Home phone number（请填写美国电话号）</p>
        <van-field
          class="bor"
          type="number"
          v-model="form.telephone"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">手机 Mobile phone number （请填写美国任意一手机号）</p>
        <van-field
          class="bor"
          type="number"
          v-model="form.mobile"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="tips">注：以下信息作为为您邮寄三级认证资料使用，请中文填写。</div>
      <div class="item">
        <p class="txt">您在FMBA项目中所属班级</p>
        <van-field
          class="bor"
          v-model="form.class"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">收件人姓名</p>
        <van-field
          class="bor"
          v-model="form.contact_name"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">联系人手机号码（填写国内手机号）</p>
        <van-field
          type="number"
          class="bor"
          v-model="form.contact_mobile"
          placeholder="请填写"
        />
      </div>
      <div class="item">
        <p class="txt">收件详细地址</p>
        <van-field
          class="bor"
          v-model="form.contact_address"
          name="pattern"
          placeholder="请填写"
        />
      </div>
      <div class="btn-box">
        <van-button native-type="submit" class="b btn-style">生成预览</van-button>
        <!-- <van-button class="b" @click="revokes">撤销</van-button> -->
        <div class="b btn-style" @click="revokes">撤销</div>
      </div>
    </van-form>
    <div class="sele" v-if="seleIsShow">
      <van-picker
        class="pic"
        title="标题"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="seleIsShow = false"
      />
    </div>
    <div class="get-date" v-if="seleDateShow">
      <van-datetime-picker
        class="pop"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDate"
        @cancel="seleDateShow = false"
      />
    </div>
  </div>
</template>
<script>
import * as api from '@/api/attestation'
import { Form, Button, Dialog, Toast, Picker, DatetimePicker } from 'vant'
export default {
  metaInfo: {
    title: '三级认证个人信息填写'
  },
  components: {
    [Form.name]: Form,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      seleDateShow: false,
      minDate: new Date(1940, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      seleIsShow: false,
      columns: ['男 MALE', '女 FEMALE'],
      form: {
        name: '',
        gender: '1',
        birth_place: '',
        birth_date: '',
        nationality: '',
        occupatio: '',
        passport_number: '',
        address: '',
        email: '',
        telephone: '',
        mobile: '',
        class: '',
        contact_name: '',
        contact_mobile: '',
        contact_address: ''
      },
      value1: '',
      value2: '',
      value3: '',
      pattern: /^[A-Z0-9-\s]+$/
    }
  },
  created() {
    if (this.$route.query.edit || this.$route.query.back) {
      this.getCertificationDetail()
    }
  },
  methods: {
    confirmDate(val) {
      const date = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
      this.form.birth_date = date
      this.seleDateShow = false
    },
    getCertificationDetail() {
      api.getAttestationDetail(this.$route.query.id).then(response => {
        this.form = response
      })
    },
    onConfirm(value, index) {
      this.form.gender = index + 1
      this.seleIsShow = false
    },
    onCancel() {
      Toast('取消');
    },
    onSubmit() {
      if (!this.$route.query.edit) {
        api.submitInfo(this.form).then(response => {
          if (response.success) {
            window.sessionStorage.dataUrl = response.url
            window.sessionStorage.dataId = response.id
            this.$router.replace({
              path: '/attestation/printing',
              query: {
                id: response.id
              }
            })
          } else {
            Toast(response.message.occupatio[0])
          }
        })
      } else {
        const param = this.form
        param.type = 1
        api.addSubmitStudent(this.$route.query.id, param).then(response => {
          if (response.success) {
            window.sessionStorage.dataUrl = response.url
            window.sessionStorage.dataId = response.id
            this.$router.replace({
              path: '/attestation/printing',
              query: {
                id: this.$route.query.id,
                edit: 1
              }
            })
          } else {
            Toast(response.message.occupatio[0])
          }
        })
      }
    },
    getLetterMsg(value) {
      if (value.replace(/\s/g, '') === '') {
        return '请填写~'
      } else {
        return '请用英文大写填写资料'
      }
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /^\d{4}-\d{1,2}-\d{1,2}$/.test(val)
    },
    onFailed(errorInfo) {
      Toast('请完善信息')
      console.log('failed', errorInfo)
    },
    revokes() {
      Dialog.confirm({
        message: '你确定要撤回申请吗？撤回后，需要重新填写资料提交申请。'
      }).then(() => {
        const id = this.$route.query.id
        if (id) {
          api.revoke(id, { status: -2 }).then(response => {
            if (response.success) {
              Toast('撤销成功')
              window.sessionStorage.removeItem('dataId')
              window.sessionStorage.removeItem('dataUrl')
              setTimeout(() => {
                this.$router.replace({
                  path: '/attestation'
                })
                // this.$router.go(-1)
              }, 1000)
            }
          })
        } else {
          this.$router.replace({
            path: '/attestation'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.get-date{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.5);
  .pop{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.sele{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.5);
  .pic{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.tips{
  padding: .2rem;
  color: #ee0a24;
}
.item{
  border-bottom: .01rem solid #ccc;
  margin-bottom: 12px;
  .txt{
    padding-left: 16px;
    color: #000;
    span{
      color: #ee0a24;
    }
  }
}
.btn-box{
  padding: .3rem 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  .revokes{
    width: 1.2rem;
    color: #323233;
    background-color: #fff;
    border: 1px solid #ebedf0;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 2px;
    text-align: center;
    line-height: 44px;
  }
  .b{
    width: 1.2rem;
  }
}
.btn-style{
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #af1b40;
  border-radius: 20px;
  cursor: pointer;
  border: none;
}
</style>
