/*实名认证*/
<template>
  <div class="real"
    v-loading="loading"
    element-loading-text="Loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-form
        v-if="realStatus == 0"
        ref="realForm"
        class="real-form"
        label-width="120px"
        :model="realForm"
        :rules="realRules"
        hide-required-asterisk
      >
        <el-row>
          <el-col :sm='12' :lg="9" :xl='6'>
            <el-form-item prop="type" label="证件类型：">
              <el-select
                v-model="realForm.type"
                size="small"
                style="width: 250px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.code"
                  :value="item.code"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm='12' :lg="15" :xl='18'>
            <el-form-item prop="mobile" label="手机号码：">
            <el-input
              ref="mobile"
              v-model="realForm.mobile"
              type="text"
              size="small"
              style="width: 220px"
              name="mobile"
              placeholder="请输入手机号码"
              :disabled='true'
            >
            </el-input>
            <el-button
              v-if='!realForm.mobile'
              class="code"
              type="danger"
              size="small"
              :disabled="countDown > 0"
              plain
              @click.native.prevent="getCode"
              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
            >
          </el-form-item>
            
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm='12' :lg="9" :xl='6'>
            <el-form-item prop="idNo" label="证件号码：">
              <el-input
                ref="idNo"
                v-model="realForm.idNo"
                type="text"
                size="small"
                style="width: 250px"
                name="idNo"
                placeholder="请输入证件号码"
              />
            </el-form-item>
          </el-col>
          <el-col :sm='12' :lg="15" :xl='18'>
            <el-form-item prop="code" label="验证码：" v-if="!realForm.mobile">
              <el-input
                ref="code"
                v-model="realForm.code"
                type="text"
                size="small"
                style="width: 220px"
                name="code"
                placeholder="请输入验证码"
              >
              </el-input>
            </el-form-item>
      
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm='12' :lg="9" :xl='6'>
            <el-form-item
              prop="name"
              :label="realForm.type == '1' ? '企业名称：' : '姓名：'"
            >
              <el-input
                ref="name"
                v-model="realForm.name"
                type="text"
                size="small"
                style="width: 250px"
                name="name"
                :placeholder="realForm.type == '1' ? '企业名称' : '请输入姓名'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :lg="15" :xl='18'>
            <el-form-item
              prop="userName"
              label="管理员姓名："
              v-if="realForm.type == '1'"
            >
              <el-input
                ref="userName"
                v-model="realForm.userName"
                type="text"
                size="small"
                style="width: 250px"
                name="userName"
                placeholder="管理员姓名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm='12' :lg="9" :xl='6'>
            <el-form-item
              v-if="realForm.type == '1'"
              prop="imageUrl"
              label="营业执照："
            >
              <div v-if="realForm.imageUrl" class="image">
                <el-image
                  class="img"
                  fit="contain"
                  :src="realForm.imageUrl"
                  :preview-src-list="[realForm.imageUrl]"
                />
                <div class="operation">
                  <i class="el-icon-circle-close" @click="fileRemove('image')" />
                </div>
              </div>
              <el-upload
                v-else
                ref="upload"
                class="image"
                action="string"
                accept="image/jpeg, image/png, image/jpg"
                :multiple="false"
                :limit="1"
                :before-upload="onBeforeUploadImage"
                :http-request="UploadImage"
                :on-remove="fileRemove('image')"
                :show-file-list="false"
              >
                <i class="el-icon-circle-plus upload-icon" />
                <p>上传营业执照</p>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :sm='12' :lg="15" :xl='18'>
            <el-form-item
              v-if="realForm.type == '1'"
              label="其他："
            >
              <div class="upimg">
                <div v-if="realForm.upImg1" class="image">
                  <el-image
                    class="img"
                    fit="contain"
                    :src="realForm.upImg1"
                    :preview-src-list="[realForm.upImg1]"
                  />
                  <div class="operation">
                    <i class="el-icon-circle-close" @click="fileRemove('img1')" />
                  </div>
                </div>
                  <el-upload
                    v-else
                    ref="upload1"
                    class="image"
                    action="string"
                    accept="image/jpeg, image/png, image/jpg"
                    :multiple="false"
                    :limit="1"
                    :before-upload="onBeforeUploadImage"
                    :http-request="UploadImage1"
                    :on-remove="fileRemove('img1')"
                    :show-file-list="false"
                  >
                    <i class="el-icon-circle-plus upload-icon" />
                    <p>上传其他材料</p>
                  </el-upload>
                <div v-if="realForm.upImg2" class="image">
                  <el-image
                    class="img"
                    fit="contain"
                    :src="realForm.upImg2"
                    :preview-src-list="[realForm.upImg2]"
                  />
                  <div class="operation">
                    <i class="el-icon-circle-close" @click="fileRemove('img2')" />
                  </div>
                </div>
                  <el-upload
                    v-else
                    ref="upload2"
                    class="image"
                    action="string"
                    accept="image/jpeg, image/png, image/jpg"
                    :multiple="false"
                    :limit="1"
                    :before-upload="onBeforeUploadImage"
                    :http-request="UploadImage2"
                    :on-remove="fileRemove('img2')"
                    :show-file-list="false"
                  >
                    <i class="el-icon-circle-plus upload-icon" />
                    <p>上传其他材料</p>
                  </el-upload>
                <div v-if="realForm.upImg3" class="image">
                  <el-image
                    class="img"
                    fit="contain"
                    :src="realForm.upImg3"
                    :preview-src-list="[realForm.upImg3]"
                  />
                  <div class="operation">
                    <i class="el-icon-circle-close" @click="fileRemove('img3')" />
                  </div>
                </div>
                  <el-upload
                    v-else
                    ref="upload3"
                    class="image"
                    action="string"
                    accept="image/jpeg, image/png, image/jpg"
                    :multiple="false"
                    :limit="1"
                    :before-upload="onBeforeUploadImage"
                    :http-request="UploadImage3"
                    :on-remove="fileRemove('img3')"
                    :show-file-list="false"
                  >
                    <i class="el-icon-circle-plus upload-icon" />
                    <p>上传其他材料</p>
                  </el-upload>

              </div>
            </el-form-item>

          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="danger"
            size="small"
            class="next-btn"
            @click.native.prevent="Next"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    <div v-if='realStatus != 0' class="real-content">
      <div v-if="realStatus == 2" class="status">
        <i class="el-icon-circle-check success" />
        <span>恭喜您，认证成功！</span>
      </div>
      <div v-if="realStatus == 3" class="status">
        <i class="el-icon-warning fail" />
        <span>认证失败，请重新认证</span>
      </div>
      <div v-if="realStatus == 1" class="status">
        <i class="el-icon-time wait" />
        <span>认证中，请耐心等待...</span>
      </div>

      <div class="real-result" :style='{"width":realForm.type=="1"?"490px":"265px"}'>
        <div class="result-item">
          <div class="lable">证件类型：</div>
          <div class="item">
            {{ realForm.type == '1' ? '统一社会代码' : '身份证' }}
          </div>
        </div>
        <div class="result-item">
          <div class="lable">证件号码：</div>
          <div :class="['item', realStatus == 3 ? 'fail' : '']">
            {{ realForm.idNo }}
          </div>
          <span v-if="realStatus == 3">×</span>
        </div>
        <div class="result-item">
          <div class="lable">
            {{ realForm.type == '1' ? '企业名称：' : '姓名：' }}
          </div>
          <div class="item">{{ realForm.name }}</div>
        </div>
        <div class="result-item" v-if="realForm.type == '1'">
          <div class="lable">
            管理员姓名：
          </div>
          <div class="item">{{ realForm.userName }}</div>
        </div>
        <div v-if="realForm.type == '1'" class="result-item">
          <div class="lable">营业执照：</div>
          <div class="item">
            <el-image
              class="img"
              fit="contain"
              :src="realForm.imageUrl"
              :preview-src-list="[realForm.imageUrl]"
            />
          </div>
        </div>
        <div v-if="realForm.type == '1'" class="result-item">
          <div class="lable">其他材料：</div>
          <div class="item">
            <el-image
              class="img"
              fit="contain"
              :src="realForm.upImg1"
              :preview-src-list="[realForm.upImg1]"
            />
          </div>
          <div class="item">
            <el-image
              class="img"
              fit="contain"
              :src="realForm.upImg2"
              :preview-src-list="[realForm.upImg2]"
            />
          </div>
          <div class="item">
            <el-image
              class="img"
              fit="contain"
              :src="realForm.upImg3"
              :preview-src-list="[realForm.upImg3]"
            />
          </div>
        </div>
        <div v-if="realStatus == 3" class="btn">
          <el-button
            type="danger"
            size="small"
            class="next-btn"
            @click.native.prevent="Next"
            >重新认证</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request, uploadFile, getImage } from '@/utils/request'
