<template>
  <GetCaptchaButton ref="captcha" @intervalCaptcha="intervalCaptcha" @getCaptcha="getCaptcha" :offFrozen="offFrozen"
                    :interval="interval" :maxFrozen="maxFrozen" :disabled="disabled" :preheatingOn="preheatingOn">
    <slot></slot>
  </GetCaptchaButton>
</template>

<script>
import GetCaptchaButton from './GetCaptchaButton.vue'

import {
  sendSMSVerification
} from '../js/request.js'

import {
  quickSendLogonSMS
} from '../commom/apis.js'

export default {
  props: {
    preheatingOn: Boolean,
    disabled: Boolean,
    smsType: String,
    phone: String,
    offFrozen: {
      type: Boolean
    },
    interval: {
      type: Number
    },
    maxFrozen: {
      type: Number
    }
  },
  components: {
    GetCaptchaButton
  },
  methods: {
    async getCaptcha() {
      let sendSuccess = true
      try {
        const smsType = this.smsType
        if (smsType === 'quick') {
          await quickSendLogonSMS(this.phone)
        } else {
          await sendSMSVerification(this.phone, smsType)
        }
        this.$emit('success', this.$refs["captcha"].tempFrozen)

      } catch (e) {
        console.warn(e)
        sendSuccess = false
      }
      if (sendSuccess) {
        this.$refs["captcha"].startInterval()
      }
      this.$emit('send', sendSuccess)
    },
    intervalCaptcha(data) {
      this.$emit('intervalCaptcha', data)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
