<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 身份认证 -->
    <BackBar :title="$t('home.l22')"></BackBar>
    <div class="container" v-if="step == 1">
      <div class="info-box" v-if="identity_status == 2">
        <div class="flex">
          <img class="icon" src="/img/icon/warning.png" alt="极度证券">
          <!-- 身份认证审核中 -->
          <div class="title">{{$t('auth.l31')}}</div>
        </div>
      </div>
      <div class="info-box" v-else>
        <div class="flex">
          <img class="icon" src="/img/icon/warning.png" alt="极度证券">
          <div class="title">
            <!-- 完善个人信息 -->
            {{$t('auth.l2')}}
          </div>
        </div>
        <div class="tip">
          <!-- 为了提升您的账户安全,请完善一下信息 -->
          {{$t('auth.l4')}}
        </div>
      </div>
      <el-form class="form" :rules="rules" :model="user" ref="form">
        <div class="label">
          <!-- 国家/地区 -->
          {{$t('auth.l3')}}
        </div>
        <el-form-item prop="country">
          <div class="country-btn" @click="countryShow">
            <div>{{ phoneCountry.name ? phoneCountry.name : $t('auth.l6') }}</div>
            <span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span></span>
          </div>
        </el-form-item>
        <div class="label">
          <!-- 姓名 -->
          {{$t('auth.l5')}}
        </div>
        <el-form-item prop="name">
          <!-- 请输入姓名 -->
          <el-input :disabled="identity_status == 2" :placeholder="$t('auth.l33')" size="large" v-model="user.name" clearable />
        </el-form-item>
        <div class="label">
          <!-- 证件类型 -->
          {{$t('auth.l7')}}
        </div>
        <el-form-item prop="type">
          <el-select :disabled="identity_status == 2" v-model="user.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.l8')}}
        </div>
        <el-form-item prop="code">
          <!-- 请输入证件号码 -->
          <el-input :disabled="identity_status == 2" :placeholder="$t('auth.l9')" size="large" v-model="user.code" clearable />
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <div v-if="identity_status == 2" class="fixed">
          <!-- 审核中 -->
          {{$t('ajax.151')}}
        </div>
        <div v-else class="fixed" @click="submitClick">
          <!-- 下一步 -->
          {{$t('common.l49')}}
        </div>
      </div>
    </div>
    <div class="container" style="padding: 17px 17px 0;" v-if="step == 2">
      <el-form class="form" :rules="rules" :model="user" ref="form">
        <div class="label">
          <!-- 证件照 -->
          {{$t('auth.l14')}}
        </div>
        <div class="avatar-uploader">
          <van-uploader :disabled="identity_status == 2" :after-read="afterRead" result-type="file">
            <van-image
              width="342"
              height="208"
              fit="contain"
              :src="file1 || '/img/auth/bg1.png'"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </van-uploader>
          <div class="up-tip">
            <!-- *请上传证件正面照 -->
            *{{$t('auth.l18')}}
          </div>
        </div>
        <div class="avatar-uploader" v-if="user.type == 1">
          <van-uploader :disabled="identity_status == 2" :after-read="afterRead1" result-type="file">
            <van-image
              width="342"
              height="208"
              fit="contain"
              :src="file2 || '/img/auth/bg2.png'"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </van-uploader>
          <div class="up-tip">
            <!-- *请上传证件反面照 -->
            *{{$t('auth.l19')}}
          </div>
        </div>
        <!-- <div class="avatar-uploader">
          <van-uploader :disabled="identity_status == 2" :after-read="afterRead2" result-type="file">
            <van-image
              width="342"
              height="208"
              fit="contain"
              :src="file3 || '/img/auth/bg3.png'"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </van-uploader>
          <div class="up-tip">
            *请上传手持证件正面照
            *{{$t('auth.l17')}}
          </div>
        </div> -->
      </el-form>
      <div class="info-box1">
        <div class="flex">
          <img class="icon" src="/img/icon/warning.png" alt="极度证券">
          <div class="title">
            <!-- 上传要求 -->
            {{$t('auth.l15')}}
          </div>
        </div>
        <div class="tip">
          <!-- 1，必须能够识别身份，信息 ，证件号码和姓名 -->
          {{$t('auth.l16')}}
        </div>
        <div class="tip">
          <!-- 2，照片内容真实有效，不得做任何修改 -->
          {{$t('auth.l20')}}
        </div>
        <div class="tip">
          <!-- 3，支持jpg/jpeg/png -->
          {{$t('auth.l21')}}
        </div>
      </div>
      
      <div class="btn-box1">
        <div class="tip1">
          <!-- 提交认证之前,请务必仔细阅读以下协议文书 -->
          {{$t('auth.l22')}}
        </div>
        <div class="router-box flex">
          <div class="href" @click="rulePopShow(5)">
            <!-- 极度证券用户协议 -->
            {{$t('auth.l23')}}
          </div>
          <div class="href" @click="rulePopShow(7)">
            <!-- 法律声明 -->
            {{$t('auth.l25')}}
          </div>
          <div class="href" @click="rulePopShow(9)">
            <!-- 风险披露 -->
            {{$t('auth.l26')}}
          </div>
        </div>
        <div class="flex tip2" @click="checked = !checked">
          <img v-show="!checked" class="check" src="/img/auth/check.png" alt="极度证券">
          <img v-show="checked" class="check" src="/img/auth/checked.png" alt="极度证券">
          <div>
            <!-- 我已阅读并同意上述协议文书,同意在极度证券开通相关账户 -->
            {{$t('auth.l27')}}
          </div>
        </div>
        <div class="fixed" @click="realUser">
          <!-- 确定 -->
          {{$t('common.l50')}}
        </div>
      </div>
    </div>
    <selectCountry :title="$t('auth.l6')" @list="getList" :val="phoneCountry" ref="country" @back="selectCountryBack"/>
    <van-popup class="rule-pop" get-container="body" v-model="rulePop" :style="{ width: '324px' }">
      <rulePop v-if="rulePop" :id="ruleId" @cancel="rulePop = false" />
    </van-popup>
  </div>
