<template>
  <a-modal
    v-model:visible="visible"
    :title="isEdit ? '编辑IP地址' : '新增IP地址'"
    :width="600"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item field="ip_address" label="IP地址">
            <a-input v-model="formData.ip_address" placeholder="例如: 10.0.1.10" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="subnet_id" label="所属子网">
            <a-select v-model="formData.subnet_id" placeholder="请选择子网" allow-clear>
              <a-option v-for="subnet in subnets" :key="subnet.id" :value="subnet.id">{{ subnet.name }} ({{ subnet.cidr }})</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item field="hostname" label="主机名">
            <a-input v-model="formData.hostname" placeholder="请输入主机名" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="mac_address" label="MAC地址">
            <a-input v-model="formData.mac_address" placeholder="例如: 00:50:56:AB:01:10" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="allocation_status" label="分配状态">
            <a-select v-model="formData.allocation_status" placeholder="请选择">
              <a-option value="allocated">已分配</a-option>
              <a-option value="unallocated">未分配</a-option>
              <a-option value="reserved">保留</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="source_type" label="来源类型">
            <a-select v-model="formData.source_type" placeholder="请选择">
              <a-option value="manual">手工</a-option>
              <a-option value="scan">扫描</a-option>
              <a-option value="dhcp">DHCP</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="status" label="运行状态">
            <a-select v-model="formData.status" placeholder="请选择">
              <a-option value="online">在线</a-option>
              <a-option value="offline">离线</a-option>
              <a-option value="unknown">未知</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item field="tags" label="标签">
        <a-input v-model="formData.tags" placeholder="多个标签用逗号分隔" />
      </a-form-item>
      <a-form-item field="remark" label="备注">
        <a-textarea v-model="formData.remark" placeholder="请输入备注" :max-length="200" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import type { FormInstance } from '@arco-design/web-vue/es/form'
import { Message } from '@arco-design/web-vue'
import { type IPAddressItem, type IPAddressFormData, type IPSubnetItem, createIPAddress, updateIPAddress } from '@/api/ops/ipam'

const props = defineProps<{
  modelValue: boolean
  editData?: IPAddressItem | null
  subnets?: IPSubnetItem[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}>()

const visible = ref(props.modelValue)
const formRef = ref<FormInstance>()
const isEdit = ref(false)

const formData = reactive<IPAddressFormData>({
  ip_address: '',
  subnet_id: undefined,
  hostname: '',
  mac_address: '',
  allocation_status: 'allocated',
  source_type: 'manual',
  status: 'unknown',
  tags: '',
  remark: '',
})

const rules = {
  ip_address: [{ required: true, message: '请输入IP地址' }],
  subnet_id: [{ required: true, message: '请选择所属子网' }],
}

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
    if (val) {
      if (props.editData) {
        isEdit.value = true
        Object.assign(formData, {
          ip_address: props.editData.ip_address,
          subnet_id: props.editData.subnet_id,
          hostname: props.editData.hostname,
          mac_address: props.editData.mac_address,
          allocation_status: props.editData.allocation_status,
          source_type: props.editData.source_type,
          status: props.editData.status,
          tags: props.editData.tags,
          remark: props.editData.remark,
        })
      } else {
        isEdit.value = false
        Object.assign(formData, {
          ip_address: '',
          subnet_id: undefined,
          hostname: '',
          mac_address: '',
          allocation_status: 'allocated',
          source_type: 'manual',
          status: 'unknown',
          tags: '',
          remark: '',
        })
      }
    }
  }
)

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleOk = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (valid) return

    if (isEdit.value && props.editData) {
      await updateIPAddress(props.editData.id, formData)
      Message.success('更新成功')
    } else {
      await createIPAddress(formData)
      Message.success('创建成功')
    }
    emit('success')
    visible.value = false
  } catch (error) {
    Message.error('操作失败')
  }
}

const handleCancel = () => {
  visible.value = false
}
</script>
