<template>
  <div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <div class="row-primary">
            {{ $t('EWallet.Activation.SecondStepTitle') }}
            {{
              getMobileNumber.toString().slice(getMobileNumber.toString().length - 4, getMobileNumber.toString().length)
            }}
          </div>
          <b-row>
            <b-col sm="5" class="text-left pl-0">
              <label class="required mt-1">
                {{ $t('Common.Security.VerificationCode') }}
              </label>
            </b-col>
            <b-col sm="7" class="pl-0">
              <b-form-input
                size="sm"
                type="text"
                v-model="verificationCode"
                name="Verification Code"
                v-validate="'required|numeric'"
                @input="handleInput"
                class="mb-2"
                :class="{ input: true, 'is-danger': errors.has('Verification Code') && showError }"
              />
              <span v-show="errors.has('Verification Code') && showError" class="help is-danger d-block">
                {{ errors.first('Verification Code') }}
              </span>
              <template v-for="(msg, msgIdx) in getMobileVerificationMessage">
                <span v-if="getMobileVerificationStatus && showError" class="help is-danger d-block" :key="msgIdx">
                  {{ msg }} <br />
                </span>
              </template>
            </b-col>
          </b-row>
        </div>
        <b-row>
          <b-col class="col-6 col-md-8">
            <u class="btn pl-0">
              <a class="text-primary" @click="handleResendCode">
                {{ $t('EWallet.ResendVerificationCode') }}
              </a>
            </u>
          </b-col>
          <b-col class="col-6 col-md-4 pr-0">
            <button class="col-5 btn btn-primary bg-transparent border border-secondary text-muted" @click="back">
              {{ $t('Common.Back') }}
            </button>
            <b-btn class="col-5 btn btn-primary text-primary bg-transparent border-primary ml-1" @click="next">
              {{ $t('EWallet.GlobalWords.Next') }}
            </b-btn>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <b-modal ref="resendCodeModalErr" class="eshop-model" size="md" hide-header centered ok-only>
      <h5>{{ $t('EWallet.GlobalWords.ResendCodeMessage') }}</h5>
    </b-modal>
    <b-modal ref="resendCodeModalOk" class="eshop-model" size="sm" hide-header centered ok-only>
      <div>{{ $t('EWallet.GlobalWords.ResendCodeMessageOk') }}</div>
    </b-modal>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ActivationSecondStep',
  components: {},
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      verificationCode: '',
      showError: false,
    }
  },
  methods: {
    ...mapActions(['setFundStep', 'cancelFundStep', 'validateMobile', 'setResendCode', 'setVerificationStatus']),
    next() {
      this.$validator.validateAll().then(valid => {
        this.active = true
        if (valid) {
          let data = {
            mobile_1_country_code_id: this.getSelectedCountryCode,
            mobile_1_num: this.getMobileNumber,
            code: this.verificationCode,
            request_type: 'activate',
          }
          this.validateMobile(data).then(result => {
            if (result) {
              this.setFundStep('fundThirdStep')
            }
          })
        }
      })
    },
    back() {
      this.verificationCode = ''
      this.cancelFundStep('fundFirstStep')
      this.errors.clear()
      this.showError = false
    },
    handleInput() {
      this.setVerificationStatus(false)
      this.showError = true
    },
    handleResendCode() {
      if (this.getResendCodeStatus) {
        this.validateMobile(this.getTemporaryMobilePhone).then(res => {
          if (res) {
            setTimeout(() => {
              this.setResendCode(true)
            }, 300000)
            this.$refs.resendCodeModalOk.show()
          } else {
            this.$refs.resendCodeModalErr.show()
          }
        })
      } else {
        this.$refs.resendCodeModalErr.show()
      }
    },
  },
  computed: {
    ...mapGetters([
      'getEWalletFundStep',
      'getMobileNumber',
      'getSelectedCountryCode',
      'getMobileVerificationStatus',
      'getMobileVerificationMessage',
      'getResendCodeStatus',
      'getTemporaryMobilePhone',
    ]),
  },
}
</script>
