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

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  isType?: boolean;
}>();
</script>

<template>
  <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      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
      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
      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>
</template>

<style scoped></style>
