<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑设备' : '添加设备'"
    @cancel="handleClose"
    @ok="handleSave"
    :ok-text="isEdit ? '保存' : '添加'"
    :ok-button-props="{ disabled: !formData.label }"
    width="600px"
  >
    <a-form :model="formData" layout="vertical" class="node-edit-form">
      <a-form-item label="设备类型" required>
        <a-select v-model="formData.type">
          <a-option
            v-for="(config, key) in DEVICE_TYPE_CONFIG"
            :key="key"
            :value="key"
          >
            <a-space align="center">
              <component :is="getIconComponent(key)" :size="18" />
              <span>{{ config.label }}</span>
            </a-space>
          </a-option>
        </a-select>
      </a-form-item>

      <a-form-item label="设备名称" required>
        <a-input
          v-model="formData.label"
          placeholder="请输入设备名称"
          :max-length="50"
        />
      </a-form-item>

      <a-form-item label="IP地址">
        <a-input
          v-model="formData.ip"
          placeholder="如: 192.168.1.1"
        />
      </a-form-item>

      <a-form-item label="流量信息">
        <a-input
          v-model="formData.traffic"
          placeholder="如: 100Mbps"
        />
      </a-form-item>

      <a-form-item label="设备描述">
        <a-textarea
          v-model="formData.description"
          placeholder="请输入设备描述"
          :max-length="200"
          :auto-size="{ minRows: 3, maxRows: 6 }"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { Node } from '@vue-flow/core';
import { DEVICE_TYPE_CONFIG } from '../config';
import type { DeviceType, NodeData } from '../types';
import {
  IconDesktop,
  IconSafe,
  IconFile,
  IconStorage,
  IconCloud,
} from '@arco-design/web-vue/es/icon';

interface Props {
  visible: boolean;
  node: Node | null;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'save', nodeId: string | null, data: Partial<NodeData>): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formData = ref({
  label: '',
  type: 'server' as DeviceType,
  ip: '',
  traffic: '',
  description: '',
});

const iconMap: Record<string, any> = {
  server: IconDesktop,
  switch: IconSafe,
  router: IconFile,
  firewall: IconSafe,
  storage: IconStorage,
  cloud: IconCloud,
  desktop: IconDesktop,
  mobile: IconDesktop,
};

const getIconComponent = (type: string) => {
  return iconMap[type] || IconDesktop;
};

const isEdit = computed(() => !!props.node);

watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      if (props.node) {
        formData.value = {
          label: props.node.data?.label || '',
          type: props.node.data?.type || 'server',
          ip: props.node.data?.ip || '',
          traffic: props.node.data?.traffic || '',
          description: props.node.data?.description || '',
        };
      } else {
        formData.value = {
          label: '',
          type: 'server',
          ip: '',
          traffic: '',
          description: '',
        };
      }
    }
  }
);

const handleSave = () => {
  emit('save', props.node?.id || null, formData.value);
  handleClose();
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
.node-edit-form {
  padding: 8px 0;
}
</style>
