<template>
  <cr-overlay :show="value">
    <div class="sms-modal">
      <div class="sms">
        <p class="sms-icon"><cr-icon type="cross" color="#999999" @click="closeModal" /></p>
        <p class="sms-title">请输入短信验证码</p>
        <p class="sms-des">为保证您账户安全，此笔交易需要短信验证</p>
        <p class="phone">已发送至 {{ getPhone() }}</p>
        <cr-authcode-field
          span-size="24px"
          type="number"
          border-type="bottom"
          :number="6"
          height="40px"
          span-color="#666"
          input-color="#666"
          input-size="20px"
          class="sms-input"
          :success="success"
        />
      </div>
      <div slot="footer" class="sms-action">
        <p v-if="errorInfo" class="sms-error">{{ errorInfo }}</p>
        <p v-if="!send" class="sms-set" @click="sendSms()">获取验证码</p>
        <p v-else class="sms-set grey">{{ time }}s后重新获取验证码</p>
      </div>
    </div>
  </cr-overlay>
</template>

<script>
import localStorage from '@/service/localStorage.service';
import { sendSms as sendSmsApi } from '@/api/pay.api';
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    },
    orderNo: String,
    flowOrderNo: String,
    errorInfo: String
  },
  data() {
    return {
      send: false,
      time: 60,
      timer: null
    };
  },
  computed: {},
  watch: {
    value: function(val) {
      if (val) {
        this.sendSms(1);
      }
    },
    errorInfo: function() {}
  },
  onShow() {},
  onLoad() {},
  onReady() {},
  methods: {
    closeModal() {
      this.clearTimer();
      this.$emit('close');
    },
    success(smsCode) {
      this.$emit('submit', smsCode);
    },
    async sendSms() {
      // 页面摧毁清掉定时器
      if (this.send) return;
      const [, error] = await sendSmsApi({ orderNo: this.orderNo, flowOrderNo: this.flowOrderNo });
      if (!error) {
        this.send = true;
        this.timer = setInterval(() => {
          --this.time;
          if (!this.time) {
            this.clearTimer();
          }
        }, 1000);
      }
    },
    getPhone() {
      const phone = localStorage.get('userInfo')?.phoneNumber;
      return phone;
    },
    clearTimer() {
      clearInterval(this.timer);
      this.send = false;
      this.time = 60;
    }
  }
};
</script>

<style lang="less">
.sms-modal {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 26%;
  margin-left: -150px;
  padding: 12px 18px 24px;
  width: 300px;
  border-radius: 16px;
  background: #fff;
}
.sms {
  &-icon {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: right;
  }
  &-title {
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
  }
  &-des {
    padding: 18px 0 0 8px;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
    color: #999999;
  }
  &-input {
    margin: auto;
  }
  .phone {
    padding-left: 8px;
    margin-top: 8px;
    color: #323233;
    font-size: 14px;
  }
  &-sms {
    margin-top: 4px;
    font-size: 30px;
    color: #333333;
    &:before {
      content: '￥';
      .text-size(12);
    }
  }
  &-input {
    margin: 20px 0;
  }
}
.sms-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  p {
    font-size: 14px;
    color: #666666;
  }
  .sms-error {
    flex: 1;
    color: #ee0a24;
  }
  .sms-set {
    flex: 1;
    text-align: right;
  }
  .grey {
    color: #999999;
  }
}
</style>
