<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import { QSelect } from 'quasar';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref, watch } from 'vue';

import AppBox from 'components/app/AppBox.vue';

import useOptionStore from 'src/stores/options';

defineProps<{
  readonly?: boolean;
  data?: {
    total: number;
    discount: number;
    totalVatExcluded: number;
    totalVatIncluded: number;
    totalAfterDiscount: number;
  };
}>();

const quotationNo = defineModel<string>('quotationNo', { required: true });
const actor = defineModel<string>('actor', { required: true });
const workName = defineModel<string>('workName', { required: true });
const contactor = defineModel<string>('contactor', { required: true });
const telephone = defineModel<string>('telephone', { required: true });
const documentReceivePoint = defineModel<string>('documentReceivePoint', {
  required: true,
});
const dueDate = defineModel<string>('dueDate', { required: true });
const payType = defineModel<string>('payType', { required: true });
const paySplitCount = defineModel<string>('paySplitCount', { required: true });
const payBank = defineModel<string>('payBank', { required: true });

const optionStore = useOptionStore();

const bankBookOptions = ref<Record<string, unknown>[]>([]);
let bankBoookFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

onMounted(() => {
  if (optionStore.globalOption) {
    bankBoookFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.bankBook),
      bankBookOptions,
      'label',
    );
  }
});

watch(
  () => optionStore.globalOption,
  () => {
    bankBoookFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.bankBook),
      bankBookOptions,
      'label',
    );
  },
);
</script>

<template>
  <AppBox no-padding bordered class="column">
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <q-icon name="mdi-file-outline" />
      </div>
      <span class="text-weight-bold">
        {{ $t('quotation.label.infoDocument') }}
      </span>
    </div>

    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <q-input
          :label="$t('quotation.label.quotationNo')"
          :readonly
          v-model="quotationNo"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.actor')"
          :readonly
          v-model="actor"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.workName')"
          :readonly
          v-model="workName"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.contactor')"
          :readonly
          v-model="contactor"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.telephone')"
          :readonly="readonly"
          v-model="telephone"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.documentReceivePoint')"
          :readonly
          v-model="documentReceivePoint"
          class="col-12"
          dense
          outlined
        />
        <q-input
          :label="$t('quotation.label.dueDate')"
          :readonly
          v-model="dueDate"
          class="col-12"
          dense
          outlined
        />
      </div>
    </div>
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <q-icon name="mdi-bank-outline" />
      </div>
      <span class="text-weight-bold">
        {{ $t('quotation.label.infoPayment') }}
      </span>
    </div>
    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm">
        <q-select
          outlined
          clearable
          use-input
          emit-value
          map-options
          hide-bottom-space
          input-debounce="0"
          option-value="value"
          option-label="label"
          class="col-12"
          autocomplete="off"
          for="select-payType"
          dense
          :label="$t('quotation.label.payType')"
          :options="[]"
          :readonly
          :hide-dropdown-icon="readonly"
          v-model="payType"
        ></q-select>
        <div class="col-8 column">
          <q-field readonly dense outlined>
            <template #control>
              <span>{{ $t('quotation.label.paySplitCount') }}</span>
              <span class="app-text-muted">
                ({{ $t('quotation.label.payTotal') }})
              </span>
            </template>
          </q-field>
        </div>
        <div class="col-4">
          <q-input
            v-model="paySplitCount"
            :readonly
            class="col-6"
            type="number"
            dense
            outlined
          />
        </div>
        <q-select
          outlined
          clearable
          use-input
          emit-value
          fill-input
          map-options
          hide-bottom-space
          option-value="value"
          input-debounce="0"
          option-label="label"
          class="col-12"
          autocomplete="off"
          for="select-bankbook"
          dense
          :label="$t('quotation.label.bank')"
          :options="bankBookOptions"
          :readonly
          :hide-dropdown-icon="readonly"
          v-model="payBank"
          @filter="bankBoookFilter"
        >
          <template v-slot: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%;
                    aspect-ratio: 1;
                    height: 2rem;
                    width: 2rem;
                  "
                />
              </q-item-section>
              <q-item-section>
                {{ scope.opt.label }}
              </q-item-section>
            </q-item>
          </template>

          <template v-slot:selected-item="scope">
            <q-item-section
              v-if="scope.opt && !!payBank"
              avatar
              class="q-py-sm row"
            >
              <q-img
                :src="`/img/bank/${scope.opt.value}.png`"
                class="bordered"
                style="
                  border-radius: 50%;
                  aspect-ratio: 1;
                  height: 2rem;
                  width: 2rem;
                "
              />
            </q-item-section>
          </template>

          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                {{ $t('general.noData') }}
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
    </div>
    <div
      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
    >
      <div class="icon-wrapper bg-color-orange q-mr-sm">
        <Icon icon="iconoir:coins" />
      </div>
      <span class="text-weight-bold">
        {{ $t('quotation.label.infoSummary') }}
      </span>
    </div>
    <div class="q-pa-sm">
      <div class="row">
        {{ $t('general.total') }}
        <span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.discount') }}
        <span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalAfterDiscount') }}
        <span class="q-ml-auto">{{ data?.totalAfterDiscount || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalVatExcluded') }}
        <span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
      </div>
      <div class="row">
        {{ $t('general.totalVatIncluded') }}
        <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
      </div>
    </div>
  </AppBox>
</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);
}

.bg-color-orange {
  --_color: var(--yellow-7-hsl);
  color: white;
  background: hsla(var(--_color));
}

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

.bg-color-orange-light {
  --_color: var(--yellow-7-hsl);
  background: hsla(var(--_color) / 0.2);
}
.dark .bg-color-orange {
  --_color: var(--orange-6-hsl / 0.2);
}
</style>
