<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑机柜' : '新建机柜'"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :confirm-loading="submitting"
  >
    <a-form :model="form" layout="vertical" ref="formRef">
      <!-- 基础信息 -->
      <a-divider orientation="left">基础信息</a-divider>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="机柜名称" field="name" :rules="[{ required: true, message: '请输入机柜名称' }]">
            <a-input v-model="form.name" placeholder="请输入机柜名称" :max-length="200" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="机柜编码" field="code" :rules="[{ required: true, message: '请输入机柜编码' }]">
            <a-input v-model="form.code" placeholder="请输入机柜编码" :max-length="100" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="所属中心" field="datacenter_id" :rules="[{ required: true, message: '请选择所属中心' }]">
            <a-select
              v-model="form.datacenter_id"
              placeholder="请选择所属中心"
              :loading="loadingDatacenters"
              allow-search
              @change="handleDatacenterChange"
            >
              <a-option v-for="item in datacenterList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属楼层" field="floor_id" :rules="[{ required: true, message: '请选择所属楼层' }]">
            <a-select
              v-model="form.floor_id"
              placeholder="请选择所属楼层"
              :loading="loadingFloors"
              :disabled="!form.datacenter_id"
              allow-search
              @change="handleFloorChange"
              @search="handleFloorSearch"
            >
              <a-option v-for="item in floorList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="所属机房" field="room_id" :rules="[{ required: true, message: '请选择所属机房' }]">
            <a-select
              v-model="form.room_id"
              placeholder="请选择所属机房"
              :loading="loadingRooms"
              :disabled="!form.floor_id"
              allow-search
              @search="handleRoomSearch"
            >
              <a-option v-for="item in roomList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 规格参数 -->
      <a-divider orientation="left">规格参数</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="高度(U)" field="height">
            <a-input-number v-model="form.height" placeholder="默认42" :min="1" :max="100" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="宽度(mm)" field="width">
            <a-input-number v-model="form.width" placeholder="请输入宽度" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="深度(mm)" field="depth">
            <a-input-number v-model="form.depth" placeholder="请输入深度" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="重量(kg)" field="weight">
            <a-input-number v-model="form.weight" placeholder="请输入重量" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="最大承重(kg)" field="max_load">
            <a-input-number v-model="form.max_load" placeholder="请输入最大承重" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="电力容量(KW)" field="power_capacity">
            <a-input-number v-model="form.power_capacity" placeholder="请输入电力容量" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="电源相位" field="power_phase">
            <a-select v-model="form.power_phase" placeholder="请选择电源相位">
              <a-option value="单相">单相</a-option>
              <a-option value="三相">三相</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="PDU数量" field="pdu_count">
            <a-input-number v-model="form.pdu_count" placeholder="请输入PDU数量" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="网络接入方式" field="network_access">
            <a-input v-model="form.network_access" placeholder="请输入网络接入方式" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="交换机端口数" field="switch_ports">
            <a-input-number v-model="form.switch_ports" placeholder="请输入交换机端口数" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="制冷方式" field="cooling_type">
        <a-input v-model="form.cooling_type" placeholder="请输入制冷方式" />
      </a-form-item>

      <!-- 状态信息 -->
      <a-divider orientation="left">状态信息</a-divider>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="机柜类型" field="rack_type">
            <a-select v-model="form.rack_type" placeholder="请选择机柜类型">
              <a-option value="standard">标准机柜</a-option>
              <a-option value="blade">刀片机柜</a-option>
              <a-option value="network">网络机柜</a-option>
              <a-option value="storage">存储机柜</a-option>
              <a-option value="custom">定制机柜</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态" field="status">
            <a-select v-model="form.status" placeholder="请选择状态">
              <a-option value="idle">空闲</a-option>
              <a-option value="in_use">使用中</a-option>
              <a-option value="reserved">已预留</a-option>
              <a-option value="maintenance">维护中</a-option>
              <a-option value="offline">已下线</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="供应商" field="supplier_id">
        <a-select v-model="form.supplier_id" placeholder="请选择供应商" :loading="loadingSuppliers" allow-search>
          <a-option v-for="item in supplierList" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-option>
        </a-select>
      </a-form-item>

      <!-- 制造商信息 -->
      <a-divider orientation="left">制造商信息</a-divider>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="制造商" field="manufacturer">
            <a-input v-model="form.manufacturer" placeholder="请输入制造商" :max-length="100" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="型号" field="model">
            <a-input v-model="form.model" placeholder="请输入型号" :max-length="100" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="序列号" field="serial_number">
            <a-input v-model="form.serial_number" placeholder="请输入序列号" :max-length="100" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="价格(元)" field="price">
            <a-input-number v-model="form.price" placeholder="请输入价格" :min="0" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="采购日期" field="purchase_date">
        <a-date-picker
          v-model="form.purchase_date"
          placeholder="请选择采购日期"
          style="width: 100%"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>

      <!-- 责任人信息 -->
      <a-divider orientation="left">责任人信息</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="负责人" field="owner">
            <a-input v-model="form.owner" placeholder="请输入负责人" :max-length="50" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系电话" field="contact_phone">
            <a-input v-model="form.contact_phone" placeholder="请输入联系电话" :max-length="20" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用部门" field="department">
            <a-input v-model="form.department" placeholder="请输入使用部门" :max-length="100" />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 位置信息 -->
      <a-divider orientation="left">位置信息</a-divider>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="行号" field="row">
            <a-input-number v-model="form.row" placeholder="请输入行号" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="列号" field="column">
            <a-input-number v-model="form.column" placeholder="请输入列号" :min="0" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="X坐标" field="position_x">
            <a-input-number v-model="form.position_x" placeholder="请输入X坐标" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="Y坐标" field="position_y">
            <a-input-number v-model="form.position_y" placeholder="请输入Y坐标" :precision="2" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 其他 -->
      <a-divider orientation="left">其他</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="颜色标识" field="color">
            <a-input v-model="form.color" placeholder="请输入颜色值，如#FF0000" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="启用" field="enabled">
            <a-switch v-model="form.enabled" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="描述" field="description">
        <a-textarea v-model="form.description" placeholder="请输入描述" :auto-size="{ minRows: 3, maxRows: 6 }" :max-length="500" />
      </a-form-item>

      <a-form-item label="备注" field="remarks">
        <a-textarea v-model="form.remarks" placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 6 }" :max-length="500" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import { createRack, updateRack } from '@/api/ops/rack'
