<template>
  <div class="validate-pay-wrap">
    <nav-bar :title="verifData.cardType == 1 ? '上传身份证' : '上传护照'"/>
    <div class="wrap">
      <!-- 验证状态 -->
      <div v-if="verifData.status != 1">
        <div class="upload pr" :class="{isUpload: form.cardImgFront}">
          <myUpload
            @value="getCardImgFront"
            @img="getCardImgFront"
            :img="form.cardImgFront"
            :info="verifData.cardType == 1 ? '添加身份证正面' : '添加护照'"
            :contentType="'user/card'"
          ></myUpload>
        </div>
        <div class="upload pr" :class="{isUpload: form.cardImgSide}" v-if="verifData.cardType == 1">
          <myUpload
            @value="getCardImgSide"
            @img="getCardImgSide"
            :img="form.cardImgSide"
            :info="'添加身份证背面'"
            :contentType="'user/card'"
          ></myUpload>
        </div>
        <div class="form">
          <van-field
            v-model="form.cardName"
            placeholder="请输入真实姓名"
            clearable
          />
          <van-field
            v-model="form.cardId"
            placeholder="请输入证件编号"
            clearable
          />
        </div>
      </div>
      <!-- 验证通过状态 -->
      <div v-else class="isValidated">
        <img :src="verifData.cardImgFront" alt="">
        <img :src="verifData.cardImgSide" v-if="verifData.cardType == 1" alt="">
        <p>
          <i>真实姓名：</i>
          <span>{{verifData.cardName}}</span>
        </p>
        <p>
          <i>证件编号：</i>
          <span>{{verifData.cardId}}</span>
        </p>
      </div>
    </div>
    <p class="tip" v-if="verifData.cardContent && verifData.status != 1">{{verifData.cardContent}}</p>
    <div class="btn" v-if="verifData.status != 1">
      <van-button type="default" :class="{disabled: disabled}" @click="saveData">验证身份</van-button>
    </div>
  </div>
</template>
<script>
import NavBar from "@/components/common/NavBar";
import myUpload from "@/components/common/upload";

export default {
  name: "ValidatePay",
  components: {
    NavBar,
    myUpload
  },
  data() {
    return {
      data: [],
      form: {
        cardName: null,
        cardId: null,
        cardImgFront: null,
        cardImgSide: null
      },
      verifData: {},
      disabled: true
    };
  },
  created() {
    let data = this.$util.sessionStorage.fetch("verificationCard");
    this.verifData = JSON.parse(data);
    for (const i in this.verifData) {
      if (this.verifData.hasOwnProperty(i)) {
        const element = this.verifData[i];
        if (i in this.form) {
          this.form[i] = element;
        }
      }
    }
  },
  watch: {
    form: {
      handler: function(val) {
        let n = 0;
        for (const key in val) {
          if (val.hasOwnProperty(key)) {
            if (!val[key]) {
              n++;
            }
          }
        }
        if (this.verifData.cardType == 1) {
          n > 0 ? (this.disabled = true) : (this.disabled = false);
        } else {
          n > 1 ? (this.disabled = true) : (this.disabled = false);
        }
      },
      deep: true
    }
  },
  methods: {
    // 保存数据
    saveData() {
      if (this.disabled) {
        return;
      }
      this.disabled = true;
      let params = {};
      params.url = this.$apis.api_user_card_edit;
      let data = this.$util.deepClone(this.form);
      if (this.verifData.cardType != 1) {
        delete data.cardImgSide;
      }
      params.data = data;
      params.data.cardType = this.verifData.cardType;
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) == 0) {
            this.$Toast(res.data.content);
            setTimeout(() => {
              let lang = this.$store.state.langStr;
              this.$util.sessionStorage.remove("verificationCard");
              this.$router.push({
                path: "/" + lang + "/user/information"
              });
            }, 1000);
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
          setTimeout(() => {
            this.disabled = false;
          }, 1000);
        }
      );
    },
    // 正面证件
    getCardImgFront(val) {
      this.form.cardImgFront = val;
    },
    // 反面证件
    getCardImgSide(val) {
      this.form.cardImgSide = val;
    }
  }
};
</script>

<style scoped lang='less'>
.validate-pay-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  ::-webkit-input-placeholder {
    color: #ccc;
  }
  ::-moz-placeholder {
    color: #ccc;
  }
  ::-moz-placeholder {
    color: #ccc;
  }
  :-ms-input-placeholder {
    color: #ccc;
  }
  .van-hairline--bottom::after {
    border: 0;
  }
  .wrap {
    padding: 20px 20px 0;
    > div {
      background: #fff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      border: 1px solid rgba(238, 238, 238, 1);
      padding: 15px;
      > p {
        margin: 10px 0;
        font-size: 13px;
        color: #ccc;
      }
      .form {
        margin-top: 20px;
        > div {
          margin: 30px 0 0;
          padding: 10px 0;
        }
        > div:after {
          left: 0;
        }
        > div:first-child {
          padding-bottom: 5px;
        }
        > div:not(:first-child) {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #eee;
          span {
            font-size: 18px;
            color: #ccc;
            font-weight: 400;
          }
          i {
            color: #bbb;
            font-size: 10px;
          }
        }
      }
      .upload {
        width: 100%;
        border-radius: 5px;
        height: 210px;
        border: 1px dashed #ddd;
        margin: 0 0 15px;
        .info {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          z-index: 2;
          i {
            font-size: 40px;
            color: #999;
          }
          p {
            color: #999;
            font-size: 18px;
            font-weight: 500;
            margin-top: 15px;
          }
          .close {
            // display: none;
            top: 15px;
            right: 15px;
            width: 15px;
            font-size: 15px;
            height: 15px;
            color: rgba(255, 255, 255, 1);
          }
        }
        img {
          width: 100%;
        }
        .van-uploader {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .isUpload {
        border: 0;
        .info {
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          i,
          p {
            color: #fff;
          }
        }
      }
    }
    .isValidated {
      img {
        width: 100%;
        border-radius: 4px;
        margin-bottom: 15px;
      }
      p {
        margin-top: 15px;
        span {
          font-size: 18px;
          color: #222;
        }
        i {
          font-size: 18px;
          color: #999;
        }
      }
      p:last-child {
        margin-top: 30px;
        margin-bottom: 15px;
      }
    }
  }
  .tip {
    padding: 10px 20px 0;
    color: #ff523d;
    font-size: 13px;
    font-weight: 400;
  }
  .btn {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 20px 20px 0;
    button {
      width: 100%;
      height: 45px;
      font-size: 18px;
      background: #ff523d;
      border-radius: 25px;
      color: #fff;
      font-weight: 500;
      border: 0;
    }
    .disabled {
      background: rgba(254, 185, 175, 1);
    }
  }
}
</style>
