<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="middleware" label="中间件类型">
            <a-select v-model="formData.middleware" placeholder="请选择中间件类型">
              <a-option value="nginx">Nginx</a-option>
              <a-option value="tomcat">Tomcat</a-option>
              <a-option value="redis">Redis</a-option>
              <a-option value="kafka">Kafka</a-option>
              <a-option value="rabbitmq">RabbitMQ</a-option>
              <a-option value="elasticsearch">Elasticsearch</a-option>
              <a-option value="other">其它</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="version" label="版本">
            <a-input v-model="formData.version" 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="tags" label="标签">
        <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
      </a-form-item>
      
      <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="remote_port" label="远程访问端口">
            <a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item field="agent_url" label="Agent URL配置">
        <a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" />
      </a-form-item>

      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item field="data_collection" label="数据采集">
            <a-switch v-model="formData.data_collection" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
            <a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
              <a-option :value="1">1分钟</a-option>
              <a-option :value="5">5分钟</a-option>
              <a-option :value="10">10分钟</a-option>
              <a-option :value="30">30分钟</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <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 selectedLocation = ref('')

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

const formData = reactive({
  unique_id: '',
  name: '',
  middleware: '',
  version: '',
  location: '',
  tags: '',
  ip: '',
  remote_port: '',
  agent_url: '',
  data_collection: false,
  collection_interval: 5,
  remark: '',
})

const rules = {
  name: [{ required: true, message: '请输入中间件名称' }],
  middleware: [{ required: true, message: '请选择中间件类型' }],
  version: [{ required: true, message: '请输入版本号' }],
}

const locationOptions = ref([
  { label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
  { label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
  { label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
  { label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
  { label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
])

watch(
  () => props.visible,
  (val) => {
    if (val) {
      if (isEdit.value && props.record) {
        Object.assign(formData, props.record)
      } else {
        Object.assign(formData, {
          unique_id: '',
          name: '',
          middleware: '',
          version: '',
          location: '',
          tags: '',
          ip: '',
          remote_port: '',
          agent_url: '',
          data_collection: false,
          collection_interval: 5,
          remark: '',
        })
      }
    }
  }
)

const handleLocationSelect = (value: string) => {
  formData.location = value
}

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>
