<template>
  <div class="nodes-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <div class="left">
        <h2 class="title">服务器管理</h2>
        <el-tag type="info" effect="plain" class="count-tag">共 {{ serverStats.total }} 台服务器</el-tag>
      </div>
      <div class="actions">
        <el-radio-group v-model="serverType" size="large" class="server-type-selector">
          <el-radio-button value="dockerContainer">
            <el-icon><Monitor /></el-icon>容器云服务器
          </el-radio-button>
          <el-radio-button value="hyperV">
            <el-icon><cpu /></el-icon>虚拟机云服务器
          </el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="handleAdd" :icon="Plus" class="action-btn">添加服务器</el-button>
        <el-button @click="handleRefresh" :icon="Refresh" class="action-btn">刷新</el-button>
      </div>
    </div>

    <!-- 服务器概览统计卡片 -->
    <div class="stats-panel">
      <div class="stat-card total-card">
        <div class="stat-icon"><el-icon><Monitor /></el-icon></div>
        <div class="stat-content">
          <div class="stat-value">{{ serverStats.total }}</div>
          <div class="stat-label">总服务器数</div>
        </div>
      </div>
      <div class="stat-card online-card">
        <div class="stat-icon"><el-icon><CircleCheck /></el-icon></div>
        <div class="stat-content">
          <div class="stat-value">{{ serverStats.online }}</div>
          <div class="stat-label">在线服务器</div>
        </div>
      </div>
      <div class="stat-card offline-card">
        <div class="stat-icon"><el-icon><CircleClose /></el-icon></div>
        <div class="stat-content">
          <div class="stat-value">{{ serverStats.offline }}</div>
          <div class="stat-label">离线服务器</div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section">
      <el-input
        v-model="filterForm.name"
        placeholder="搜索服务器名称"
        prefix-icon="Search"
        clearable
        @keyup.enter="handleSearch"
        class="search-input"
      />
      <div class="filter-actions">
        <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
        <el-button @click="resetFilter" :icon="Delete">重置</el-button>
      </div>
    </div>

    <!-- 服务器列表 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="serverData"
        border
        stripe
        style="width: 100%"
        table-layout="auto"
        class="server-table"
      >
        <el-table-column prop="server_id" label="ID" min-width="80" show-overflow-tooltip />
        <el-table-column prop="name" label="服务器名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="server_ip" label="IP地址" min-width="120" show-overflow-tooltip />
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <div class="status-tag">
              <span class="status-dot" :class="{ 'online': scope.row.state == 1, 'offline': scope.row.state != 1 }"></span>
              <span>{{ scope.row.state == 1 ? '在线' : '离线' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="购物车展示" width="120" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.hide"
              :active-value="0"
              :inactive-value="1"
              @change="handleVisibilityChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-tooltip content="管理服务器" placement="top" :hide-after="1500">
                <el-button 
                  type="primary" 
                  :icon="Menu"
                  circle
                  @click="handleManage(scope.row)"
                />
              </el-tooltip>
              <el-tooltip content="编辑服务器" placement="top" :hide-after="1500">
                <el-button 
                  type="warning" 
                  :icon="Edit"
                  circle
                  @click="handleEdit(scope.row)"
                />
              </el-tooltip>
              <el-tooltip content="删除服务器" placement="top" :hide-after="1500">
                <el-button 
                  type="danger" 
                  :icon="Delete"
                  circle
                  @click="handleDelete(scope.row)"
                />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </div>

    <!-- 添加/编辑服务器对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加服务器' : '编辑服务器'"
      :width="dialogWidth"
      destroy-on-close
      :close-on-click-modal="false"
      :before-close="handleDialogClose"
      class="server-dialog"
    >
      <el-form :model="serverForm" label-width="120px" :rules="rules" ref="serverFormRef">
        <el-form-item label="服务器名称" prop="name">
          <el-input v-model="serverForm.name" placeholder="请输入服务器名称" />
        </el-form-item>
        <el-form-item label="IP地址" prop="server_ip">
          <el-input v-model="serverForm.server_ip" placeholder="请输入服务器IP" />
        </el-form-item>
        <el-form-item label="地区" prop="location">
          <el-cascader
            v-model="locationArray"
            :options="regionsBuff"
            :props="optionProps"
            placeholder="请选择位置"
            style="width: 100%"
          />
        </el-form-item>
        
        <div class="form-section-title">服务器配置</div>
        <div class="form-grid">
          <el-form-item label="带宽">
            <el-input v-model="serverForm.bandwidth" placeholder="带宽/mbps">
              <template #append>Mbps</template>
            </el-input>
          </el-form-item>
          <el-form-item label="硬盘">
            <el-input v-model="serverForm.disk" placeholder="硬盘大小">
              <template #append>GB</template>
            </el-input>
          </el-form-item>
          <el-form-item label="内存">
            <el-input v-model="serverForm.memory" placeholder="内存大小">
              <template #append>MB</template>
            </el-input>
          </el-form-item>
          <el-form-item label="CPU">
            <el-input v-model="serverForm.cpu" placeholder="CPU核心数">
              <template #append>核</template>
            </el-input>
          </el-form-item>
        </div>
        
        <div class="form-section-title">服务器类型</div>
        <el-form-item label="类型选项">
          <el-radio-group v-model="serverForm.server_type">
            <el-radio-button value="dockerContainer">容器云服务器</el-radio-button>
            <el-radio-button value="hyperV">虚拟机云服务器</el-radio-button>
          </el-radio-group>
        </el-form-item>
        
        <div class="form-section-title">认证与展示</div>
        <el-form-item v-if="serverForm.server_type === 'dockerContainer'" label="Auth-ID">
          <el-input v-model="serverForm.auth_id" placeholder="服务器管理id" />
        </el-form-item>
        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="Guacamole配置">
          <el-select
            v-model="serverForm.guacamole_id"
            placeholder="请选择Guacamole配置"
            filterable
            clearable
            :loading="guacamoleLoading"
            @change="handleGuacamoleChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in guacamoleList"
              :key="item.id"
              :label="`${item.url} (${item.username})`"
              :value="item.id"
            >
              <div class="guacamole-option">
                <div class="option-main">{{ item.url }}</div>
                <div class="option-sub">用户: {{ item.username }} | 创建时间: {{ item.created_at }}</div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="登录用户名">
          <el-input v-model="serverForm.username" placeholder="服务器登录用户名" />
        </el-form-item>
        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="登录密码">
          <el-input 
            v-model="serverForm.password" 
            placeholder="服务器登录密码" 
            type="password" 
            show-password
          />
        </el-form-item>
        <el-form-item v-if="serverForm.server_type === 'hyperV'" label="端口映射">
          <el-switch
            v-model="serverForm.allow_port_forward"
            :active-value="1"
            :inactive-value="0"
            active-text="开启"
            inactive-text="关闭"
          />
          <div class="form-item-description">服务器是否开放端口映射</div>
        </el-form-item>
        <el-form-item label="Token">
          <el-input 
            v-model="serverForm.server_token" 
            placeholder="节点服务器管理员的token" 
            type="password" 
            show-password
          />
        </el-form-item>
        <el-form-item label="展示卡片">
          <el-input 
            v-model="serverForm.html" 
            type="textarea" 
            :rows="3"
            placeholder="购买展示卡片的样式" 
          />
        </el-form-item>
        <el-form-item label="控制台连接">
          <el-input v-model="serverForm.console_url" placeholder="若使用https协议则必须进行反向代理，默认可不填写" />
        </el-form-item>
        <el-form-item label="购物车显示">
          <el-switch
            v-model="serverForm.hide"
            :active-value="0"
            :inactive-value="1"
            active-text="显示"
            inactive-text="隐藏"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div class="left-actions">
            <!-- <el-button @click="getFormContent" :icon="Download">粘贴配置</el-button> -->
            <!-- <el-button @click="copyFormContent" :icon="Upload">复制配置</el-button> -->
          </div>
          <div class="right-actions">
            <el-button @click="handleDialogClose">取消</el-button>
            <el-button type="primary" @click="submitForm">确认</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Plus, Refresh, Search, Edit, Delete, Menu,
  Monitor, CircleCheck, CircleClose, 
  Download, Upload, Cpu
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { getServer, addServer, editServer, deleteServer, getServerStatus } from '@/utils/acs/server'
import { copyDomText } from "@/utils/hide"
import {getGuacamoleList} from '@/utils/acs/guacamole'

const router = useRouter()

// 服务器类型
const serverType = ref('dockerContainer')

// 筛选表单
const filterForm = reactive({
  name: ''
})

// 重置筛选
const resetFilter = () => {
  filterForm.name = ''
  handleSearch()
}

// 表格数据
const loading = ref(false)
const serverData = ref([])

// 服务器统计数据
const serverStats = reactive({
  total: 0,
  online: 0,
  offline: 0
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 处理页码变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchData()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchData()
}

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref('add') // 'add', 'edit'

// Guacamole 相关数据
const guacamoleList = ref([])
const guacamoleLoading = ref(false)

// 表单对象和规则
const serverFormRef = ref(null)
const serverForm = reactive({
  server_id: '',
  name: '',
  server_ip: '',
  location: '',
  bandwidth: '',
  disk: '',
  memory: '',
  cpu: '',
  state: '',
  auth_id: '',
  server_token: '',
  server_type: 'dockerContainer',
  html: '',
  hide: 0,
  console_url: ''
})

const rules = {
  name: [{ required: true, message: '请输入服务器名称', trigger: 'blur' }],
  server_ip: [
    { required: true, message: '请输入IP地址', trigger: 'blur' },
    { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: '请输入有效的IP地址', trigger: 'blur' }
  ],
  guacamole_id: [
    { required: false, message: '请输入Guacamole服务ID', trigger: 'blur' }
  ],
  username: [
    { required: false, message: '请输入登录用户名', trigger: 'blur' }
  ],
  password: [
    { required: false, message: '请输入登录密码', trigger: 'blur' }
  ]
}

// 处理搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchData()
}

// 刷新数据
const handleRefresh = () => {
  ElNotification({
    title: '刷新中',
    message: '正在重新获取服务器数据',
    type: 'info',
    duration: 2000
  })
  fetchData()
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const res = await getServer(
      pagination.currentPage, 
      pagination.pageSize, 
      filterForm.name || '',
      serverType.value
    )
    
    if (res && res.data) {
      serverData.value = res.data.data || []
      pagination.total = res.data.count || 0
      
      // 更新统计数据
      updateStats()
      
      // 获取服务器状态
      const statusPromises = serverData.value.map(server => 
        getServerStatus(server.server_id)
          .then(statusRes => {
            // 这里可以更新服务器状态，如果API返回了状态信息
            return { id: server.server_id, success: true, data: statusRes?.data }
          })
          .catch(err => {
            console.error(`获取服务器 ${server.server_id} 状态失败:`, err)
            return { id: server.server_id, success: false, error: err }
          })
      )
      
      Promise.allSettled(statusPromises).then(results => {
        // 统计服务器状态获取情况
        const failedCount = results.filter(r => !r.value?.success).length
        if (failedCount > 0 && serverData.value.length > 0) {
          ElMessage.warning(`${failedCount}台服务器状态获取失败，可能需要检查连接`)
        }
      })
    }
  } catch (error) {
    console.error('获取服务器列表失败:', error)
    ElMessage.error('获取服务器列表失败')
  } finally {
    loading.value = false
  }
}

// 更新统计数据
const updateStats = () => {
  serverStats.total = pagination.total || serverData.value.length
  serverStats.online = serverData.value.filter(server => server.state === 1).length
  serverStats.offline = serverData.value.length - serverStats.online
}

// 获取 Guacamole 列表
const fetchGuacamoleList = async () => {
  if (guacamoleLoading.value) return
  
  guacamoleLoading.value = true
  try {
    const res = await getGuacamoleList()
    console.log("列表数据",res)
    if (res && res.data && res.data.code === 200) {
      guacamoleList.value = res.data.data || []
    } else {
      ElMessage.error('获取Guacamole配置列表失败')
      guacamoleList.value = []
    }
  } catch (error) {
    console.error('获取Guacamole列表失败:', error)
    ElMessage.error('获取Guacamole配置列表失败')
    guacamoleList.value = []
  } finally {
    guacamoleLoading.value = false
  }
}

// 处理 Guacamole 选择变化
const handleGuacamoleChange = (selectedId) => {
  if (!selectedId) {
    // 清空相关字段
    serverForm.username = ''
    serverForm.password = ''
    return
  }
  
  // 找到选中的 Guacamole 配置
  
}

// 添加服务器
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  
  // 重置表单
  Object.keys(serverForm).forEach(key => {
    if (key === 'hide') {
      serverForm[key] = 0
    } else if (key === 'allow_port_forward') {
      serverForm[key] = 0
    } else if (key === 'server_type') {
      serverForm[key] = serverType.value
    } else {
      serverForm[key] = ''
    }
  })
  
  // 如果是虚拟机类型，获取 Guacamole 列表
  if (serverType.value === 'hyperV') {
    fetchGuacamoleList()
  }
  
  // 确保在下一个 tick 重置表单验证状态
  nextTick(() => {
    if (serverFormRef.value) {
      serverFormRef.value.resetFields()
    }
  })
}

