jws-frontend/src/pages/11_credit-note/expansion/PaymentExpansion.vue

<script lang="ts" setup>
import AppBox from 'src/components/app/AppBox.vue';
import useOptionStore from 'src/stores/options';
import SelectInput from 'src/components/shared/SelectInput.vue';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { formatNumberDecimal } from 'src/stores/utils';
import { watch } from 'vue';

withDefaults(
  defineProps<{
    readonly?: boolean;
    totalPrice?: number;
  }>(),
  {
    totalPrice: 0,
  },
);

const optionStore = useOptionStore();

const paybackType = defineModel<'BankTransfer' | 'Cash'>('paybackType');
const paybackBank = defineModel<string>('paybackBank');
const paybackAccount = defineModel<string>('paybackAccount');
const paybackAccountName = defineModel<string>('paybackAccountName');

watch(
  () => paybackType.value,
  () => {
    if (paybackType.value === 'Cash') {
      paybackBank.value = paybackAccount.value = paybackAccountName.value = '';
    }
  },
);
</script>
<template>
  <q-expansion-item
    dense
    class="overflow-hidden bordered full-width"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1 q-py-sm text-medium text-body1"
  >
    <template #header>
      <span>
        {{ $t('general.payment') }}
      </span>
    </template>

    <main class="q-px-md q-py-sm surface-1">
      <AppBox
        no-padding
        bordered
        class="credit-note-color"
        :class="{
          row: $q.screen.gt.sm,
          column: $q.screen.lt.md,
        }"
      >
        <section class="col bordered-r">
          <header
            class="bordered-b q-px-md q-py-sm row bg-color-light items-center"
          >
            <div class="icon-wrapper bg-color q-mr-sm">
              <q-icon name="mdi-bank-outline" />
            </div>
            <span class="text-weight-bold">
              {{ $t('quotation.paymentCondition') }}
            </span>
          </header>

          <div class="q-pa-sm">
            <div class="row q-col-gutter-sm">
              <SelectInput
                for="select-credit-note-pay-type"
                :label="$t('quotation.payType')"
                dense
                outlined
                :readonly
                class="col-md-4 col-12"
                v-model="paybackType"
                :option="[
                  {
                    label: $t('creditNote.label.Cash'),
                    value: 'Cash',
                  },
                  {
                    label: $t('creditNote.label.BankTransfer'),
                    value: 'BankTransfer',
                  },
                ]"
              />
              <SelectInput
                :disable="paybackType === 'Cash'"
                for="select-credit-note-bank"
                dense
                outlined
                fill-input
                :hide-selected="false"
                :readonly
                class="col-md-8 col-12"
                :label="$t('branch.form.bank')"
                :option="optionStore.globalOption?.bankBook"
                v-model="paybackBank"
                clearable
              >
                <template #option="{ scope }">
                  <q-item
                    v-if="scope.opt"
                    v-bind="scope.itemProps"
                    class="row items-center"
                  >
                    <q-item-section avatar>
                      <q-img
                        :src="`/img/bank/${scope.opt.value}.png`"
                        class="bordered"
                        style="border-radius: 50%"
                      />
                    </q-item-section>
                    <q-item-section>
                      {{ scope.opt.label }}
                    </q-item-section>
                  </q-item>
                </template>

                <template #selected-item="{ scope }">
                  <q-item-section v-if="scope.opt" avatar class="q-py-sm">
                    <q-img
                      :src="`/img/bank/${scope.opt.value}.png`"
                      class="bordered"
                      style="border-radius: 50%; width: 30px"
                    />
                  </q-item-section>
                </template>
              </SelectInput>
              <q-input
                :disable="paybackType === 'Cash'"
                for="input-credit-account-number"
                v-model="paybackAccount"
                dense
                outlined
                :readonly
                class="col-md-4 col-12"
                :label="$t('creditNote.label.accountNumber')"
              />
              <q-input
                :disable="paybackType === 'Cash'"
                for="input-credit-account-name"
                v-model="paybackAccountName"
                dense
                outlined
                :readonly
                class="col-md-8 col-12"
                :label="$t('creditNote.label.accountName')"
              />
            </div>
          </div>
        </section>

        <section class="col column">
          <header
            class="bordered-b q-px-md q-py-sm row bg-color-light items-center"
          >
            <div class="icon-wrapper bg-color q-mr-sm">
              <Icon icon="iconoir:coins" />
            </div>
            <span class="text-weight-bold">
              {{ $t('quotation.summary') }}
            </span>
          </header>

          <div class="q-pa-sm price-container col">
            <div class="row">
              {{ $t('general.total') }}
              <span class="q-ml-auto">
                {{ formatNumberDecimal(totalPrice) }}
                ฿
              </span>
            </div>
          </div>
          <div class="q-pa-sm row surface-2 items-center text-weight-bold">
            {{ $t('quotation.totalPriceBaht') }}
            <span class="q-ml-auto" style="color: var(--brand-1)">
              {{ formatNumberDecimal(totalPrice) }}
              ฿
            </span>
          </div>
        </section>
      </AppBox>
    </main>
  </q-expansion-item>
</template>
<style scoped>
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

:deep(.price-tag .q-field__control) {
  display: flex;
  align-items: center;
  width: 90px;
  height: 25px;
}

.credit-note-color {
  --_color: var(--indigo-10-hsl);
}

.bg-color {
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color {
  --_color: var(--orange-6-hsl);
}

.bg-color-light {
  background: hsla(var(--_color) / 0.1);
}

.dark .bg-color-light {
  --_color: var(--orange-6-hsl / 0.2);
}

.price-container > * {
  padding: var(--size-1);
}
</style>