<template>
  <div class="container is-fluid px-4">
    <div class="field">
      <div class="field-body">
        <div class="field is-narrow">
          <label class="label">
            Mã
          </label>
          <div class="control">
            <input
              ref="first-input"
              class="input"
              style="max-width: 150px"
              type="text"
              placeholder="Nhập mã"
              v-model="record.code"
            />
          </div>
        </div>
        <div class="field">
          <label class="label">
            Tên giai đoạn<span class="has-text-danger">*</span>
          </label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder="Nhập tên giai đoạn"
              v-model="record.name"
            />
          </div>
        </div>
        <div class="field is-narrow">
          <label class="label">
            Index
          </label>
          <div class="control">
            <input
              class="input"
              style="max-width: 100px"
              type="number"
              placeholder="0"
              v-model.number="record.index"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="field-body">
      <div class="field">
        <label class="label">Ngày bắt đầu</label>
        <div class="control">
          <Datepicker
            v-bind="{ 
              record, 
              attr: 'stage_start', 
              onDate: (value) => dateSelected('stage_start', value)
            }"
          />
        </div>
      </div>
      <div class="field">
        <label class="label">Ngày kết thúc</label>
        <div class="control">
          <Datepicker
            v-bind="{ 
              record, 
              attr: 'stage_end', 
              onDate: (value) => dateSelected('stage_end', value)
            }"
          />
        </div>
      </div>
    </div>

    <div class="field is-grouped is-grouped-right mt-4">
      <div class="control">
        <button class="button is-primary has-text-white" @click="update">
          {{ record.id ? 'Cập nhật' : 'Thêm mới' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const {
  $resetNull,
  $snackbar,
  $getdata,
  $insertapi,
  $updateapi
} = useNuxtApp()

// Chỉ nhận id (không nhận row)
const props = defineProps({
  prefix: String,
  id: [Number, String, null] 
})

const emit = defineEmits(['close', 'modalevent'])

const input = useTemplateRef('first-input')
const record = ref({
  code: '',
  name: '',
  index: 0,
  stage_start: null,
  stage_end: null,
})

function dateSelected(attr, value) {
  // attr is 'stage_start' | 'stage_end'
  record.value[attr] = value;
}

async function loadStage() {
  if (!props.id) return;

  try {
    const row = await $getdata('stage', { id: props.id }, null, true)

    if (row) {
      record.value = row;
    } else {
      $snackbar('Không tìm thấy giai đoạn này')
      emit('close')
    }
  } catch (error) {
    console.error('Lỗi khi tải dữ liệu giai đoạn:', error)
    $snackbar('Lỗi tải dữ liệu')
    emit('close')
  }
}

async function update() {
  const data = $resetNull(record.value)

  try {
    const rs = data.id ? await $updateapi('stage', data) : await $insertapi('stage', data)

    if (rs === 'error') {
      $snackbar('Lỗi khi lưu dữ liệu')
      return
    }

    $snackbar('Lưu thành công!')
    emit('modalevent', { name: 'dataevent', data: rs })
    emit('close')
  } catch (err) {
    $snackbar('Có lỗi xảy ra khi lưu')
    console.error(err)
  }
}

onMounted(() => {
  input.value.focus();
  loadStage();
})
</script>