<script setup lang="ts">
import useOptionStore from 'src/stores/options';

const optionStore = useOptionStore();

const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceNameTh');
const serviceDescription = defineModel<string>('serviceDescription');

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

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div v-if="!service" class="col-9 row q-col-gutter-md">
    <!-- <q-input -->
    <!--   :dense="dense" -->
    <!--   outlined -->
    <!--   hide-bottom-space -->
    <!--   class="col-6" -->
    <!--   :label=" -->
    <!--     $t(isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode') -->
    <!--   " -->
    <!--   v-model="code" -->
    <!-- /> -->
    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-12"
      :label="
        $t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
      "
      v-model="name"
    />
    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('detail')"
      v-model="detail"
    />
    <q-input
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('formDialogInputRemark')"
      v-model="remark"
    />
  </div>

  <div v-if="service" class="col-9 row q-col-gutter-md">
    <q-input
      id="input-service-code"
      for="input-service-code"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('serviceCode')"
      v-model="serviceCode"
    />
    <q-input
      id="input-service-name"
      for="input-service-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-9"
      :label="$t('serviceName')"
      v-model="serviceName"
    />
    <q-input
      id="input-service-description"
      for="input-service-description"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('serviceDetail')"
      v-model="serviceDescription"
    />
  </div>
</template>

<style scoped></style>
