<template>
  <a-modal
    :visible="visible"
    title="添加子分组"
    @ok="handleSubmit"
    @cancel="handleClose"
    @update:visible="handleUpdateVisible"
    :confirm-loading="submitting"
  >
    <a-form
      :model="formData"
      layout="vertical"
      :label-col-props="{ span: 24 }"
      :wrapper-col-props="{ span: 24 }"
    >
      <!-- 父分组提示 -->
      <a-alert
        v-if="parentGroup"
        type="info"
        style="margin-bottom: 16px;"
      >
        <template #icon><icon-info-circle /></template>
        <div>
          <div style="color: var(--color-text-3); font-size: 12px; margin-bottom: 4px;">
            将作为以下分组的子分组：
          </div>
          <div style="font-weight: 600; color: rgb(var(--primary-6));">
            {{ parentGroup.name }}
          </div>
        </div>
      </a-alert>

      <a-form-item label="分组名称" required>
        <a-input
          v-model="formData.name"
          placeholder="请输入子分组名称"
          :max-length="100"
          allow-clear
        />
      </a-form-item>

      <a-form-item label="排序权重">
        <a-input-number
          v-model="formData.sort"
          placeholder="请输入排序权重"
          :min="0"
          :max="9999"
          style="width: 100%;"
        />
        <template #extra>
          <span style="color: var(--color-text-3); font-size: 12px;">数字越小越靠前</span>
        </template>
      </a-form-item>

      <a-form-item label="是否启用">
        <a-switch v-model="formData.enable" />
      </a-form-item>

      <a-form-item label="分组描述">
        <a-textarea
          v-model="formData.description"
          placeholder="请输入分组描述（可选）"
          :max-length="500"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconInfoCircle } from '@arco-design/web-vue/es/icon'
import { createTopologyGroup } from '@/api/ops/netarchTopo'

interface Props {
  visible: boolean
  parentGroup?: { id: number; name: string } | null
}

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

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

const emit = defineEmits<Emits>()

const submitting = ref(false)

const formData = reactive({
  name: '',
  parent_id: 0,
  description: '',
  sort: 0,
  enable: true,
})

// 监听 visible 变化
watch(() => props.visible, (val) => {
  if (val && props.parentGroup) {
    formData.name = ''
    formData.parent_id = props.parentGroup.id
    formData.description = ''
    formData.sort = 0
    formData.enable = true
  }
})

// 更新可见性
const handleUpdateVisible = (value: boolean) => {
  emit('update:visible', value)
}

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
}

// 提交表单
const handleSubmit = async () => {
  if (!formData.name.trim()) {
    Message.warning('请输入分组名称')
    return
  }

  submitting.value = true
  try {
    const response = await createTopologyGroup(formData)
    if (response.code === 0) {
      Message.success('子分组创建成功')
      emit('success')
      handleClose()
    } else {
      Message.error(response.message || '创建失败')
    }
  } catch (error) {
    console.error('创建子分组失败:', error)
    Message.error('创建失败')
  } finally {
    submitting.value = false
  }
}
</script>

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