<template>
    <LayoutApp class="yohoufo-real-auth-page" title="实名认证">
      <div class="auth-content">
        <p class="auth-sub-title">平台将严格保密您的认证信息，请按照种类分别填写以下信息，保证上传的图片文字清晰可见。</p>
        <div class="auth-form">
          <p class="form-title">姓名</p>
          <div class="form-input-block">
            <CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请填写姓名"></CubeInput>
          </div>
          <p class="form-title">身份证号</p>
          <div class="form-input-block">
            <CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请填写身份证号"></CubeInput>
          </div>
          <p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro"><span class="iconfont iconquestion"></span>示例照片</a></p>
          <div class="form-input-block">
            <div class="upload-btn" @click="uploadFrontCard">
              <div v-if="idCardFrontUrl" class="delete-img" @click.stop="clearInfo(['idCardFront', 'idCardFrontUrl'])">ㄨ</div>
              <div v-if="idCardFrontUrl" class="up-img-block">
                <img :src="idCardFrontUrl">
              </div>
            </div>
            <div class="example-view">
              <img src="//img12.static.yhbimg.com/goodsimg/2019/09/25/16/022553bde9fc6bafa0df244de694c551f2.png?imageView/1/w/160/h/100" alt="身份证正面（示例）">
              <p>（示例）</p>
            </div>
          </div>
          <p class="form-title">上传身份证反面照片</p>
          <div class="form-input-block">
            <div class="upload-btn" @click="uploadBackCard">
              <div v-if="idCardBackUrl" class="delete-img" @click.stop="clearInfo(['idCardBack', 'idCardBackUrl'])">ㄨ</div>
              <div v-if="idCardBackUrl" class="up-img-block">
                <img :src="idCardBackUrl">
              </div>
            </div>
            <div class="example-view">
              <img src="//img11.static.yhbimg.com/goodsimg/2019/09/25/16/011df7d2637953bd6ce2c59500011d7fd7.png?imageView/1/w/160/h/100" alt="身份证反面（示例）">
              <p>（示例）</p>
            </div>
          </div>
          <div class="hide-upload-wrap">
            <CubeUpload
              ref="upload"
              action="/xianyu/upload/idcard"
              :simultaneous-uploads="1"
              @files-added="addedHandler"
              @file-success="successHandler"
              @file-error="errorHandler"/>
          </div>
        </div>
      </div>
      <div class="auth-footer">
        <CubeButton class="submit-btn" :disabled="canSubmit" @click="submitCert">确认提交</CubeButton>
      </div>
    </LayoutApp>
</template>

<script>
import { get } from 'lodash';
import { Input, Button, Upload } from 'cube-ui';
import { mapActions, mapState } from 'vuex';

