<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="`snt-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>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: undefined
    },
    items: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>
<style>
  .snt-checkout-select-card__radio .mdi-radiobox-marked::before {
    color: var(--v-primary-base);
  }
</style>
<style scoped>
  .snt-checkout-select {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 14px;
    width: 100%;
  }
  .snt-checkout-select-card {
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
  }
  .snt-checkout-select-card.snt-checkout-select-card--active {
    border: 1px solid var(--v-primary-base);
  }
  .snt-checkout-select-card__radio {
    max-width: 400px;
    padding: 16px;
  }
  .snt-checkout-select-card__radio-content {
    display: flex;
  }
  .snt-checkout-select-card__radio-image {
    margin: 0 20px 0 0;
  }
  .snt-checkout-select-card__radio-icon {
    border-radius: 8px;
    padding: 8px;
  }
  .snt-checkout-select-card__radio-title {
    margin-bottom: 8px;
  }
  .snt-checkout-select-card__radio-caption {
    margin-bottom: 8px;
  }
</style>
