<template>
  <div class="container is-fluid px-4">
    <div class="field is-horizontal">
      <div class="field-body">
        <!-- Mã giỏ hàng -->
        <div class="field is-narrow">
          <label class="label">
            Mã <span class="has-text-danger">*</span>
          </label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder="Nhập mã"
              v-model="record.code"
              id="code"
            />
          </div>
        </div>

        <!-- Tên giỏ hàng -->
        <div class="field">
          <label class="label">
            Tên giỏ hàng <span class="has-text-danger">*</span>
          </label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder="Nhập tên giỏ hàng"
              v-model="record.name"
            />
          </div>
        </div>

        <!-- Index -->
        <div class="field" style="width: 120px;">
          <label class="label">
            Index <span class="has-text-danger">*</span>
          </label>
          <div class="control">
            <input
              class="input"
              type="number"
              placeholder="0"
              v-model.number="record.index"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Đại lý -->
    <div class="field mt-5">
      <label class="label">Đại lý</label>
      <div class="control">
        <SearchBox
          v-bind="{
            api: 'dealer',
            field: 'code',
            column: 'code',
            optionid: record.dealer || null, 
            first: true,
            viewaddon: viewAddon,
            addon: newAddon
          }"
          @option="dealerSelected"
        />
      </div>
    </div>

    <!-- Nút lưu -->
    <div class="field is-grouped is-grouped-right mt-6">
      <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, nextTick } from 'vue'
const {
  $copy,
  $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 record = ref({
  code: '',
  name: '',
  index: 0,
  dealer: null
})

const viewAddon = {}
const newAddon = {}

function dealerSelected(obj) {
  record.value.dealer = obj ? obj.id : null
}

async function loadCart() {
  if (!props.id) {
    record.value = {
      code: '',
      name: '',
      index: 0,
      dealer: null
    }
    return
  }

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

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

// Lưu dữ liệu
async function update() {
  const data = $resetNull(record.value)

  try {
    let rs
    if (data.id) {
      rs = await $updateapi('cart', data)
    } else {
      rs = await $insertapi('cart', 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)
  }
}

// Khởi tạo khi mở modal
onMounted(async () => {
  await loadCart()
  await nextTick()
  document.getElementById('code')?.focus()
})
</script>