export default {
  name: 'auth',
  data() {
    return {
      name: '',
      idCode: '',
      idCardFront: '',
      idCardBack: '',
      idCardFrontUrl: '',
      idCardBackUrl: '',
      exampleLink: '//activity.yoho.cn/feature/4899.html?share_id=7593&title=UFO-身份证示例'
    }
  },
  computed: {
    ...mapState(['yoho']),
    certName() {
      let name = get(this.yoho, 'user.sellerInfo.certName');

      name && (this.name = name);
      return name;
    },
    certIdCode() {
      let code = get(this.yoho, 'user.sellerInfo.certNo');

      code && (this.idCode = code);
      return code;
    },
    canSubmit() {
      return !(this.name && this.idCode && this.idCardFront && this.idCardBack);
    }
  },
  methods: {
    ...mapActions(['userRealCertification']),
    toast(msg) {
      this.$createToast && this.$createToast({
        txt: msg,
        type: 'txt',
        time: 1000
      }).show();
    },
    clearInfo(arr) {
      if (arr && arr.length) {
        arr.forEach(val => {
          this[val] && (this[val] = '');
        });
      }
    },
    chooseUploadFile() {
      this.$refs.upload && this.$refs.upload.$el.querySelector('.cube-upload-input').click();
    },
    uploadFrontCard() {
      if (!this.uploading && !this.idCardFront) {
        this.uploadCallback = (path, img) => {
          this.idCardFront = path;
          this.idCardFrontUrl = img;
        };
        this.chooseUploadFile();
      }
    },
    uploadBackCard() {
      if (!this.uploading && !this.idCardBack) {
        this.uploadCallback = (path, img) => {
          this.idCardBack = path;
          this.idCardBackUrl = img;
        };
        this.chooseUploadFile();
      }
    },
    addedHandler() {
      this.uploading = true;
      this.uploadToast = this.$createToast({
        txt: '上传中',
        mask: true
      }).show();
    },
    successHandler(file) {
      this.uploading = false;
      this.uploadToast.hide();

      if (get(file, 'response.code') === 200) {
        this.uploadCallback && this.uploadCallback(get(file, 'response.data.imagesList[0]'), file.url);
      } else {
        this.toast(res.message || '上传失败');
      }

      setTimeout(() => {
        this.$refs.upload.removeFile(file);
      }, 1000);
    },
    errorHandler() {
      this.uploading = false;
      this.uploadToast.hide();
      this.toast('上传失败');
    },
    submitCert() {
      this.userRealCertification({
        certName: this.name,
        certNo: this.idCode,
        frontImageUrl: this.idCardFront,
        backImageUrl: this.idCardBack
      }).then(res => {
        if (res.code === 200) {
          if (this.$route.query.refer) {
            this.$router.push({
              name: this.$route.query.refer
            });
          } else {
            this.$router.go(-1);
          }
        } else {
          this.$createToast && this.$createToast({
            txt: res.message || '认证失败',
            type: 'txt',
            time: 1000
          }).show();
        }
      });
    }
  },
  components: {
    CubeInput: Input,
    CubeButton: Button,
    CubeUpload: Upload
  }
};
</script>

<style lang="scss" scoped>
  .auth-content {
    height: calc(100% - 144px);
    padding: 0 40px;
    overflow-y: scroll;

    .auth-sub-title {
      font-size: 24px;
      color: #999;
      line-height: 1.5;
      margin: 40px 0 10px;
      text-align: center;
    }

    .auth-form {
      margin-top: 40px;
    }

    .form-title {
      font-size: 36px;
      padding-top: 40px;
      line-height: 1.6;
      font-weight: 500;
    }

    .form-input-block {
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .auth-input {
      &:after {
        border: 0;
      }

      /deep/ .cube-input-field {
        font-size: 14px;
        height: 40px;
        border: none;
        padding: 0;
      }
    }

    .upload-intro {
      font-size: 24px;
      line-height: 58px;
      color: #999;
      float: right;
      display: flex;
      align-items: center;
      font-weight: 300;

      .iconfont {
        font-size: 30px;
        color: #d8d8d8;
        margin-right: 10px;
      }
    }

    .upload-btn {
      width: 220px;
      height: 140px;
      background-color: #eee;
      margin: 30px 0 14px;
      position: relative;

      &:before {
        content: "";
        width: 40px;
        height: 4px;
        background-color: #999;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -2px;
        margin-left: -20px;
      }

      &:after {
        content: "";
        width: 4px;
        height: 40px;
        background-color: #999;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -2px;
      }
    }

    .delete-img {
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      background-color: #676767;
      color: #fff;
      text-align: center;
      position: absolute;
      top: -20px;
      right: -20px;
      z-index: 2;
    }

    .up-img-block {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      > img {
        display: block;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .example-view {
      width: 160px;
      font-size: 20px;
      color: #999;
      text-align: center;
      position: absolute;
      right: 0;
      top: 16px;

      > img {
        width: 100%;
      }

      > p {
        font-weight: 300;
      }
    }

    .hide-upload-wrap {
      height: 0;
      overflow: hidden;
    }
  }

  .auth-footer {
    padding: 28px 40px;

    .submit-btn {
      height: 88px;
      line-height: 88px;
      padding: 0;
      background: #022c46;
      border-radius: 44px;

      &:after {
        border: 0;
      }

      &.cube-btn_disabled {
        background: #ccc;
      }
    }
  }
</style>