<template>
  <div>
    <b-modal
      id="evoucher_activation"
      ref="evoucher_activation_modal"
      centered
      no-close-on-esc
      no-close-on-backdrop
      hide-header-close
      size="md"
      :title="$t('OrderHistory.Detail.eVoucher.eVoucherActivation.Title')"
      title-tag="h4"
      header-class="border-bottom"
      footer-class="justify-content-md-end justify-content-center"
      :ok-title="$t('OrderHistory.Detail.eVoucher.Activation.Confirm')"
      cancel-variant="light"
      :busy="isLoading(['evoucherOtpRequesting', 'evoucherActivating', 'salesDetailsLoading', 'evoucherLoading'])"
      @ok="activate"
    >
      <div
        v-if="isLoading(['evoucherActivating', 'salesDetailsLoading', 'evoucherLoading'])"
        class="vh-25 d-flex justify-content-center align-items-center"
      >
        <icon name="spinner" pulse class="icon-size-4" />
      </div>
      <b-container v-else class="text-left">
        <b-row class="my-2">
          <b-col class="col-sm-3 text-right">
            {{ $t('Common.IboId') }}
          </b-col>
          <b-col class="font-weight-bold">
            {{ iboId }}
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-sm-3 text-right text-nowrap">
            {{ $t('OrderHistory.Detail.TableHeader.eVoucherNo') }}
          </b-col>
          <b-col class="font-weight-bold">
            <span>{{ getVoucherNumber().join(', ') }} </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-sm-3 text-right text-nowrap">
            {{ $t('OrderHistory.Detail.eVoucher.Activation.InvoiceNo') }}
          </b-col>
          <b-col class="font-weight-bold">
            {{ invoiceNo }}
          </b-col>
        </b-row>
        <b-row class="mt-4">
          <b-col class="col-sm-3 text-right pt-2">
            {{ $t('OrderHistory.Detail.eVoucher.Activation.InsertTAC') }}
          </b-col>
          <b-col>
            <b-btn
              variant="primary"
              :disabled="
                isLoading(['evoucherOtpRequesting', 'evoucherActivating', 'salesDetailsLoading', 'evoucherLoading'])
              "
              @click="requestTac"
            >
              {{ $t('OrderHistory.Detail.eVoucher.Activation.RequestTAC') }}
            </b-btn>
            <icon
              v-if="isLoading('evoucherOtpRequesting')"
              name="spinner"
              pulse
              class="px-3 align-middle icon-size-3 text-primary"
            />
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-sm-3" />
          <b-col class="col-sm-4">
            <b-form-input
              v-validate="'required|numeric'"
              :readonly="isLoading('evoucherOtpRequesting')"
              ref="tac_code"
              name="TAC Code"
              v-model="TACCode"
              :class="{ input: true, 'text-danger': errors.has('TAC Code') }"
              size="sm"
              type="text"
            />
            <span v-show="errors.has('TAC Code')" class="small text-danger text-nowrap">
              {{ errors.first('TAC Code') }}
            </span>
            <span v-show="requestCodeStatus" class="small text-info text-nowrap animated flash">
              {{ requestMessage }}
            </span>
            <span v-show="!requestCodeStatus" class="small text-danger animated flash">
              {{ requestMessage }}
            </span>
          </b-col>
        </b-row>
      </b-container>
    </b-modal>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import _ from 'lodash'

export default {
  name: 'OrderHistoryEvoucher',
  $_veeValidate: {
    validator: 'new',
  },
  components: {},
  props: ['saleId', 'iboId', 'invoiceNo', 'selected'],
  data() {
    return {
      TACCode: '',
      isRequesting: false,
      requestMessage: '',
      requestCodeStatus: true,
      contact: '',
    }
  },
  methods: {
    ...mapActions(['requestEvoucherOTP', 'activateEvoucher', 'loadSalesDetailsData', 'loadEvoucherBySale']),
    ...mapActions('orderhistory', ['setSalesVoucherToActivate']),
    requestTac() {
      this.requestEvoucherOTP().then(res => {
        this.requestCodeStatus = res.status
        this.requestMessage = res.message
        this.contact = res.contact
      })
    },
    activate(e) {
      e.preventDefault()
      this.$validator.validate('TAC Code', this.TACCode).then(valid => {
        if (valid) {
          let data = {
            code: this.TACCode,
            contact: this.contact,
            evouchers: _.map(this.selected, function(item) {
              return item.id
            }),
          }
          this.activateEvoucher(data).then(async res => {
            if (!this.getErrors('evoucherActivate')) {
              this.TACCode = ''
              await this.loadSalesDetailsData({ saleId: parseInt(this.saleId) })
              await this.loadEvoucherBySale().then(() => {
                this.$emit('change')
                this.requestCodeStatus = true
                this.$parent.$refs.activation.classList.add('d-none')
                this.$refs.evoucher_activation_modal.hide()
                this.TACCode = ''
              })
            } else {
              this.requestCodeStatus = false
              this.requestMessage = res
            }
          })
        }
      })
    },
    getVoucherNumber() {
      return _.map(this.selected, function(item) {
        return [item.evoucher_number]
      })
    },
  },
  mounted() {},
  computed: {
    ...mapGetters(['getErrors', 'isLoading']),
  },
}
</script>
