<template>
  <view class="pwd-modal">
    <modal :show="modal" title="请输入支付密码" @cancel="closeModal">
      <view class="amount">
        <text class="amount-title" />
        <!-- <view class="amount-amount">{{ (+amount || 0).toFixed(2) }}</view> -->
        <view class="amount-input">
          <keyboard-input :inputvalue="pwdArr" border />
        </view>
      </view>
      <view slot="footer" class="pwd-action">
        <text v-if="errorInfo" class="pwd-error">{{ errorInfo }}</text>
        <!-- <text class="pwd-set" @click="setPwd">忘记密码?</text> --><!-- 临时隐藏享花卡的需求 -->
      </view>
    </modal>
    <keyboard
      :radius="radius"
      :show="pwdModal"
      :mask="false"
      @close="closeKeyboard"
      @click="keyboardClick"
    />
  </view>
</template>

<script>
import modal from "./modal";
import keyboard from "./keyboard";
import keyboardInput from "./keyboard-input";
import { h5Mixin } from "@/utils/h5Mixin";
import { saTrackEvent } from "@/utils/sa";
export default {
  components: {
    modal,
    keyboard,
    keyboardInput
  },
  mixins: [h5Mixin()],
  props: {
    modal: {
      type: Boolean,
      default: false
    },
    errorInfo: String,
    hasPwd: Boolean,
    forgetPwdJumpUrl: String,
    amount: Number
  },
  data() {
    return {
      pwdModal: false,
      numberArr: [],
      pwdArr: ["", "", "", "", "", ""],
      temp: ["", "", "", "", "", ""],
      isDel: false
    };
  },
  computed: {},
  watch: {
    modal: function(val) {
      this.pwdModal = val;
    },
    errorInfo: function(val) {
      if (val) {
        this.pwdArr = [...this.temp];
        this.numberArr = [];
      }
    }
  },
  onShow() {},
  onLoad() {},
  onReady() {},
  methods: {
    closeModal() {
      this.$emit("close", this.modal);
    },
    closeKeyboard: function() {
      this.pwdModal = false;
      this.closeModal();
      this.numberArr = [];
      this.pwdArr = this.temp;
    },
    keyboardClick: function(e) {
      let numberArr = this.numberArr;
      let pwdArr = this.pwdArr;
      let index = e.index;
      if (
        (numberArr.length === pwdArr.length || index == undefined) &&
        index !== 9 &&
        index !== 11
      ) {
        return;
      }
      if (index == 9) {
        //取消键
        this.closeKeyboard();
        return;
      } else if (index == 11) {
        //退格键
        this.isDel = true;
        let len = numberArr.length;
        if (len) {
          pwdArr.splice(len - 1, 1, "");
        } else {
          pwdArr = this.temp;
        }
        numberArr.pop();
      } else if (index == 10) {
        this.sendSa();
        numberArr.push(0);
        pwdArr.splice(numberArr.length - 1, 1, "●");
      } else {
        this.sendSa();
        numberArr.push(index + 1);
        pwdArr.splice(numberArr.length - 1, 1, "●");
      }
      this.numberArr = numberArr;
      this.pwdArr = pwdArr;
      this.getPwd();
    },
    getPwd: function() {
      //判断并取出密码
      if (this.numberArr.length === this.pwdArr.length) {
        this.$emit("submit", this.numberArr.join(""));
      }
    },
    async setPwd() {
      saTrackEvent("PD_YXMMACP_UserClickForgetPassword");
      uni.reportAnalytics("c_forgetpassword", {});
      // const url = `${this.forgetPwdJumpUrl}&vccChannel={vccChannel}`;
      // this.goH5(url);
      this.$emit("setPwd");
    },
    sendSa() {
      if (!this.numberArr.length && !this.isDel) {
        saTrackEvent("PD_YXMMACP_UserClickPasswordInputbox");
        uni.reportAnalytics("c_passwordinputbox", {});
      }
    }
  }
};
</script>

<style lang="scss">
.amount {
  &-title {
    font-size: 28rpx;
    color: #323233;
  }
  &-amount {
    margin-top: 4px;
    font-size: 60rpx;
    color: #333333;
    &:before {
      content: "￥";
      font-size: $uni-font-size-sm;
    }
  }
  &-input {
    margin-top: 16px;
  }
}
.pwd-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text {
    font-size: 28rpx;
    color: #666666;
  }
  .pwd-set {
    text-align: right;
    flex: 1;
  }
  .pwd-error {
    color: #ee0a24;
    flex: 2;
  }
}
</style>
