<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑网络设备' : '新增网络设备'"
    @ok="handleOk"
    @cancel="handleCancel"
    @update:visible="handleUpdateVisible"
    :confirm-loading="confirmLoading"
    width="800px"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item field="unique_id" label="唯一标识">
            <a-input
              v-model="formData.unique_id"
              placeholder="输入为空系统自动生成 UUID"
              :disabled="isEdit"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="name" label="设备名称">
            <a-input v-model="formData.name" placeholder="请输入设备名称" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item field="type" label="设备类型">
            <a-select v-model="formData.type" placeholder="请选择设备类型">
              <a-option value="交换机">交换机</a-option>
              <a-option value="路由器">路由器</a-option>
              <a-option value="防火墙">防火墙</a-option>
              <a-option value="负载均衡">负载均衡</a-option>
              <a-option value="无线控制器">无线控制器</a-option>
              <a-option value="其它">其它</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="manu" label="厂商">
            <a-select v-model="formData.manu" placeholder="请选择厂商">
              <a-option value="华为">华为</a-option>
              <a-option value="华三">华三</a-option>
              <a-option value="思科">思科</a-option>
              <a-option value="深信服">深信服</a-option>
              <a-option value="F5">F5</a-option>
              <a-option value="锐捷">锐捷</a-option>
              <a-option value="TP-LINK">TP-LINK</a-option>
              <a-option value="其它">其它</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item field="model_num" label="型号">
            <a-input v-model="formData.model_num" placeholder="请输入设备型号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="protocol" label="通讯协议">
            <a-select v-model="formData.protocol" placeholder="请选择通讯协议">
              <a-option value="SNMP">SNMP</a-option>
              <a-option value="TELNET">TELNET</a-option>
              <a-option value="SSH">SSH</a-option>
              <a-option value="HTTP">HTTP</a-option>
              <a-option value="HTTPS">HTTPS</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item field="ip" label="IP 地址">
            <a-input v-model="formData.ip" placeholder="可以输入多个 IP，逗号做分隔" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="tags" label="标签">
            <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item field="location" label="位置信息">
          <a-input
            v-model="formData.location"
            placeholder="请输入位置信息"
          />
      </a-form-item>
      
      <a-form-item field="remark" label="备注信息">
        <a-textarea
          v-model="formData.remark"
          placeholder="请输入备注信息"
          :rows="4"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

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

interface Props {
  visible: boolean
  record?: any
}

const props = withDefaults(defineProps<Props>(), {
  record: () => ({}),
})

const emit = defineEmits(['update:visible', 'success'])

const formRef = ref<FormInstance>()
const confirmLoading = ref(false)

const isEdit = computed(() => !!props.record?.id)

const formData = reactive({
  unique_id: '',
  name: '',
  type: '',
  manu: '',
  model_num: '',
  protocol: '',
  ip: '',
  tags: '',
  location: '',
  remark: '',
})

const rules = {
  name: [{ required: true, message: '请输入设备名称' }],
  type: [{ required: true, message: '请选择设备类型' }],
  manu: [{ required: true, message: '请选择厂商' }],
}

watch(
  () => props.visible,
  (val) => {
    if (val) {
      if (isEdit.value && props.record) {
        Object.assign(formData, props.record)
      } else {
        Object.assign(formData, {
          unique_id: '',
          name: '',
          type: '',
          manu: '',
          model_num: '',
          protocol: '',
          ip: '',
          tags: '',
          location: '',
          remark: '',
        })
      }
    }
  }
)

const handleOk = async () => {
  try {
    await formRef.value?.validate()
    
    if (!formData.unique_id) {
      formData.unique_id = uuidv4()
    }

    confirmLoading.value = true
    
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    Message.success(isEdit.value ? '更新成功' : '创建成功')
    emit('success')
    handleCancel()
  } catch (error) {
    console.error('验证失败:', error)
  } finally {
    confirmLoading.value = false
  }
}

const handleUpdateVisible = (value: boolean) => {
  emit('update:visible', value)
}

const handleCancel = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>