import Vue from 'vue'
import './SntPaymentBanks.scss'
import { VRadioGroup, VRadio } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntPaymentBanks',
  components: { VRadioGroup, VRadio },
  props: {
    value: {
      type: String,
      default: undefined
    },
    items: {
      type: Array,
      default: () => ([])
    }
  },
  template: `
    <v-radio-group
      :value="value"
      hide-details
      dense
      row
      @change="$emit('input', $event)">
      <div class="snt-checkout-select">
        <div
          v-for="item in items"
          :key="'checkout-select-card-'+item.id"
          class="snt-checkout-select-card"
          :class="{ 'snt-checkout-select-card--active': value === item.id }">
          <v-radio
            :value="item.id"
            label="label"
            class="snt-checkout-select-card__radio">
            <template #label>
              <div class="snt-checkout-select-card__radio-content">
                <div class="snt-checkout-select-card__radio-image">
                  <div
                    :style="{ backgroundColor: item.color }"
                    class="snt-checkout-select-card__radio-icon">
                    <component
                      :is="'svg-bank-'+item.bank"
                      width="64"
                      height="64" />
                  </div>
                </div>
                <div class="snt-checkout-select-card__radio-text">
                  <div class="snt-checkout-select-card__radio-title">
                    {{ item.accountName }}
                  </div>
                  <div class="snt-checkout-select-card__radio-caption">
                    สาขา {{ item.accountBranch }}
                  </div>
                  <div class="snt-checkout-select-card__radio-caption">
                    เลขที่บัญชี {{ item.account }}
                  </div>
                </div>
              </div>
            </template>
          </v-radio>
        </div>
      </div>
    </v-radio-group>
  `
})
