<template>
  <view class="sms-modal">
    <modal :show="modal" title="请输入短信验证码" @cancel="closeModal">
      <view class="sms">
        <text class="sms-title">为保证您账户安全，此笔交易需要短信验证</text>
        <text class="sms-title phone">已发送至 {{ getPhone() }}</text>
        <view class="sms-input">
          <keyboard-input :inputvalue="smsArr" />
        </view>
      </view>
      <view slot="footer" class="sms-action">
        <text v-if="errorInfo" class="sms-error">{{ errorInfo }}</text>
        <text v-if="!send" class="sms-set" @click="sendSms()">获取验证码</text>
        <text v-else class="sms-set grey">{{ time }}s后重新获取验证码</text>
      </view>
    </modal>
    <keyboard
      :radius="radius"
      :show="smsModal"
      :mask="false"
      @close="closeKeyboard"
      @click="keyboardClick"
    />
  </view>
</template>

<script>
import modal from "./modal";
import keyboard from "./keyboard";
import keyboardInput from "./keyboard-input";
import { saTrackEvent } from "@/utils/sa";
export default {
  components: {
    modal,
    keyboard,
    keyboardInput
  },
  props: {
    modal: {
      type: Boolean,
      default: false
    },
    errorInfo: String
  },
  data() {
    return {
      smsModal: false,
      numberArr: [],
      send: false,
      smsArr: ["", "", "", "", "", ""],
      temp: ["", "", "", "", "", ""],
      time: 60,
      timer: null,
      isDel: false
    };
  },
  computed: {},
  watch: {
    modal: function(val) {
      if (val) {
        this.sendSms(1);
      }
      this.smsModal = val;
    },
    errorInfo: function(val) {
      if (val) {
        this.smsArr = [...this.temp];
        this.numberArr = [];
      }
    }
  },
  onShow() {},
  onLoad() {},
  onReady() {},
  methods: {
    closeModal() {
      this.clearTimer();
      this.$emit("close", this.modal);
    },
    closeKeyboard: function() {
      this.smsModal = false;
      this.closeModal();
      this.numberArr = [];
      this.smsArr = this.temp;
    },
    keyboardClick: function(e) {
      let numberArr = this.numberArr;
      let smsArr = this.smsArr;
      let index = e.index;
      if ((numberArr.length === smsArr.length || index == undefined) && index !== 11) {
        return;
      }
      if (index == 9) {
        //取消键
        this.closeKeyboard();
        return;
      } else if (index == 11) {
        //退格键
        this.isDel = true;
        let len = numberArr.length;
        if (len) {
          smsArr.splice(len - 1, 1, "");
        } else {
          smsArr = this.temp;
        }
        numberArr.pop();
      } else if (index == 10) {
        this.sendSa();
        numberArr.push(0);
        smsArr.splice(numberArr.length - 1, 1, 0);
      } else {
        this.sendSa();
        numberArr.push(index + 1);
        smsArr.splice(numberArr.length - 1, 1, index + 1);
      }
      this.numberArr = numberArr;
      this.smsArr = smsArr;
      this.getsms();
    },
    getsms: function() {
      //判断并取出密码
      if (this.numberArr.length === this.smsArr.length) {
        this.$emit("submit", this.numberArr.join(""));
      }
    },
    sendSms(val) {
      // 页面摧毁清掉定时器
      if (this.send) return;
      if (!val) {
        saTrackEvent("PD_YXMMACP_UserClickResendCaptcha");
        uni.reportAnalytics("c_resendcaptcha", {});
      }
      saTrackEvent("");
      this.$emit("send", () => {
        this.send = true;
        this.timer = setInterval(() => {
          --this.time;
          if (!this.time) {
            this.clearTimer();
          }
        }, 1000);
      });
    },
    getPhone() {
      const phone = uni.getStorageSync("phone");
      const phoneS = phone.replace(/(\d{3})\d*(\d{4})/, "+86 $1 **** $2");
      return phoneS;
    },
    sendSa() {
      if (!this.numberArr.length && !this.isDel) {
        saTrackEvent("PD_YXMMACP_UserClickAgainVerificationCodeInputbox");
        uni.reportAnalytics("c_againverificationcodeinputbox", {});
      }
    },
    clearTimer() {
      clearInterval(this.timer);
      this.send = false;
      this.time = 60;
    }
  }
};
</script>

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