export default {
  name: 'Real',
  data() {
    const validateName = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请输入姓名或企业名称'))
      }
    }
    const validateType = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请选择证件类型'))
      }
    }
    const validateIdNo = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请输入证件号码'))
      }
    }
    const validateFile = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请上传营业执照'))
      }
    }
    const validateAdmin = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请输入管理员姓名'))
      }
    }

    return {
      mobileFlog:'',
      loading:false,
      countDown:'00',
      realStatus: this.$store.getters.realStatus || 0, // 实名状态（0-未认证 1-认证中 2-认证通过 3-认证失败）
      typeList: [
        { code: '0', name: '身份证' },
        { code: '1', name: '统一社会代码' },
      ],
      userType:'',
      realForm: {
        name: '',
        userName:"",
        type: '',
        idNo: '',
        mobile:'',
        code:'',
        imageUrl: '',
        upImg1:'',
        upImg2:'',
        upImg3:'',
      },
      realRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
        type: [{ required: true, trigger: 'blur', validator: validateType }],
        idNo: [{ required: true, trigger: 'blur', validator: validateIdNo }],
        imageUrl: [
          { required: true, trigger: 'blur', validator: validateFile },
        ],
        userName:[{ required: true, trigger: 'blur', validator: validateAdmin }]
      },
      fileId: '',
      fileId1: '',
      fileId2: '',
      fileId3: '',
    }
  },
  computed: {},
  created() {
    this.checkReal()
    this.$store.getters.userType!=='0'?this.realForm.type='1':this.realForm.type='0'
  },
  methods: {
    checkReal() {
      let params = {
        transCode: 'B00001',
      }
      request(params)
        .then((res) => {
          this.realStatus = res.authenticationState
          if (res.authenticationState != 0) {
            this.$store.dispatch('user/changeState', {
              key: 'userType',
              value: res.userType,
            })
            this.$store.dispatch('user/changeState', {
              key: 'realStatus',
              value: res.authenticationState,
            })
            this.realForm.name = res.certName ? res.certName : res.userName
            this.userType = res.userType
            this.realForm.idNo = res.certNo
            this.realForm.userName=res.adminName
            this.fileId = res.fileId
            this.realForm.imageUrl = res.fileId ? getImage(res.fileId) : ''
            this.realForm.upImg1 = res.fileId1 ? getImage(res.fileId1) : ''
            this.realForm.upImg2 = res.fileId2 ? getImage(res.fileId2) : ''
            this.realForm.upImg3 = res.fileId3 ? getImage(res.fileId3) : ''
          }
          this.realForm.mobile=res.mobileNo
        })
        .catch((err) => {})
    },
    onBeforeUploadImage(file) {
      const isIMAGE =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      return isIMAGE
      // const isLt1M = file.size / 1024 / 1024 < 1
      // if (!isLt1M) {
      //   this.$message.error('上传文件大小不能超过 1MB!')
      // }
      // return isIMAGE && isLt1M
    },
    theLast() {
      this.countDown = 60
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
          this.countDown < 10 && (this.countDown = '0' + this.countDown)
        } else {
          clearInterval(timer)
        }
      }, 1000)
    },
    getCode() {
      this.mobileFlog=1
      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
      if (!this.realForm.mobile) return this.$message.error('请输入手机号码!')
      // if (!validMobile(this.realForm.mobile))
      //   return this.$message.error('请输入正确的手机号码!')
      const params = {
        transCode: 'A00001',
        mailOrPhone: this.realForm.mobile,
        type: '4',
        channel:'1'
      }
      request(params)
        .then((res) => {
          this.$message.success(
            `验证码已发送至手机号码： ${this.realForm.mobile} ,请注意查收！`
          )
          this.theLast()
        })
        .catch((err) => {})
    },
    UploadImage(params) {
      this.realForm.imageUrl = URL.createObjectURL(params.file)
      this.$refs.upload.clearFiles() // 清除文件对象
      const param = new FormData()
      param.append('transCode', 'B00021')
      param.append('file', params.file)
      uploadFile(param)
        .then((res) => {
          this.fileId = res.fileId
        })
        .catch((err) => {})
    },
    UploadImage1(params) {
      this.realForm.upImg1 = URL.createObjectURL(params.file)
      this.$refs.upload1.clearFiles() // 清除文件对象
      const param = new FormData()
      param.append('transCode', 'B00021')
      param.append('file', params.file)
      uploadFile(param)
        .then((res) => {
          this.fileId1 = res.fileId
        })
        .catch((err) => {})
    },
    UploadImage2(params) {
      this.realForm.upImg2 = URL.createObjectURL(params.file)
      this.$refs.upload2.clearFiles() // 清除文件对象
      const param = new FormData()
      param.append('transCode', 'B00021')
      param.append('file', params.file)
      uploadFile(param)
        .then((res) => {
          this.fileId2 = res.fileId
        })
        .catch((err) => {})
    },
    UploadImage3(params) {
      this.realForm.upImg3 = URL.createObjectURL(params.file)
      this.$refs.upload3.clearFiles() // 清除文件对象
      const param = new FormData()
      param.append('transCode', 'B00021')
      param.append('file', params.file)
      uploadFile(param)
        .then((res) => {
          this.fileId3 = res.fileId
        })
        .catch((err) => {})
    },
    fileRemove(type) {
      switch (type){
        case 'image':
          this.realForm.imageUrl = ''
          break;
        case 'img1':
          this.realForm.upImg1 = ''
          break;
        case 'img2':
          this.realForm.upImg2 = ''
          break;
        case 'img3':
          this.realForm.upImg3 = ''
          break;
        default:
      }
    },
    // 确定
    Next() {
      if (this.realStatus == 0) {
        this.$refs.realForm.validate((valid) => {
          if (valid) {
            this.loading=true
            const params = {
              transCode: 'B00020',
              certName: this.realForm.name,
              certNo: this.realForm.idNo,
              type: this.realForm.type,
              // fileId: this.realForm.type == '1' ? this.fileId : '',
              mobnub:this.realForm.mobile,
              verificationCode:this.mobileFlog==1?this.realForm.code:'',
              adminName:this.realForm.type == '1'?this.realForm.userName:'',
              fileId:this.realForm.type == '1'?this.fileId:'',
              fileId1:this.realForm.type == '1'?this.fileId1:'',
              fileId2:this.realForm.type == '1'?this.fileId2:'',
              fileId3:this.realForm.type == '1'?this.fileId3:'',
            }
            request(params)
              .then((res) => {
                this.realStatus = res.authenticationState
                this.loading=false
              })
              .catch((err) => {
                this.loading=false
              })
          } else {
            return false
          }
        })
      } else {
        this.realStatus = 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.real {
  padding: 35px 0;
  @include w_h(100%, 100%);
  background: $color_f;
  .real-form {
    padding: 0 30px 30px;
    @include w_h();
    background: $color_f;
    .next-btn {
      margin: 10px auto;
      @include w_h(250px);
    }
    .image {
      position: relative;
      @include w_h(100px, 130px);
      font-size: 12px;
      line-height: 20px;
      color: $color_d;
      border-radius: 4px;
      overflow: hidden;
      .img {
        @include w_h(100%, 100%);
        border: 1px solid $color_d;
      }
      .operation {
        @include position(absolute, 0, auto, auto, 0, 1);
        font-size: 20px;
      }
    }
  }
  .real-content {
    @include w_h(100%);
    .status {
      @include flex(center);
      font-size: 18px;
      font-weight: 700;
      line-height: 80px;
      color: $color_3;
      i {
        margin-right: 10px;
        font-size: 40px;
      }
      .success {
        color: #41b300;
      }
      .fail {
        color: #eb331d;
      }
      .wait {
        color: #f8bd00;
      }
    }
    .real-result {
      // @include w_h(490px, 100%);
      height: 100%;
      margin: 20px auto 0;
      font-size: 14px;
      line-height: 20px;
      color: $color_3;
      white-space: nowrap;
      .result-item {
        @include flex(flex-start, flex-start);
        margin-bottom: 15px;
        .lable {
          @include w_h(110px);
          text-align: right;
        }
        .item {
          max-width: calc(100% - 110px);
          word-break: break-all;
          .img {
            @include w_h(120px, 150px);
            border: 1px solid $color_d;
          }
        }
        .fail {
          color: $color_on;
        }
        span {
          margin-left: 10px;
          font-size: 18px;
          line-height: 18px;
          color: $color_on;
        }
      }
      .btn {
        @include flex(center);
        @include w_h();
        .next-btn {
          margin: 10px auto;
          @include w_h(200px);
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .real-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}

.real-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      color: $color_6;
      padding-left: 65px;
    }
  }

  .el-form-item__label {
    font-size: 12px;
    color: $color_3;
  }
  .el-image__inner--center {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .el-upload {
    @include w_h(100%, 100%);
    color: $color_d;
    border: 1px solid $color_d;
    &:hover {
      border-color: $color_b;
    }
    .upload-icon {
      margin-top: 40px;
      font-size: 24px;
      color: $color_d;
      text-align: center;
    }
  }
}
.upimg{
  display: flex;
  .image{
    margin-right: 5px;
  }
}
.code {
      @include position(absolute, 4px, auto, auto);
      @include w_h(100px);
      font-size: 12px;
      vertical-align: middle;
      cursor: pointer;
      user-select: none;
    }
</style>>

