<template>
  <div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <div class="text-primary mb-3">
            {{ $t('EWallet.Activation.ThirdStepTitle') }}
          </div>
          <b-row>
            <b-col sm="5" class="text-left text-md-right pl-0">
              <label class="required">
                {{ $t('EWallet.GlobalWords.SecurityPin') }}
              </label>
            </b-col>
            <b-col sm="7" class="pl-0">
              <b-form-input
                size="sm"
                type="password"
                v-model="securityPin"
                name="Security Pin"
                v-validate="'required|numeric'"
                :class="{ input: true, 'is-danger': errors.has('Security Pin') }"
              />
              <span v-show="errors.has('Security Pin')" class="help is-danger">
                {{ errors.first('Security Pin') }}
              </span>
            </b-col>
          </b-row>
          <b-row>
            <b-col sm="5" class="text-left text-md-right pl-0">
              <label class="required">
                {{ $t('EWallet.ReEnterSecurityPin') }}
              </label>
            </b-col>
            <b-col sm="7" class="pl-0">
              <b-form-input
                size="sm"
                type="password"
                v-model="reSecurityPin"
                name="Retype Security Pin"
                v-validate="'required|numeric'"
                :class="{ input: true, 'is-danger': errors.has('Retype Security Pin') }"
              />
              <span v-show="errors.has('Retype Security Pin')" class="help is-danger">
                {{ errors.first('Retype Security Pin') }}
              </span>
              <span
                v-if="getMobileConfirmationStatus.client === true && getMobileConfirmationStatus.status === true"
                class="help is-danger"
              >
                {{ $t('EWallet.Activation.InvalidSecurityPin') }}
              </span>
              <span v-else-if="getMobileConfirmationStatus.status === true" class="help is-danger">
                {{ getMobileConfirmationMessage }}
              </span>
            </b-col>
          </b-row>
        </div>
        <div class="ml-2">
          <b-row> {{ $t('EWallet.SetupSecurityPin.Description') }} </b-row>
        </div>
        <div class="ml-2 mb-5">
          <b-row> {{ $t('EWallet.Activation.TipsTitle') }} </b-row>
          <li>{{ $t('EWallet.Activation.Tips1') }}</li>
          <li>{{ $t('EWallet.Activation.Tips2') }}</li>
          <li>{{ $t('EWallet.Activation.Tips3') }}</li>
        </div>
        <b-row class="fund-first-step-footer">
          <b-btn @click="backToActivation">
            {{ $t('EWallet.GlobalWords.Cancel') }}
          </b-btn>
          <b-btn class="ml-1" @click="confirm">
            {{ $t('EWallet.GlobalWords.Confirm') }}
          </b-btn>
        </b-row>
      </b-container>
      <b-modal ref="cancelthirdActivation" class="eshop-model" size="sm" hide-header centered @ok="handleCancel">
        <h5>{{ $t('EWallet.Activation.CancelThirdStep') }}</h5>
      </b-modal>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ActivationThirdStep',
  components: {},
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      securityPin: '',
      reSecurityPin: '',
    }
  },
  mounted() {},
  computed: {
    ...mapGetters(['getMobileConfirmationStatus', 'getMobileConfirmationMessage']),
  },
  methods: {
    ...mapActions(['cancelFundStep', 'finishFundStep', 'activateMobile', 'setFundStep', 'setEwalletActivation0Step']),
    backToActivation() {
      this.$refs.cancelthirdActivation.show()
    },
    confirm() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          let data = {
            security_pin: this.securityPin,
            security_pin_confirmation: this.reSecurityPin,
          }
          this.activateMobile(data).then(result => {
            if (result) {
              this.finishFundStep('fundFirstStep')
            }
          })
        }
      })
    },
    handleCancel() {
      this.setEwalletActivation0Step(false)
      this.setFundStep('fundFirstStep')
    },
  },
}
</script>