import { fetchDatacenterList, fetchSupplierList } from '@/api/ops/rack'
import { fetchFloorListByDatacenter } from '@/api/ops/floor'
import { fetchRoomListByFloor } from '@/api/ops/room'

interface Rack {
  id?: number
  name?: string
  code?: string
  datacenter_id?: number
  floor_id?: number
  room_id?: number
  height?: number
  width?: number
  depth?: number
  weight?: number
  max_load?: number
  power_capacity?: number
  power_phase?: string
  pdu_count?: number
  network_access?: string
  switch_ports?: number
  cooling_type?: string
  rack_type?: string
  status?: string
  supplier_id?: number
  manufacturer?: string
  model?: string
  serial_number?: string
  purchase_date?: string
  price?: number
  owner?: string
  contact_phone?: string
  department?: string
  row?: number
  column?: number
  position_x?: number
  position_y?: number
  color?: string
  enabled?: boolean
  description?: string
  remarks?: string
}

interface Props {
  visible: boolean
  rack: Rack | null
}

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

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

const formRef = ref()
const loadingDatacenters = ref(false)
const loadingFloors = ref(false)
const loadingRooms = ref(false)
const loadingSuppliers = ref(false)
const submitting = ref(false)
const datacenterList = ref<any[]>([])
const floorList = ref<any[]>([])
const roomList = ref<any[]>([])
const supplierList = ref<any[]>([])
let floorSearchTimer: number | undefined
let roomSearchTimer: number | undefined

// 表单数据
const form = ref({
  name: '',
  code: '',
  datacenter_id: undefined as number | undefined,
  floor_id: undefined as number | undefined,
  room_id: undefined as number | undefined,
  height: 42,
  width: undefined as number | undefined,
  depth: undefined as number | undefined,
  weight: undefined as number | undefined,
  max_load: undefined as number | undefined,
  power_capacity: undefined as number | undefined,
  power_phase: '',
  pdu_count: 0,
  network_access: '',
  switch_ports: 0,
  cooling_type: '',
  rack_type: 'standard',
  status: 'idle',
  supplier_id: undefined as number | undefined,
  manufacturer: '',
  model: '',
  serial_number: '',
  purchase_date: '',
  price: undefined as number | undefined,
  owner: '',
  contact_phone: '',
  department: '',
  row: 0,
  column: 0,
  position_x: undefined as number | undefined,
  position_y: undefined as number | undefined,
  color: '',
  enabled: true,
  description: '',
  remarks: '',
})

