<template>
  <a-modal
    v-model:visible="visible"
    :title="isEdit ? '编辑子网' : '新增子网'"
    :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="cidr" label="子网CIDR">
            <a-input v-model="formData.cidr" placeholder="例如: 10.0.1.0/24" />
          </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="16">
        <a-col :span="12">
          <a-form-item field="gateway" label="网关">
            <a-input v-model="formData.gateway" placeholder="例如: 10.0.1.1" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="vlan" label="VLAN">
            <a-input v-model="formData.vlan" placeholder="例如: VLAN 10" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item field="group_id" label="所属分组">
        <a-select v-model="formData.group_id" placeholder="请选择分组" allow-clear>
          <a-option v-for="group in groups" :key="group.id" :value="group.id">
            {{ group.name }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="reserved_ranges_json" label="保留地址范围">
        <a-input v-model="formData.reserved_ranges_json" placeholder='例如: [{"start":"10.0.1.1","end":"10.0.1.10"}]' />
      </a-form-item>
      <a-form-item field="description" label="描述">
        <a-textarea v-model="formData.description" 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 IPSubnetItem, type IPSubnetFormData, type IPGroupItem, createIPSubnet, updateIPSubnet } from '@/api/ops/ipam'

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

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<IPSubnetFormData>({
  cidr: '',
  name: '',
  gateway: '',
  vlan: '',
  group_id: undefined,
  reserved_ranges_json: '',
  description: '',
})

const rules = {
  cidr: [{ required: true, message: '请输入子网CIDR' }],
  name: [{ required: true, message: '请输入名称' }],
  gateway: [{ required: true, message: '请输入网关' }],
}

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
    if (val) {
      if (props.editData) {
        isEdit.value = true
        Object.assign(formData, {
          cidr: props.editData.cidr,
          name: props.editData.name,
          gateway: props.editData.gateway,
          vlan: props.editData.vlan,
          group_id: props.editData.group_id,
          reserved_ranges_json: props.editData.reserved_ranges_json,
          description: props.editData.description,
        })
      } else {
        isEdit.value = false
        Object.assign(formData, {
          cidr: '',
          name: '',
          gateway: '',
          vlan: '',
          group_id: undefined,
          reserved_ranges_json: '',
          description: '',
        })
      }
    }
  }
)

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 updateIPSubnet(props.editData.id, formData)
      Message.success('更新成功')
    } else {
      await createIPSubnet(formData)
      Message.success('创建成功')
    }
    emit('success')
    visible.value = false
  } catch (error) {
    Message.error('操作失败')
  }
}

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