<template>
  <b-container fluid>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.FundWithdrawal.MPay.CHN') }}
        </label>
      </b-col>
      <b-col sm="6">
        <b-form-input
          size="sm"
          data-vv-scope="mpayScope"
          type="text"
          :value="getMyAccountMemberDetails.details.user.name"
          disabled
          name="Card Holder Name"
          v-validate="'required'"
          :class="{ input: true, 'border-danger': errors.has('mpayScope.Card Holder Name') }"
        />
        <span v-show="errors.has('mpayScope.Card Holder Name')" class="help text-danger">
          {{ errors.first('mpayScope.Card Holder Name') }}
        </span>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.FundWithdrawal.MPay.CardNumber') }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-form-input
          size="sm"
          type="text"
          v-model="cardNumber"
          data-vv-scope="mpayScope"
          name="Card Number"
          @change="updateModel"
          v-validate="'required|decimal'"
          :class="{ input: true, 'border-danger': errors.has('mpayScope.Card Number') }"
        />
        <span v-show="errors.has('mpayScope.Card Number')" class="help text-danger">
          {{ checkError(errors, 'Card Number') }}
        </span>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="5">
        <label class="required">
          {{ $t('EWallet.FundWithdrawal.MPay.CED') }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-row>
          <select
            v-model="cardExpiryDate.month"
            data-vv-scope="mpayScope"
            v-validate="'required'"
            :class="{ 'border-danger': mPayError.status }"
            name="Expiry Month"
            @change="updateModel"
            @click="resetError"
          >
            <option selected data-default disabled>
              {{ cardExpiryDate.month }}
            </option>
            <option v-for="(month, monthIdx) in expiredMonthPeriods" :key="monthIdx">
              {{ month }}
            </option>
          </select>
          <select
            v-model="cardExpiryDate.year"
            data-vv-scope="mpayScope"
            v-validate="'required'"
            :class="{ 'border-danger': mPayError.status }"
            name="Expiry Year"
            @change="updateModel"
            @click="resetError"
          >
            <option selected data-default disabled>
              {{ cardExpiryDate.year }}
            </option>
            <option v-for="(year, idx) in expiredYearPeriods" :key="idx">
              {{ year }}
            </option>
          </select>
        </b-row>
        <span
          v-show="errors.has('mpayScope.Expiry Month') || errors.has('mpayScope.Expiry Year')"
          class="help text-danger"
        >
          {{ $t('EWallet.GlobalWords.FieldRequired') }}
        </span>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import Vue from 'vue'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'MpayComponent',
  inject: ['$validator'],
  components: {},
  data() {
    return {
      cardNumber: '',
      cardExpiryDate: { month: '', year: '' },
      autoWithdrawalType: 'yes',
      securityPin: '',
      yesnooptions: [
        { text: 'Yes', value: 'yes' },
        { text: 'No', value: 'no' },
      ],
      expiredMonthPeriods: ['01', '02', '03', '04', '05', '06', '07', '08', '09', 10, 11, 12],
      expiredYearPeriods: [19, 20, 21, 22, 23, 24, 25, 26, 27],
      mPayError: {
        status: false,
        message: '',
      },
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['updateMemberDetails']),
    checkError(errorObj, field) {
      if (errorObj.items.length > 0) {
        let i
        for (i = 0; i < errorObj.items.length; i++) {
          if (errorObj.items[i].field === field) {
            if (errorObj.items[i].rule === 'required') {
              return Vue.i18n.translate('EWallet.GlobalWords.AmountRequiredError')
            } else {
              return Vue.i18n.translate('EWallet.GlobalWords.SecurityPinErrorFormat')
            }
          }
        }
      }
    },
    resetError() {
      this.mPayError.status = false
    },
    updateModel() {
      this.$emit('input', {
        cardHolderName: this.getMyAccountMemberDetails.details.user.name,
        cardNumber: this.cardNumber,
        cardExpiryDate: this.cardExpiryDate,
      })
    },
  },
  computed: {
    ...mapGetters(['getEwalletPaymentType', 'getMyAccountMemberDetails']),
  },
}
</script>