// 是否为编辑模式
const isEdit = computed(() => !!props.rack?.id)

// 加载数据中心列表
const loadDatacenterList = async () => {
  loadingDatacenters.value = true
  try {
    const res: any = await fetchDatacenterList()
    if (res.code === 0) {
      datacenterList.value = res.details || []
    }
  } catch (error) {
    console.error('获取数据中心列表失败:', error)
  } finally {
    loadingDatacenters.value = false
  }
}

// 加载楼层列表
const loadFloorList = async (datacenterId?: number, keyword?: string) => {
  if (!datacenterId) {
    floorList.value = []
    return
  }
  loadingFloors.value = true
  try {
    const res: any = await fetchFloorListByDatacenter(datacenterId, { name: keyword })
    if (res.code === 0) {
      const list = res.details?.data ?? res.data ?? res.details ?? []
      floorList.value = Array.isArray(list) ? list : []
    }
  } catch (error) {
    console.error('获取楼层列表失败:', error)
  } finally {
    loadingFloors.value = false
  }
}

// 加载供应商列表
const loadSupplierList = async () => {
  loadingSuppliers.value = true
  try {
    const res: any = await fetchSupplierList()
    if (res.code === 0) {
      supplierList.value = res.details || []
    }
  } catch (error) {
    console.error('获取供应商列表失败:', error)
  } finally {
    loadingSuppliers.value = false
  }
}

// 数据中心变化时重新加载楼层列表
const handleDatacenterChange = async (value: number) => {
  form.value.floor_id = undefined
  form.value.room_id = undefined
  roomList.value = []
  await loadFloorList(value)
}

const loadRoomList = async (floorId?: number, keyword?: string) => {
  if (!floorId) {
    roomList.value = []
    return
  }
  loadingRooms.value = true
  try {
    const res: any = await fetchRoomListByFloor(floorId, { name: keyword })
    if (res.code === 0) {
      const list = res.details?.data ?? res.data ?? res.details ?? []
      roomList.value = Array.isArray(list) ? list : []
    }
  } catch (error) {
    console.error('获取机房列表失败:', error)
    roomList.value = []
  } finally {
    loadingRooms.value = false
  }
}

const handleFloorChange = async (value: number) => {
  form.value.room_id = undefined
  await loadRoomList(value)
}

const handleFloorSearch = (keyword: string) => {
  if (!form.value.datacenter_id) return
  if (floorSearchTimer) {
    window.clearTimeout(floorSearchTimer)
  }
  floorSearchTimer = window.setTimeout(() => {
    loadFloorList(form.value.datacenter_id, keyword?.trim() || undefined)
  }, 300)
}

const handleRoomSearch = (keyword: string) => {
  if (!form.value.floor_id) return
  if (roomSearchTimer) {
    window.clearTimeout(roomSearchTimer)
  }
  roomSearchTimer = window.setTimeout(() => {
    loadRoomList(form.value.floor_id, keyword?.trim() || undefined)
  }, 300)
}

