<template>
  <a-modal v-model:visible="dialogVisible" title="预留U位" :width="600" @ok="handleOk" @cancel="handleCancel">
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-form-item field="start_unit" label="起始U位" required>
        <a-input-number v-model="formData.start_unit" :min="1" :max="rackHeight" placeholder="请输入起始U位" style="width: 100%" />
      </a-form-item>

      <a-form-item field="occupied_units" label="占用U位数量" required>
        <a-input-number v-model="formData.occupied_units" :min="1" :max="rackHeight" placeholder="请输入占用U位数量" style="width: 100%" />
      </a-form-item>

      <a-form-item field="reserved_for" label="预留对象" required>
        <a-input v-model="formData.reserved_for" placeholder="请输入预留对象（部门或项目）" />
      </a-form-item>

      <a-form-item field="reserved_until" label="预留截止时间" required>
        <a-date-picker
          v-model="formData.reserved_until"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择预留截止时间"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item field="description" label="预留信息">
        <a-textarea v-model="formData.description" placeholder="请输入预留信息" :auto-size="{ minRows: 3, maxRows: 5 }" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ReserveUnitDialog',
})
</script>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'

interface Props {
  visible: boolean
  rackId: number
  rackHeight: number
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
})

const formRef = ref()
const formData = reactive({
  start_unit: 1,
  occupied_units: 1,
  reserved_for: '',
  reserved_until: '',
  description: '',
})

const rules = {
  start_unit: [{ required: true, message: '请输入起始U位' }],
  occupied_units: [{ required: true, message: '请输入占用U位数量' }],
  reserved_for: [{ required: true, message: '请输入预留对象' }],
  reserved_until: [{ required: true, message: '请选择预留截止时间' }],
}

const handleOk = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (!valid) {
      // 发送预留请求
      const { reserveUnit } = await import('@/api/ops/unit')

      // 将日期转换为ISO格式
      let reservedUntil = ''
      if (formData.reserved_until) {
        const date = new Date(formData.reserved_until as any)
        reservedUntil = date.toISOString()
      }

      const params = {
        rack_id: props.rackId,
        start_unit: formData.start_unit,
        occupied_units: formData.occupied_units,
        reserved_for: formData.reserved_for,
        reserved_until: reservedUntil,
        description: formData.description,
      }
      const res = await reserveUnit(params)
      if (res.code === 0) {
        Message.success('预留成功')
        emit('success')
        handleCancel()
      } else {
        Message.error(res.message || '预留失败')
      }
    }
  } catch (error) {
    console.error('预留失败:', error)
  }
}

const handleCancel = () => {
  dialogVisible.value = false
  resetForm()
}

const resetForm = () => {
  formData.start_unit = 1
  formData.occupied_units = 1
  formData.reserved_for = ''
  formData.reserved_until = ''
  formData.description = ''
  formRef.value?.resetFields()
}

watch(
  () => props.visible,
  (val) => {
    if (!val) {
      resetForm()
    }
  }
)
</script>
