<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <backBar1/>
    <div class="container">
      <div class="title">
        <!-- 提交身份证明 -->
        {{ $t('abnormal.l29') }}
       </div>
      <el-form class="form" :rules="rules" :model="form" ref="form">
        <div class="label">
          <!-- 证件类型 -->
          {{$t('auth.l7')}}
        </div>
        <el-form-item prop="type">
          <el-select v-model="form.type" :placeholder="$t('auth.l10')">
            <el-option :label="$t('auth.l11')" :value="1"></el-option>
            <el-option :label="$t('auth.l12')" :value="2"></el-option>
            <el-option :label="$t('auth.l13')" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <div class="label">
          <!-- 姓名 -->
          {{$t('auth.l5')}}
        </div>
        <el-form-item prop="name">
          <!-- 请输入姓名 -->
          <el-input :placeholder="$t('auth.l33')" v-model="form.name" />
        </el-form-item>
        <div class="label">
          <!-- 证件号码 -->
          {{$t('auth.l8')}}
        </div>
        <el-form-item prop="idno">
          <!-- 请输入证件号码 -->
          <el-input :placeholder="$t('auth.l9')" v-model="form.idno" />
        </el-form-item>
        <div class="sub">
          <!-- 上传证件照片 -->
          {{ $t('abnormal.l30') }}
        </div>
        <el-form-item prop="file1">
          <div class="avatar-uploader flex">
            <van-uploader :after-read="(file) => afterRead(file, 'file1')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.file1"
                :src="form.file1"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
                <div class="text">
                  <!-- 正面照 -->
                  {{ $t('abnormal.l31') }}
                </div>
              </div>
            </van-uploader>
            <van-uploader :after-read="(file) => afterRead(file, 'file2')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.file2"
                :src="form.file2"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
                <div class="text">
                  <!-- 背面照 -->
                  {{ $t('abnormal.l32') }}
                </div>
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="sub">
          <!-- 上传持件照 -->
          {{ $t('abnormal.l33') }}
        </div>
        <div class="tip">
          <!-- 请确保面部及证件信息清晰完整 -->
          {{ $t('abnormal.l34') }}
        </div>
        <el-form-item prop="file3">
          <div class="avatar-uploader flex">
            <van-uploader :after-read="(file) => afterRead(file, 'file3')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.file3"
                :src="form.file3"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="sub">
          <!-- 上传持证自拍影片 -->
          {{ $t('abnormal.l35') }}
        </div>
        <div class="tip1">
          <!-- 影片需本人手持证件照且陈述一下内容： “今天是XX年X月X日，本人为UID为XXXXXXX的极度证券账号申請认证解封，本人在极度证券平台注册实名为XXX的账号，现确认该账号为本人所有，本人承诺清楚衍生品交易的相关风险，且在注册时已仔细阅读并完全同意极度证券所有用户协议及交易条款。” -->
          {{ $t('abnormal.l36').replace('{p}', $parseTime(new Date().getTime(), `{y}${$t('account.l129')}{m}${$t('common.l31')}{d}${$t('common.l29')}`)).replace('{p1}', userInfo.uid).replace('{p2}', userInfo.identity_name) }}
        </div>
        <el-form-item prop="film">
          <div class="avatar-uploader flex">
            <div class="van-uploader__input-wrapper" v-if="form.film">
              <div class="uploader-text flex">
                <van-icon name="description" />
                <div class="text">
                  {{ form.film }}
                </div>
              </div>
            </div>
            <van-uploader accept="video/*" :after-read="(file) => afterRead1(file, 'film')" result-type="file">
              <div class="uploader-text flex">
                <van-loading v-if="filmloading" />
                <van-icon v-else name="plus" />
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="title1">
          <!-- 提交资金来源证明 -->
          {{ $t('abnormal.l37') }}
        </div>
        <div class="tip1">
          <!-- 请上传近半年银行流水截图或存取款来源地址所在平台或钱包的交易详情截图（包括地址和金额） -->
          {{ $t('abnormal.l38') }}
        </div>
        <el-form-item prop="source">
          <div class="avatar-uploader avatar-uploader1 flex">
            <van-uploader :after-read="(file) => afterRead(file, 'source')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.source"
                :src="form.source"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="title1">
          <!-- 就业验证或投资证明文件 -->
          {{ $t('abnormal.l39') }}
        </div>
        <div class="tip1">
          <!-- 请提供任何可以验证您目前就业状况或投资活动的证明文件照片或截图。这可能包括就业验证信、薪资单、银行对账单、投资合约或任何其他能证明您财务状况的相关资料。 -->
          {{ $t('abnormal.l40') }}
        </div>
        <el-form-item prop="verification">
          <div class="avatar-uploader avatar-uploader1 flex">
            <van-uploader :after-read="(file) => afterRead(file, 'verification1')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.verification1"
                :src="form.verification1"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
            <van-uploader :after-read="(file) => afterRead(file, 'verification2')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.verification2"
                :src="form.verification2"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
            <van-uploader :after-read="(file) => afterRead(file, 'verification3')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.verification3"
                :src="form.verification3"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="title1">
          <!-- 确认住址信息 -->
          {{ $t('abnormal.l41') }}
        </div>
        <div class="label">
          <!-- 国家/地区 -->
          {{$t('auth.l3')}}
        </div>
        <el-form-item class="country-item" prop="country">
          <div class="country-btn flex" @click="countryShow">
            <div class="value" v-if="countryObj.name">{{ countryObj.name }}</div>
            <div class="place value" v-else>{{ $t('auth.l6') }}</div>
            <i class="el-icon-arrow-down"></i>
          </div>
        </el-form-item>
        <div class="label">
          <!-- 城市 -->
          {{ $t('abnormal.l42') }}
        </div>
        <el-form-item prop="city">
          <!-- 请输入您所在的城市 -->
          <el-input :placeholder="$t('abnormal.l43')" v-model="form.city" />
        </el-form-item>
        <div class="label">
          <!-- 详细住址 -->
          {{ $t('abnormal.l44') }}
        </div>
        <el-form-item prop="address">
          <!-- 请输入您的详细住址 -->
          <el-input :placeholder="$t('abnormal.l45')" v-model="form.address" />
        </el-form-item>
        <div class="sub">
          <!-- 请上传住址证明文件截图或照片 -->
          {{ $t('abnormal.l46') }}
        </div>
        <el-form-item prop="address_file">
          <div class="avatar-uploader flex">
            <van-uploader :after-read="(file) => afterRead(file, 'address_file')" result-type="file">
              <van-image
                width="98"
                height="98"
                fit="contain"
                v-if="form.address_file"
                :src="form.address_file"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div v-else class="uploader-text flex">
                <van-icon name="plus" />
              </div>
            </van-uploader>
          </div>
        </el-form-item>
        <div class="title1">
          <!-- 请输入您的联系方式以及确认签名 -->
          {{ $t('abnormal.l47') }}
        </div>
        <div class="label">
          <!-- 手机号码 -->
          {{$t('login.l-p')}}
        </div>
        <el-form-item prop="phone">
          <div class="flex phone-box">
            <div class="area-box flex" @click="phoneShow">
              <div class="area">+{{ phoneObj.area_code }}</div>
              <i class="el-icon-arrow-down"></i>
            </div>
            <!-- 请输入手机号 -->
            <el-input :placeholder="$t('setting.l37')" v-model="form.phone" />
          </div>
        </el-form-item>
        <div class="label">
          <!-- 邮件地址 -->
          {{$t('abnormal.l48')}}
        </div>
        <el-form-item prop="email">
          <!-- 请输入邮件地址 -->
          <el-input :placeholder="$t('abnormal.l49')" v-model="form.email" />
        </el-form-item>
        <div class="label">
          <!-- 本人承诺上述信息真实有效，特此签名确认 -->
          {{$t('abnormal.l50')}}
        </div>
        <el-form-item prop="signature">
          <div class="country-item" v-if="!inputShow">
            <div class="box flex" @click="inputShow = true">
              <div>
                <!-- 请点击输入与您身份认证一致的姓名 -->
                {{ $t('statement.l16') }}
              </div>
            </div>
          </div>
          <!-- 请输入与您身份认证一致的姓名 -->
          <el-input v-if="inputShow" :placeholder="$t('statement.l18')" v-model="form.signature"/>
        </el-form-item>
      </el-form>
      <div class="btn flex" @click="submitClick">
        <div>
          <!-- 提交验证资料 -->
          {{$t('abnormal.l51')}}
        </div>
      </div>
    </div>
    <selectCountry @list="getList" :val="selectPhoneType == 1 ? countryObj : phoneObj" ref="country" @back="selectCountryBack"/>
  </div>