// 监听对话框显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      if (props.rack && isEdit.value) {
        // 编辑模式：填充表单
        form.value = {
          name: props.rack.name || '',
          code: props.rack.code || '',
          datacenter_id: props.rack.datacenter_id,
          floor_id: props.rack.floor_id,
          room_id: props.rack.room_id,
          height: props.rack.height || 42,
          width: props.rack.width,
          depth: props.rack.depth,
          weight: props.rack.weight,
          max_load: props.rack.max_load,
          power_capacity: props.rack.power_capacity,
          power_phase: props.rack.power_phase || '',
          pdu_count: props.rack.pdu_count || 0,
          network_access: props.rack.network_access || '',
          switch_ports: props.rack.switch_ports || 0,
          cooling_type: props.rack.cooling_type || '',
          rack_type: props.rack.rack_type || 'standard',
          status: props.rack.status || 'idle',
          supplier_id: props.rack.supplier_id,
          manufacturer: props.rack.manufacturer || '',
          model: props.rack.model || '',
          serial_number: props.rack.serial_number || '',
          purchase_date: props.rack.purchase_date || '',
          price: props.rack.price,
          owner: props.rack.owner || '',
          contact_phone: props.rack.contact_phone || '',
          department: props.rack.department || '',
          row: props.rack.row || 0,
          column: props.rack.column || 0,
          position_x: props.rack.position_x,
          position_y: props.rack.position_y,
          color: props.rack.color || '',
          enabled: props.rack.enabled !== undefined ? props.rack.enabled : true,
          description: props.rack.description || '',
          remarks: props.rack.remarks || '',
        }
        // 加载对应数据中心的楼层列表
        if (props.rack.datacenter_id) {
          loadFloorList(props.rack.datacenter_id)
        }
        if (props.rack.floor_id) {
          loadRoomList(props.rack.floor_id)
        }
      } else {
        // 新建模式：重置表单
        form.value = {
          name: '',
          code: '',
          datacenter_id: undefined,
          floor_id: undefined,
          room_id: undefined,
          height: 42,
          width: undefined,
          depth: undefined,
          weight: undefined,
          max_load: undefined,
          power_capacity: undefined,
          power_phase: '',
          pdu_count: 0,
          network_access: '',
          switch_ports: 0,
          cooling_type: '',
          rack_type: 'standard',
          status: 'idle',
          supplier_id: undefined,
          manufacturer: '',
          model: '',
          serial_number: '',
          purchase_date: '',
          price: undefined,
          owner: '',
          contact_phone: '',
          department: '',
          row: 0,
          column: 0,
          position_x: undefined,
          position_y: undefined,
          color: '',
          enabled: true,
          description: '',
          remarks: '',
        }
        floorList.value = []
        roomList.value = []
      }
    }
  }
)

// 确认提交
const handleOk = async () => {
  const valid = await formRef.value?.validate()
  if (valid) return

  submitting.value = true
  try {
    const data: any = {
      name: form.value.name,
      code: form.value.code,
      datacenter_id: form.value.datacenter_id,
      floor_id: form.value.floor_id,
      room_id: form.value.room_id,
      height: form.value.height,
      width: form.value.width,
      depth: form.value.depth,
      weight: form.value.weight,
      max_load: form.value.max_load,
      power_capacity: form.value.power_capacity,
      power_phase: form.value.power_phase,
      pdu_count: form.value.pdu_count,
      network_access: form.value.network_access,
      switch_ports: form.value.switch_ports,
      cooling_type: form.value.cooling_type,
      rack_type: form.value.rack_type,
      status: form.value.status,
      supplier_id: form.value.supplier_id,
      manufacturer: form.value.manufacturer,
      model: form.value.model,
      serial_number: form.value.serial_number,
      purchase_date: form.value.purchase_date,
      price: form.value.price,
      owner: form.value.owner,
      contact_phone: form.value.contact_phone,
      department: form.value.department,
      row: form.value.row,
      column: form.value.column,
      position_x: form.value.position_x,
      position_y: form.value.position_y,
      color: form.value.color,
      enabled: form.value.enabled,
      description: form.value.description,
      remarks: form.value.remarks,
    }

    let res
    if (isEdit.value && props.rack?.id) {
      // 编辑机柜
      data.id = props.rack.id
      res = await updateRack(data)
    } else {
      // 新建机柜
      res = await createRack(data)
    }

    if (res.code === 0) {
      Message.success(isEdit.value ? '编辑成功' : '创建成功')
      emit('success')
      emit('update:visible', false)
    } else {
      Message.error(res.message || (isEdit.value ? '编辑失败' : '创建失败'))
    }
  } catch (error) {
    Message.error(isEdit.value ? '编辑失败' : '创建失败')
    console.error(error)
  } finally {
    submitting.value = false
  }
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}

// 处理对话框可见性变化
const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}

// 组件挂载时加载数据
onMounted(() => {
  loadDatacenterList()
  loadSupplierList()
})
</script>

<script lang="ts">
export default {
  name: 'RackFormDialog',
}
</script>

<style scoped lang="less"></style>
