<script setup lang="ts">
const serviceCharge = defineModel<number>('serviceCharge');
const agentPrice = defineModel<number>('agentPrice');
const price = defineModel<number>('price');

withDefaults(
  defineProps<{
    dense?: boolean;
    outlined?: boolean;
    readonly?: boolean;
    separator?: boolean;
    isType?: boolean;
    priceDisplay?: {
      price: boolean;
      agentPrice: boolean;
      serviceCharge: boolean;
    };
  }>(),
  {
    priceDisplay: () => ({
      price: true,
      agentPrice: true,
      serviceCharge: true,
    }),
  },
);
</script>

<template>
  <div class="row col-12">
    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-sm"
        color="info"
        name="mdi-cash"
        style="background-color: var(--surface-3)"
      />
      {{ $t('priceInformation') }}
    </div>
    <div class="col-12 row q-col-gutter-sm">
      <q-input
        v-if="priceDisplay?.price"
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('salePrice')"
        v-model="price"
      />

      <q-input
        v-if="priceDisplay?.agentPrice"
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('agentPrice')"
        v-model="agentPrice"
      />

      <q-input
        v-if="priceDisplay?.serviceCharge"
        lazy-rules="ondemand"
        :dense="dense"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-4"
        type="number"
        :label="$t('processingPrice')"
        v-model="serviceCharge"
      />
    </div>
  </div>
</template>

<style scoped></style>
