<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import apiBizAllocation from '@/api/modules/bizAllocation'

export interface Props { id?: number | string }
const props = withDefaults(defineProps<Props>(), { id: '' })

const loading = ref(false)
const isEdit = computed(() => props.id === '')
const formRef = useTemplateRef<FormInstance>('formRef')
const form = ref({
  item_type: undefined as string | undefined, item_id: undefined as number | undefined,
  owner_type: 'user' as string, owner_id: undefined as number | undefined,
  quantity: 1, assign_date: '', expected_return_date: '', note: '',
})

const rules = {
  item_type: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
  item_id: [{ required: true, message: '请输入资源ID', trigger: 'blur' }],
  owner_type: [{ required: true, message: '请选择归属者类型', trigger: 'change' }],
  owner_id: [{ required: true, message: '请输入归属者ID', trigger: 'blur' }],
}

// Detail mode
const detailData = ref<any>(null)

onMounted(() => {
  if (props.id !== '') getInfo()
})

function getInfo() {
  loading.value = true
  apiBizAllocation.detail(props.id as number).then((res: any) => {
    loading.value = false
    detailData.value = res.data
  }).catch(() => { loading.value = false })
}

defineExpose({
  submit() {
    return new Promise<void>((resolve) => {
      if (!isEdit.value) { resolve(); return }
      formRef.value?.validate().then(() => {
        apiBizAllocation.assign({ ...form.value }).then(() => { faToast.success('分配成功'); resolve() })
      }).catch(() => {})
    })
  },
})
</script>

<template>
  <div v-if="loading" class="flex-center py-12"><ASpin /></div>
  <!-- Detail mode -->
  <div v-else-if="!isEdit && detailData" class="text-sm space-y-3">
    <div class="grid grid-cols-2 gap-3">
      <div><span class="text-gray-500">资源类型：</span><ATag>{{ detailData.item_type }}</ATag></div>
      <div><span class="text-gray-500">资源ID：</span>{{ detailData.item_id }}</div>
      <div><span class="text-gray-500">归属者类型：</span>{{ detailData.owner_type }}</div>
      <div><span class="text-gray-500">归属者：</span>{{ detailData.assignee_name || detailData.owner_id }}</div>
      <div><span class="text-gray-500">位置：</span>{{ detailData.location_name }}</div>
      <div><span class="text-gray-500">数量：</span>{{ detailData.quantity }}</div>
      <div><span class="text-gray-500">状态：</span><ATag :color="detailData.status === 'active' ? 'blue' : 'default'">{{ detailData.status }}</ATag></div>
      <div><span class="text-gray-500">分配时间：</span>{{ detailData.assign_date }}</div>
      <div><span class="text-gray-500">预计归还：</span>{{ detailData.expected_return_date }}</div>
      <div><span class="text-gray-500">实际归还：</span>{{ detailData.return_date }}</div>
    </div>
    <div v-if="detailData.note"><span class="text-gray-500">备注：</span>{{ detailData.note }}</div>
  </div>
  <!-- Create mode -->
  <AForm v-else ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
    <AFormItem label="资源类型" name="item_type">
      <ASelect v-model:value="form.item_type" placeholder="请选择" :options="[
        { value: 'device', label: '设备' }, { value: 'license', label: '许可' }, { value: 'accessory', label: '配件' },
      ]" />
    </AFormItem>
    <AFormItem label="资源ID" name="item_id"><AInputNumber v-model:value="form.item_id" placeholder="请输入资源ID" class="w-full" /></AFormItem>
    <AFormItem label="归属者类型" name="owner_type">
      <ASelect v-model:value="form.owner_type" :options="[{ value: 'user', label: '用户' }, { value: 'location', label: '位置' }]" />
    </AFormItem>
    <AFormItem label="归属者ID" name="owner_id"><AInputNumber v-model:value="form.owner_id" placeholder="请输入归属者ID" class="w-full" /></AFormItem>
    <AFormItem label="数量" name="quantity"><AInputNumber v-model:value="form.quantity" :min="1" class="w-full" /></AFormItem>
    <AFormItem label="分配时间" name="assign_date"><ADatePicker v-model:value="form.assign_date" show-time value-format="YYYY-MM-DD HH:mm:ss" class="w-full" /></AFormItem>
    <AFormItem label="预计归还" name="expected_return_date"><ADatePicker v-model:value="form.expected_return_date" value-format="YYYY-MM-DD" class="w-full" /></AFormItem>
    <AFormItem label="备注" name="note"><AInput v-model:value="form.note" placeholder="请输入备注" /></AFormItem>
  </AForm>
</template>
