<script setup lang="ts">
import { ref, watch } from 'vue';
import InputText from 'primevue/inputtext';
import ToggleSwitch from 'primevue/toggleswitch';
import BaseFormDialog from '@/core/components/BaseFormDialog.vue';
import type { OverheadType } from '../settings.types';

const props = defineProps<{
  visible: boolean;
  item: Partial<OverheadType> | null;
  loading?: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
  save: [data: Partial<OverheadType>];
}>();

const form = ref<Partial<OverheadType>>({});

watch(
  () => props.visible,
  (v) => {
    if (v) {
      form.value = props.item ? { ...props.item } : { isActive: true };
    }
  },
);

function onSubmit() {
  emit('save', { ...form.value });
}
</script>

<template>
  <BaseFormDialog
    :visible="visible"
    :title="item?.id ? 'Overhead Type 수정' : 'Overhead Type 등록'"
    width="480px"
    :loading="loading"
    @update:visible="emit('update:visible', $event)"
    @submit="onSubmit"
  >
    <div class="form-grid">
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">코드</label>
          <InputText v-model="form.code" placeholder="OH-001" fluid />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">이름</label>
          <InputText v-model="form.name" placeholder="Overhead Type명" fluid />
        </div>
      </div>
      <div class="col-12" v-if="item?.id">
        <div class="form-field">
          <label class="form-field__label">활성 상태</label>
          <ToggleSwitch v-model="form.isActive" />
        </div>
      </div>
    </div>
  </BaseFormDialog>
</template>
