<template>
  <b-card>
    <b-row class="my-2" v-for="(item, idx) in localSettingDetail[0].fields" :key="idx">
      <b-col sm="3">
        <label class="required">
          {{ item.text }}
        </label>
      </b-col>
      <b-col sm="5">
        <b-form-input
          v-validate="'required'"
          :name="item.name"
          v-model="item.value"
          :class="{ input: true, 'is-danger': errors.has(item.name) }"
          type="text"
          :disabled="item.text.toLowerCase() === 'amount'"
          v-if="item.type === 'field'"
        />
        <b-form-select
          v-validate="'required'"
          :name="item.name"
          v-model="item.value"
          :class="{ 'is-danger': errors.has(item.nane) }"
          v-if="item.type === 'dropdown'"
        >
          <option value="null" disabled>
            {{ $t('Eshop.Order.GlobalWords.PleaseSelect') }}
          </option>
          <option v-for="(optItem, optIdx) in getDropDownOption(idx)" :key="optIdx" :value="optItem.value">
            {{ optItem.label }}
          </option>
        </b-form-select>
        <span v-show="errors.has(item.name)" class="help is-danger">
          {{ errors.first(item.name) }}
        </span>
      </b-col>
    </b-row>
    <b-row class="my-2">
      <b-col sm="3" />
      <b-col sm="5">
        <b-btn class="btn-cancel" @click="cancelAction">
          {{ $t('Eshop.Order.GlobalWords.Cancel') }}
        </b-btn>
        <b-btn class="btn-confirm" @click="validateInputs">
          {{ $t('Eshop.Order.GlobalWords.Confirm') }}
        </b-btn>
      </b-col>
    </b-row>
    <b-modal id="confirm_payment_generic" class="eshop-model" centered ref="confirm" @ok="confirmPayment">
      <div>{{ $t('Eshop.Order.GlobalWords.ConfirmPaymentFromGeneric', { method: paymentTitle }) }}</div>
    </b-modal>
  </b-card>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'PaymentGeneric',
  components: {},
  props: {
    cancelAction: {
      type: Function,
      required: true,
    },
    confirmAction: {
      type: Function,
      required: true,
    },
    settingDetail: {
      type: Array,
      required: true,
    },
    paymentTitle: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      localSettingDetail: [{ fields: [] }],
    }
  },
  mounted() {
    this.localSettingDetail = JSON.parse(JSON.stringify(this.settingDetail))
  },
  methods: {
    ...mapActions([]),
    validateInputs: function() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          this.$refs.confirm.show()
        }
      })
    },
    getDropDownOption: function(index) {
      let options = []
      let sourceData = this.localSettingDetail[0].fields[index].data
      Object.keys(sourceData).forEach(function(key) {
        let obj = {
          value: key,
          label: sourceData[key],
        }
        options.push(obj)
      })
      return options
    },
    confirmPayment: function() {
      this.confirmAction(this.localSettingDetail)
    },
  },
  computed: {
    ...mapGetters([]),
  },
}
</script>