// 编辑服务器
const handleEdit = (row) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  
  // 填充表单
  Object.keys(serverForm).forEach(key => {
    if (key in row) {
      serverForm[key] = row[key]
    }
  })
  
  // 如果是虚拟机类型，获取 Guacamole 列表
  if (row.server_type === 'hyperV') {
    fetchGuacamoleList()
  }
  
  nextTick(() => {
    if (serverFormRef.value) {
      serverFormRef.value.clearValidate()
    }
  })
}

// 删除服务器
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除服务器"${row.name}"吗？`,
    '删除确认', 
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'error',
      draggable: true,
      distinguishCancelAndClose: true,
      closeOnClickModal: false
    }
  ).then(async () => {
    try {
      const res = await deleteServer({ server_id: row.server_id })
      if (res && res.data && res.data.code === 200) {
        ElNotification({
          title: '删除成功',
          message: `服务器"${row.name}"已被成功删除`,
          type: 'success',
          duration: 3000
        })
        fetchData()
      } else {
        ElMessage.error('删除失败！该数据关联了其他数据！')
      }
    } catch (error) {
      console.error('删除服务器失败:', error)
      ElMessage.error('删除服务器失败')
    }
  }).catch(() => {})
}

// 切换服务器在购物车中的显示状态
const handleVisibilityChange = async (row) => {
  try {
    const formData = { 
      ...row,
      hide: row.hide // 表格中已经修改了这个值
    }
    
    const res = await editServer(formData)
    if (res && res.data && res.data.code === 200) {
      ElMessage.success(`已${row.hide === 0 ? '显示' : '隐藏'}该服务器在购物车中的展示`)
    } else {
      ElMessage.error('操作失败，请重试')
      // 恢复原值
      row.hide = row.hide === 0 ? 1 : 0
    }
  } catch (error) {
    console.error('更新服务器状态失败:', error)
    ElMessage.error('操作失败，请重试')
    // 恢复原值
    row.hide = row.hide === 0 ? 1 : 0
  }
}

// 管理服务器
const handleManage = (row) => {
  router.push(`/servers/server?server_id=${row.server_id}&type=${serverType.value}`)
}

// 关闭对话框
const handleDialogClose = () => {
  dialogVisible.value = false
  if (serverFormRef.value) {
    serverFormRef.value.resetFields()
  }
}

// 提交表单
const submitForm = async () => {
  if (!serverFormRef.value) return
  
  await serverFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 确保数值类型字段为数字
        const formData = { ...serverForm }
        
        // 转换可能的数字字段
        const numericFields = ['bandwidth', 'disk', 'memory', 'cpu', 'hide', 'allow_port_forward'];
        numericFields.forEach(field => {
          if (formData[field] !== '' && formData[field] !== null && formData[field] !== undefined) {
            formData[field] = Number(formData[field])
          }
        })
        
        let res
        if (dialogType.value === 'add') {
          res = await addServer(formData)
        } else {
          res = await editServer(formData)
        }
        
        if (res && res.data && res.data.code === 200) {
          ElNotification({
            title: dialogType.value === 'add' ? '添加成功' : '更新成功',
            message: `服务器"${formData.name}"已${dialogType.value === 'add' ? '添加' : '更新'}成功`,
            type: 'success',
            duration: 3000
          })
          dialogVisible.value = false
          fetchData()
        } else {
          const errorMsg = res?.data?.msg || '操作失败'
          ElMessage.error(errorMsg)
        }
      } catch (error) {
        console.error('提交表单失败:', error)
        ElMessage.error('提交失败')
      }
    } else {
      ElMessage.warning('请完善表单信息')
    }
  })
}

// 地区数据
const regionsBuff = ref([])

// 定义选项配置
const optionProps = {
  label: 'label',
  value: 'value',
  children: 'children',
  checkStrictly: false,
  emitPath: true
}

// 地区数据转换
const locationArray = computed({
  get: () => {
    if (serverForm.location) {
      try {
        const labels = serverForm.location.split(' ')
        const values = labels.map(label => findValueByLabel(label, regionsBuff.value))
        return values.filter(value => value !== undefined)
      } catch (error) {
        console.error('解析地区数据失败:', error)
        return []
      }
    } else {
      return []
    }
  },
  set: (newArray) => {
    try {
      if (Array.isArray(newArray) && newArray.length > 0) {
        const labels = newArray.map(value => {
          const label = findLabelByValue(value, regionsBuff.value)
          return label || value
        })
        serverForm.location = labels.join(' ')
      } else {
        serverForm.location = ''
      }
    } catch (error) {
      console.error('设置地区数据失败:', error)
      serverForm.location = ''
    }
  }
})

const findValueByLabel = (label, options) => {
  for (const option of options) {
    if (option.label === label) {
      return option.value
    }
    if (option.children) {
      const result = findValueByLabel(label, option.children)
      if (result) {
        return result
      }
    }
  }
  return undefined
}

const findLabelByValue = (value, options) => {
  for (const option of options) {
    if (option.value === value) {
      return option.label
    }
    if (option.children) {
      const result = findLabelByValue(value, option.children)
      if (result) {
        return result
      }
    }
  }
  return undefined
}

// 计算对话框宽度
const dialogWidth = computed(() => {
  const width = window.innerWidth
  if (width < 768) return '95%'
  if (width < 992) return '80%'
  return '60%'
})

// 复制表单内容
const copyFormContent = () => {
  const formContent = JSON.parse(JSON.stringify(serverForm))
  copyDomText(JSON.stringify(formContent, null, 2))
  ElMessage.success('已复制服务器配置到剪贴板')
}

// 粘贴表单内容
const getFormContent = async () => {
  try {
    const text = await navigator.clipboard.readText()
    const data = JSON.parse(text)
    Object.keys(serverForm).forEach(key => {
      if (key in data) {
        serverForm[key] = data[key]
      }
    })
    ElMessage.success('已从剪贴板导入服务器配置')
  } catch (err) {
    console.error('读取剪贴板失败:', err)
    ElMessage.error('无法读取剪贴板内容，请检查获取到的格式')
  }
}

// 监听窗口大小变化
const updateDialogWidth = () => {
  window.addEventListener('resize', () => {
    dialogWidth.value = computed(() => {
      const width = window.innerWidth
      if (width < 768) return '95%'
      if (width < 992) return '80%'
      return '60%'
    }).value
  })
}

// 监听服务器类型变化
watch(serverType, async (newVal) => {
  if (newVal) {
    try {
      await fetchData()
    } catch (error) {
      console.error('获取数据失败：', error)
    }
  }
})

// 初始加载
onMounted(async () => {
  try {
    // 加载地区数据
    // 实际项目中应该从API获取或使用静态JSON文件
    regionsBuff.value = [
    {
        value: 'china',
        label: '中国',
        children: [
            { 
                value: 'southwest', 
                label: '西南',
                children: [
                    { value: 'sichuan', label: '四川' },
                    { value: 'chongqing', label: '重庆' },
                    { value: 'yunnan', label: '云南' },
                    { value: 'guizhou', label: '贵州' },
                    { value: 'xizang', label: '西藏' }
                ]
            },
            { 
                value: 'northeast', 
                label: '东北',
                children: [
                    { value: 'liaoning', label: '辽宁' },
                    { value: 'jilin', label: '吉林' },
                    { value: 'heilongjiang', label: '黑龙江' }
                ]
            },
            { 
                value: 'northwest', 
                label: '西北',
                children: [
                    { value: 'shaanxi', label: '陕西' },
                    { value: 'gansu', label: '甘肃' },
                    { value: 'qinghai', label: '青海' },
                    { value: 'ningxia', label: '宁夏' },
                    { value: 'xinjiang', label: '新疆' }
                ]
            },
            { 
                value: 'central', 
                label: '华中',
                children: [
                    { value: 'henan', label: '河南' },
                    { value: 'hubei', label: '湖北' },
                    { value: 'hunan', label: '湖南' }
                ]
            },
            { 
                value: 'northchina', 
                label: '华北',
                children: [
                    { value: 'tianjin', label: '天津' },
                    { value: 'hebei', label: '河北' },
                    { value: 'shanxi', label: '山西' },
                    { value: 'neimenggu', label: '内蒙古' }
                ]
            }
        ]
    },
    {
        value: 'foreign',
        label: '国外',
        children: [
            { value: 'asia', label: '亚洲' },
            { value: 'europe', label: '欧洲' },
            { value: 'america', label: '美洲' },
            { value: 'africa', label: '非洲' },
            { value: 'oceania', label: '大洋洲' }
        ]
    }
]    
    
    // 设置对话框宽度响应式
    updateDialogWidth()
    
    // 获取服务器列表
    await fetchData()
  } catch (error) {
    console.error('初始化失败:', error)
    ElMessage.error('页面初始化失败')
  }
})
</script>

<style scoped>
.nodes-container {
  padding: 20px;
  min-height: calc(100vh - 120px);
  background-color: #f5f7fa;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.page-header .left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header .title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.count-tag {
  font-size: 13px;
}

.page-header .actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.server-type-selector {
  margin-right: 10px;
}

/* 服务器统计卡片 */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-right: 16px;
  flex-shrink: 0;
}

.total-card .stat-icon {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.online-card .stat-icon {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.offline-card .stat-icon {
  background-color: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.1;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 搜索和筛选部分 */
.filter-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

/* 表格容器 */
.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin-bottom: 24px;
}

.server-table {
  margin-bottom: 16px;
}

/* 服务器状态标签 */
.status-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.online {
  background-color: #67C23A;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
}

.status-dot.offline {
  background-color: #909399;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 表单样式 */
.server-dialog :deep(.el-form-item__label) {
  font-weight: 500;
}

.form-section-title {
  font-weight: 600;
  margin: 16px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ebeef5;
  color: #409EFF;
}

.form-item-description {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.2;
}

/* Guacamole 选项样式 */
.guacamole-option {
  padding: 4px 0;
}

.guacamole-option .option-main {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.guacamole-option .option-sub {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-actions, .right-actions {
  display: flex;
  gap: 8px;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 992px) {
  .stats-panel {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-card:last-child {
    grid-column: span 2;
  }
}

@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .page-header .actions {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .stats-panel {
    grid-template-columns: 1fr;
  }
  
  .stat-card:last-child {
    grid-column: auto;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    max-width: none;
  }
}
</style> 