<script setup lang="ts">
import SelectCustomer from '../shared/select/SelectCustomer.vue';
import SelectBranch from '../shared/select/SelectBranch.vue';

const branchId = defineModel<string>('branchId');
const customerBranchId = defineModel<string>('customerBranchId');
const agentPrice = defineModel<boolean>('agentPrice');
const special = defineModel<boolean>('special');

defineProps<{
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  employee?: boolean;
  title?: string;
  inputOnly?: boolean;
  hideAdd?: boolean;

  onCreate?: boolean;
}>();

defineEmits<{
  (e: 'addCustomer'): void;
}>();
</script>
<template>
  <div class="row">
    <div
      v-if="!inputOnly"
      class="col-12 row items-center q-pb-sm text-weight-bold text-body1"
    >
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-sm"
        color="info"
        name="mdi-file-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`general.about`) }}
      <div class="text-weight-regular" :class="{ 'q-ml-md ': $q.screen.gt.sm }">
        <q-checkbox
          :label="$t('productService.product.agentPrice')"
          size="xs"
          v-model="agentPrice"
          style="font-size: 14px"
        />
        <q-checkbox
          class="q-ml-md"
          :label="$t('quotation.specialCondition')"
          size="xs"
          v-model="special"
          style="font-size: 14px"
        />
      </div>
    </div>
    <div class="col-12 row" :class="{ 'q-col-gutter-sm': !inputOnly }">
      <SelectBranch
        v-model:value="branchId"
        :label="$t('quotation.branchVirtual')"
        class="col-md-6 col-12"
        :class="{
          'field-one': inputOnly && $q.screen.gt.sm,
          'q-mb-sm': inputOnly && $q.screen.lt.md,
        }"
        simple
        required
        :readonly
      />
      <SelectCustomer
        v-model:value="customerBranchId"
        :label="$t('quotation.customer')"
        :creatable-disabled-text="`(${$t('form.error.selectField', {
          field: $t('quotation.branchVirtual'),
        })})`"
        @create="$emit('addCustomer')"
        class="col-md-6 col-12"
        :class="{ 'field-two': inputOnly && $q.screen.gt.sm }"
        :creatable-disabled="!branchId"
        :creatable="!inputOnly"
        simple
        required
        :readonly
      />
    </div>
  </div>
</template>

<style scoped>
:deep(
    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
  ) {
  padding-right: 4px;
}

:deep(
    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
  ) {
  padding-left: 4px;
}
</style>