</template>
<script>
import backBar1 from "@/components/backBar1";
import axios from 'axios'
import selectCountry from "@/components/selectCountry";
import { insertWorkOrder } from "@/api/work";
export default {
  components: {
    backBar1,
    selectCountry
  },
  data () {
    var emailPass = (rule, value, callback) => {
      var emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (value === '') {
        callback(new Error(this.$t('login.empty')))
      }
      if (!emailReg.test(value)) {
        // 邮箱格式错误
        callback(new Error(this.$t('login.email-reg')))
      }
      callback()
    }
    var signaturePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('login.empty')))
      }
      if (value.trim() != this.userInfo.identity_name) {
        // 姓名输入不一致
        callback(new Error(this.$t('statement.l19')))
      }
      callback()
    }
    var filePass = (rule, value, callback) => {
      if (rule.field === 'file1' && (this.form.file1 === '' || this.form.file2 === '')) {
        // 请上传
        callback(new Error(this.$t('abnormal.l28')))
        return
      }
      if (rule.field === 'verification' && (this.form.verification1 === '' && this.form.verification2 === '' && this.form.verification3 === '')) {
        // 请上传
        callback(new Error(this.$t('abnormal.l28')))
        return
      }
      if (value === '') {
        callback(new Error(this.$t('abnormal.l28')))
      }
      callback()
    }
    return {
      form: {
        type: 1,
        name: '',
        idno: '',
        file1: '',
        file2: '',
        file3: '',
        film: '',
        source: '',
        verification1: '',
        verification2: '',
        verification3: '',
        country: '',
        city: '',
        address: '',
        address_file: '',
        phone: '',
        email: '',
        signature: '',
        timestamp: ''
      },
      list: [],
      filmloading: false,
      inputShow: false,
      selectPhoneType: 1,
      phoneObj: {
        "name": "China (中国)",
        "code": "cn",
        "area_code": "86"
      },
      rules: {
        name: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        idno: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        country: [{ required: true, message: this.$t('common.l51'), trigger: 'change' }],
        city: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        address: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        phone: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        email: [{ validator: emailPass, trigger: 'blur' }],
        signature: [{ validator: signaturePass, trigger: 'blur' }],
        file1: [{ validator: filePass, trigger: 'blur' }],
        file3: [{ validator: filePass, trigger: 'blur' }],
        film: [{ validator: filePass, trigger: 'blur' }],
        source: [{ validator: filePass, trigger: 'blur' }],
        verification: [{ validator: filePass, trigger: 'blur' }],
        address_file: [{ validator: filePass, trigger: 'blur' }],
      }
    }
  },
  computed: {
    countryObj() {
      var obj = {}
      this.list.forEach(item => {
        if (item.code == this.form.country) {
          obj = item
        }
      })
      return obj
    }
  },
  methods: {
    submitClick() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false;
        var data = {
          ...this.form,
          phone: this.phoneObj.area_code + this.form.phone,
          timestamp: new Date().getTime()
        }
        this.insertWorkOrder(data)
      })
    },
    insertWorkOrder(data) {
      this.fullscreenLoading = true
      insertWorkOrder({
        type: 100,
        content: JSON.stringify(data),
        title: '',
        file: '',
      }).then(res => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.back()
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    countryShow() {
      this.selectPhoneType = 1
      this.$refs['country'].reset()
    },
    phoneShow() {
      this.selectPhoneType = 2
      this.$refs['country'].reset()
    },
    selectCountryBack(val) {
      if (this.selectPhoneType == 1) {
        this.form.country = val.code
        this.$refs['form'].validateField('country')
      } else {
        this.phoneObj = val
      }
    },
    getList(list) {
      this.list = list
    },
    afterRead(file, key) {
      if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.file.type) == -1) {
        // 请上传 jpg/jpeg/png 格式图片
        this.$toast(this.$t('ajax.l5'));
        return false;
      }
      this.upload(file.file, key)
    },
    afterRead1(file, key) {
      this[key+'loading'] = true
      this.upload(file.file, key)
    },
    upload(file, key) {
      const formData = new FormData();
      formData.append("file", file);
      axios.post(this.$uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          var file = res.data
          if (file.msg != 'ok') {
            this.$notify({
              message: file.msg || this.$t('fund.l83'),
              type: 'danger'
            });
            return
          }
          this.form[key] = file.data
          if (key == 'file1' || key == 'file2') {
            this.$refs['form'].validateField('file1')
            return
          }
          if (key == 'verification1' || key == 'verification2' || key == 'verification3') {
            this.$refs['form'].validateField('verification')
            return
          }
          this.$refs['form'].validateField(key)
        })
        .catch((err) => {
          this.$notify({
            // message: '上传失败',
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        }).finally(() => {
          this[key+'loading'] = false
        });
    },
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 10px 14px 20px 16px;
}
.title {
  font-weight: 600;
  font-size: 20px;
}
.title1 {
  font-weight: 600;
  font-size: 20px;
  padding-top: 6px;
  &+.label {
    padding-top: 20px;
  }
}
.sub {
  font-weight: 600;
  padding-top: 6px;
}
.form {
  padding-top: 20px;
  padding-bottom: 6px;
  .label {
    margin-bottom: 10px;
  }
  .el-form-item {
    margin-bottom: 24px;
  }
  .tip {
    font-size: 12px;
    color: #888888;
    padding-top: 10px;
  }
  .tip1 {
    font-size: 12px;
    color: #888888;
    line-height: 20px;
    padding-top: 6px;
  }
}
.avatar-uploader {
  padding-top: 14px;
  column-gap: 22px;
  flex-wrap: wrap;
  row-gap: 16px;
  &.avatar-uploader {
    padding-top: 10px;
  }
  .van-image {
    display: block
  }
  .van-uploader {
    display: block;
  }
  .uploader-text {
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #888888;
    padding: 0 4px;
    line-height: 1;
    .van-icon {
      font-size: 22px;
    }
    .text {
      padding-top: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }
}
.country-item {
  padding-right: 9px;
}
.country-btn {
  background-color: #F6F6F6;
  border-radius: 8px;
  height: 50px;
  font-size: 16px;
  padding-left: 15px;
  padding-right: 8px;
  cursor: pointer;
  .value {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .place {
    color:#B6B6B6;
  }
  .el-icon-arrow-down {
    font-size: 18px;
    color: #888888;
  }
}
.phone-box {
  column-gap: 6px;
  .area-box {
    background-color: #F6F6F6;
    border-radius: 8px;
    height: 50px;
    font-size: 16px;
    min-width: 102px;
    column-gap: 14px;
    justify-content: center;
    font-size: 16px;
    padding: 0 4px;
    cursor: pointer;
  }
  .area {
    padding-right: 14px;
    line-height: 22px;
    border-right: 1px solid #B6B6B6;
  }
  .el-icon-arrow-down {
    font-size: 18px;
  }
  .el-input {
    flex: 1;
    min-width: 0px;
  }
}
.box {
  background-color: #F6F6F6;
  justify-content: center;
  padding: 0 12px;
  color: #888888;
  cursor: pointer;
  height: 118px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.2;
}
.btn {
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #FFFFFF;
  height: 50px;
  justify-content: center;
  background-color: #000;
}
::v-deep .container{
  .el-input,.el-select {
    display: block;
    padding-right: 9px;
  }
  .el-select .el-input {
    padding-right: 0;
    .el-select__caret {
      font-size: 18px;
      color: #888888;
    }
  }
  .el-input__inner {
    border: none;
    background-color: #F6F6F6;
    border-radius: 8px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    &::-webkit-input-placeholder{
      color:#B6B6B6;
    }
    &::-moz-placeholder{
      color:#B6B6B6;
    }
    &:-moz-placeholder{
      color:#B6B6B6;
    }
    &:-ms-input-placeholder{
      color:#B6B6B6;
    }
  }
  .van-uploader__input-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    border: 1px dashed #888888;
  }
}
</style>