</template>
<script>
import axios from 'axios'
import BackBar from '@/components/backBar'
import { mapGetters } from 'vuex'
import { realUser } from '@/api/user'
import selectCountry from "@/components/selectCountry";
import rulePop from "./components/rulePop.vue";
export default {
  components: {
    BackBar,
    selectCountry,
    rulePop
  },
  data () {
    return {
      user: {
        name: '',
        type: '',
        country: '',
        code: '',
      },
      checked: true,
      rulePop: false,
      ruleId: '',
      list: [],
      step: 1,
      file1: '',
      file2: '',
      file3: '',
      identity_status: 1,
      rules: {
        name: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
        country: [{ required: true, message: this.$t('common.l51'), trigger: 'change' }],
        type: [{ required: true, message: this.$t('common.l51'), trigger: 'change' }],
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    phoneCountry() {
      var obj = {}
      this.list.forEach(item => {
        if (item.code == this.user.country) {
          obj = item
        }
      })
      return obj
    }
  },
  created() {
    this.$store.dispatch('getUserInfo').then(() => {
    }).finally(() => {
      this.identity_status = this.userInfo.identity_status
      if (this.userInfo.identity_status == 2) {
        this.user.name = this.userInfo.identity_name ? `${this.userInfo.identity_name.slice(0, 1)}**` : ''
        this.user.type = this.userInfo.identity_type
        this.user.code = this.userInfo.identity_code ? `${this.userInfo.identity_code.slice(0, 3)}***${this.userInfo.identity_code.slice(this.userInfo.identity_code.length - 3)}` : ''
        this.user.country = this.userInfo.identity_country
        this.file1 = this.userInfo.file_01
        this.file2 = this.userInfo.file_02
        this.file3 = this.userInfo.file_03
      }
      if (this.userInfo.identity_status == 1) {
        this.$router.replace('/auth-success')
      }
    })
  },
  methods: {
    submitClick() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.step = 2
      })
    },
    realUser() {
      if (!this.file1) {
        this.$toast(this.$t('auth.l18'));
        return
      }
      if (!this.file2 && this.user.type == 1) {
        this.$toast(this.$t('auth.l19'));
        return
      }
      // if (!this.file3) {
      //   this.$toast(this.$t('auth.l17'));
      //   return
      // }
      if (!this.checked) {
        this.$toast({
          className: 'van-toast1',
          // message: '请阅读并同意上述协议文书',
          message: this.$t('auth.l34'),
        })
        return
      }
      var data = {
        name: this.user.name,
        type: this.user.type,
        country: this.user.country,
        code: this.user.code,
        file1: this.file1,
        file2: this.file2,
        file3: this.file3,
      }
      this.fullscreenLoading = true
      realUser(data).then((res) => {
        this.fullscreenLoading = false;
        this.$notify({
          message: this.$t('auth.l24'),
          type: 'success'
        });
        this.$store.dispatch('getUserInfo')
        this.$router.back()
      }).catch(() => {
        this.fullscreenLoading = false;
      })
    },
    afterRead(file) {
      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, 'file1')
    },
    afterRead1(file) {
      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, 'file2')
    },
    afterRead2(file) {
      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, 'file3')
    },
    upload(file, key) {
      const formData = new FormData();
      formData.append("file", file);
      this.fullscreenLoading = true
      axios.post(this.$uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          var file = res.data
          this.fullscreenLoading = false;
          if (file.msg != 'ok') {
            this.$notify({
              message: file.msg || this.$t('fund.l83'),
              type: 'danger'
            });
            return
          }
          this[key] = file.data
        })
        .catch((err) => {
          this.fullscreenLoading = false;
          this.$notify({
            // message: '上传失败',
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        });
    },
    countryShow() {
      if (this.userInfo.identity_status == 2) {
        return
      }
      this.$refs['country'].reset()
    },
    selectCountryBack(val) {
      this.user.country = val.code
    },
    getList(list) {
      this.list = list
    },
    rulePopShow(id) {
      this.rulePop = true
      this.ruleId = id
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 6px 18px 86px;
}
.info-box {
  padding: 9px 10px 10px;
  background-color: #FFF0E9;
  border-radius: 6px;
  margin-bottom: 26px;
  .icon {
    width: 16px;
    margin-right: 3px;
  }
  .title {
    color: var(--color-);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
  }
  .tip {
    margin-top: 9px;
    font-size: 12px;
    line-height: 16px;
    color: #B89687;
    &+.tip {
      margin-top: 0;
    }
  }
}
.info-box1 {
  margin-bottom: 10px;
  padding-top: 17px;
  .icon {
    width: 16px;
    margin-right: 3px;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
  }
  .tip {
    margin-top: 7px;
    font-size: 12px;
    line-height: 19px;
    color: #949494;
    &+.tip {
      margin-top: 0;
    }
  }
}
.tip1 {
  font-size: 12px;
  color: #060606;
  line-height: 16px;
  margin-bottom: 14px;
}
.router-box {
  column-gap: 18px;
  margin-bottom: 24px;
  .href {
    cursor: pointer;
    color: #2B76E9;
    font-size: 14px;
    line-height: 16px;
    text-decoration: underline;
  }
}
.form {
  .label {
    font-size: 16px;
    color: #4F4F4F;
    margin-bottom: 12px;
  }
}
.country-btn {
  border-radius: 6px;
  border: 1px solid #EBEBEB;
  padding: 0 15px;
  position: relative;
  line-height: 40px;
  color: var(--color-1-);
  .el-icon-arrow-up {
    transform: rotateZ(180deg);
    &.is-reverse {
      transform: rotateZ(0);
    }
  }
}
.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 17px 32px;
  background-color: var(--bg-);
}
.btn-box1 {
  position: sticky;
  bottom: 0;
  padding: 10px 0 32px;
  background-color: var(--bg-);
}
.fixed {
  text-align: center;
  cursor: pointer;
  line-height: 44px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  background-color: var(--color-);
}
.avatar-uploader {
  margin-bottom: 21px;
  position: relative;
  .up-tip {
    color: #949494;
    text-align: center;
    font-size: 14px;
    padding-top: 10px;
  }
}
.tip2 {
  align-items: flex-start;
  font-size: 12px;
  color: #060606;
  line-height: 16px;
  margin-bottom: 10px;
  .check {
    width: 14px;
    margin-right: 2px;
  }
}
::v-deep .form {
  .vue-country-popover-container {
    display: block;
  }
  .el-form-item {
    margin-bottom: 20px;
    .el-input__inner {
      border: none;
      background-color: #F4F7FA;
      border-radius: 6px;
      color: var(--color-1-);
    }
    .el-select {
      display: block;
      .el-input__inner {
        background-color: transparent;
        border: 1px solid #EBEBEB;
        &::placeholder {
          color: var(--color-1-);
        }
      }
    }
  }
  .el-form-item__error {
    padding-top: 2px;
  }
}
.van-image {
  max-width: 100%;
}
.van-uploader {
  display: block;
  max-width: 100%;
}
::v-deep {
  .van-uploader__wrapper {
    display: block;
  }
}
</style>