<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="verify-popup">
      <div class="verify-popup-title">
        <m-icon
          icon="icon-back"
          class="m-icon goback"
          @click="closePopUp"
          :size="17"
        />
        <div class="title">
          {{ verifyTypeObj.title }}
        </div>
        <div class="right-btn" @click="changeVerifyType">
          {{ verifyTypeObj.changeLabel }}
        </div>
      </div>
      <div class="verify-popup-content">
        <div class="step-con step-one" v-show="verifyType == 'pwd'">
          <div class="password-con flex-default">
            <div
              class="password-line"
              v-for="(item, index) in getPasswprd"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="tips">
            <div class="text" @click="handleForgetPwd">忘记密码？</div>
          </div>
          <!-- <div class="footer-btn">
            <van-button
              block
              type="primary"
              round
              :disabled="confirmDisabled"
              @click="handleConfirm"
            >
              确认支付
            </van-button>
          </div> -->
        </div>
        <div class="step-con step-tow" v-show="verifyType == 'msg'">
          <div class="phone">
            请输入{{ accountInfo.phone | getPhone }}收到的验证码：
          </div>
          <div class="flex-default form-item">
            <input
              class="login-input"
              type="tel"
              v-model="code"
              maxlength="4"
              placeholder="请输入验证码"
              disabled
            />
            <div class="code-view flex-default" @click="sendSmsCode">
              {{ codeLabel }}
            </div>
          </div>
          <!-- <div class="footer-btn" style="margin-top: 22px">
            <van-button
              block
              type="primary"
              round
              :disabled="confirmDisabled"
              @click="handleConfirm"
            >
              确认支付
            </van-button>
          </div> -->
        </div>
      </div>
      <m-num-keyboard v-model="code" :maxLength="6" ref="keyboard" />
    </div>
  </van-popup>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    pid: String,
    formType: String,
    payTypeMap: Object,
    payTypeObj: Object
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (!val) {
        this.code = "";
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
    code(val) {
      if (val.length === this.verifyTypeObj.codeLen) {
        this.handleConfirm();
      }
    },
  },
  data() {
    return {
      showPopup: false,
      code: "",
      verifyType: "pwd",
      VerifyTypeObj: {
        pwd: {
          title: "输入支付密码",
          changeLabel: "使用验证码",
          codeLen: 6,
        },
        msg: {
          title: "输入短信验证码",
          changeLabel: "使用支付密码",
          codeLen: 4,
        },
      },
      codeSec: 0,
      codeLoading: false,
      timer: null,
    };
  },
  computed: {
    ...mapState(["accountInfo"]),
    codeLabel() {
      return this.codeSec > 0 ? `${this.codeSec}s后重发` : "发送验证码";
    },
    confirmDisabled() {
      return this.code.length != this.verifyTypeObj.codeLen;
    },
    getPasswprd() {
      let arr = [null, null, null, null, null, null];
      if (this.code !== "") {
        let newArr = this.code.split("");
        for (let i = 0, len = newArr.length; i < len; i++) {
          arr[i] = "*";
        }
      }
      return arr;
    },
    verifyTypeObj() {
      return this.VerifyTypeObj[this.verifyType] || this.VerifyTypeObj.pwd;
    },
  },
  filters: {
    getPhone(val) {
      if (val) {
        let phone = val.substr(0, 3) + "****" + val.substr(val.length - 4);
        return phone;
      } else {
        return "";
      }
    },
  },
  methods: {
    sendSmsCode() {
      this.codeLoading = true;
      this.$api({
        apiName: "sendSmsCodeIsSign",
        postData: {
          area: this.accountInfo.area,
          account: this.accountInfo.phone,
          type: this.payTypeObj.smsType,
        },
        success: (res) => {
          this.codeSec = 60;
          this.timer = setInterval(() => {
            this.codeSec--;
            if (this.codeSec == 0) {
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
          this.$toast("已发送");
        },
        complete: () => {
          this.codeLoading = false;
        },
      });
    },
    closePopUp() {
      this.code = "";
      this.codeSec = 0;
      this.codeLoading = false;
      this.timer = null;
      this.showPopup = false;
    },
    changeVerifyType(val) {
      this.code = "";
      this.verifyType = this.verifyType == "pwd" ? "msg" : "pwd";
    },
    handleForgetPwd() {
      let query = { setup: 1 };
      this.$router.push({ name: "update-pay-pwd", query });
    },
    handleConfirm() {
      this.$emit("handleConfirm", this.verifyType, this.code);
    },
    clearCode() {
      this.code = "";
      this.$refs.keyboard.clearInputList();
    },
  },
};
</script>

<style lang="less">
.verify-popup {
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;

  .verify-popup-title {
    text-align: center;
    position: relative;
    background-color: #f8f8f8;
    padding: 15px 0;
    border-bottom: 1px solid #d8d8d8;

    .goback {
      left: 16px;
    }

    .right-btn {
      color: #007aff;
      font-size: 12px;
      line-height: 17px;
      height: 17px;
      right: 16px;
    }

    .goback,
    .right-btn {
      position: absolute;
      top: 18px;
    }

    .title {
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      color: #140603;
    }
  }

  .verify-popup-content {
    // height: 171px;
    height: 110px;
    background-color: #f8f8f8;
    padding: 0 16px;

    .step-one {
      overflow: hidden;
      .password-con {
        border: 1px solid #aeaeae;
        border-radius: 4px;
        overflow: hidden;
        margin: 20px 0 12px;

        .password-line {
          width: 17%;
          height: 50px;
          flex-shrink: 1;
          border-right: 1px solid #aeaeae;
          background-color: #ffffff;
          line-height: 57px;
          text-align: center;
          font-size: 22px;

          &:last-child {
            border-right: 0;
          }
        }
      }

      .tips {
        overflow: hidden;

        .text {
          float: right;
          color: #007aff;
          font-size: 12px;
          height: 17px;
          line-height: 17px;
        }
      }
    }
    .step-tow {
      overflow: hidden;
      .phone {
        font-size: 12px;
        color: #999999;
        line-height: 17px;
        margin: 11px 0;
      }
      .form-item {
        height: 50px;
        .login-input {
          height: 50px;
          width: 243px;
          background-color: #ffffff;
          padding-left: 10px;
          font-size: 16px;
          &::placeholder{
            font-size: 14px;
          }
        }
        .code-view {
          width: 100px;
          height: 50px;
          line-height: 50px;
          background-color: #f1f1f1;
          justify-content: center;
          font-size: 14px;
        }
      }
    }
    .footer-btn {
      margin-top: 12px;

      button {
        height: 40px;
        font-size: 16px;
      }
    }
  }
}
</style>
