<template>
  <div class="server-container">
    <!-- 页面标题和状态栏 -->
    <div class="page-header">
      <div class="left">
        <h2 class="title">服务器详情</h2>
        <el-tag 
          :type="serverMessage.state == 0 ? 'danger' : 'success'"
          effect="dark"
          class="status-tag"
        >
          <span class="status-dot" :class="serverMessage.state == 0 ? 'offline' : 'online'"></span>
          {{ serverMessage.state == 0 ? "离线" : "在线" }}
        </el-tag>
      </div>
      <div class="actions">
        <el-button type="primary" @click="initData" :icon="Refresh">
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 服务器信息卡片 -->
    <div class="server-info">
      <div class="info-card main-info">
        <div class="card-title">
          <el-icon><Monitor /></el-icon>
          <span>基本信息</span>
        </div>
        <div class="info-content">
          <div class="info-item">
            <div class="info-label">服务器名称</div>
            <div class="info-value highlight">{{ serverMessage.name || '未设置' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">服务器ID</div>
            <div class="info-value">{{ serverMessage.server_id || '未知' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">IP地址</div>
            <div class="info-value">{{ serverMessage.server_ip || '未设置' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">创建时间</div>
            <div class="info-value">{{ serverMessage.created_at || '未知' }}</div>
          </div>
        </div>
      </div>

      <div class="info-card resource-info">
        <div class="card-title">
          <el-icon><CpuIcon /></el-icon>
          <span>资源配置</span>
        </div>
        <div class="info-content">
          <div class="info-item">
            <div class="info-label">CPU</div>
            <div class="info-value">{{ serverMessage.cpu || '0' }} 核心</div>
          </div>
          <div class="info-item">
            <div class="info-label">内存</div>
            <div class="info-value">{{ serverMessage.memory || '0' }} GB</div>
          </div>
          <div class="info-item">
            <div class="info-label">硬盘</div>
            <div class="info-value">{{ serverMessage.disk || '0' }} GB</div>
          </div>
          <div class="info-item">
            <div class="info-label">带宽</div>
            <div class="info-value">{{ serverMessage.bandwidth || '0' }} Mbps</div>
          </div>
        </div>
      </div>

      <div class="info-card location-info">
        <div class="card-title">
          <el-icon><Location /></el-icon>
          <span>位置信息</span>
        </div>
        <div class="info-content">
          <div class="info-item location">
            <div class="info-label">地区</div>
            <div class="info-value">{{ serverMessage.location || '未设置' }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表 -->
    <serverChart v-if="TypeData" :Type="TypeData" class="chart-section" />

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <el-tabs type="border-card" class="main-tabs">
        <!-- 实例规格列表 -->
        <el-tab-pane label="实例规格列表">
          <div class="tab-header">
            <h3 class="tab-title">实例规格管理</h3>
            <el-button 
              type="primary" 
              @click="show_spec(); centerDialogVisible = true; addOrChange = true;"
              :icon="Plus"
            >
              添加实例规格
            </el-button>
          </div>
          
          <el-table
            v-loading="specLoading"
            :data="spec_list"
            border
            stripe
            style="width: 100%"
            table-layout="auto"
            class="data-table"
          >
            <el-table-column prop="plan_id" label="规格ID" width="80" />
            <el-table-column prop="name" label="规格名称" min-width="120" show-overflow-tooltip />
            <el-table-column prop="memory" label="内存" width="100">
              <template #default="scope">
                <div class="resource-value">{{ scope.row.memory }} <span class="unit">MB</span></div>
              </template>
            </el-table-column>
            <el-table-column prop="disk" label="硬盘" width="100">
              <template #default="scope">
                <div class="resource-value">{{ scope.row.disk }} <span class="unit">GB</span></div>
              </template>
            </el-table-column>
            <el-table-column prop="cpu" label="CPU" width="100">
              <template #default="scope">
                <div class="resource-value">{{ scope.row.cpu }} <span class="unit">{{ TypeData === 'dockerContainer' ? '毫核' : '核' }}</span></div>
              </template>
            </el-table-column>
            <el-table-column v-if="TypeData === 'dockerContainer'" prop="bandwidth_tx" label="上行带宽" width="120">
              <template #default="scope">
                <div class="resource-value">{{ scope.row.bandwidth_tx }} <span class="unit">Mbps</span></div>
              </template>
            </el-table-column>
            <el-table-column v-if="TypeData === 'dockerContainer'" prop="bandwidth_rx" label="下行带宽" width="120">
              <template #default="scope">
                <div class="resource-value">{{ scope.row.bandwidth_rx }} <span class="unit">Mbps</span></div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="100">
              <template #default="scope">
                <div class="price-tag">¥ {{ scope.row.price }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="剩余数量" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.number > 10 ? 'success' : scope.row.number > 0 ? 'warning' : 'danger'" effect="plain">
                  {{ scope.row.number }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="scope">
                <div class="table-actions">
                  <el-tooltip content="编辑" placement="top" :hide-after="1500">
                    <el-button 
                      type="primary" 
                      circle
                      :icon="Edit"
                      @click="show_spec(scope.row); centerDialogVisible = true; addOrChange = false;"
                    />
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top" :hide-after="1500">
                    <el-button 
                      type="danger" 
                      circle
                      :icon="Delete"
                      @click="deleteSpec(scope.row.plan_id)"
                    />
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
          
          <el-empty v-if="spec_list.length === 0" description="暂无实例规格数据" />
        </el-tab-pane>

        <!-- 容器列表 -->
        <el-tab-pane v-if="TypeData == 'dockerContainer'" label="容器列表">
          <div class="tab-header">
            <h3 class="tab-title">容器管理</h3>
            <el-input 
              v-model="containerBox.key" 
              placeholder="搜索容器..." 
              class="search-input"
              :prefix-icon="Search"
              clearable
            />
          </div>
          
          <el-table 
            :data="user_servers" 
            stripe 
            border 
            style="width: 100%"
            class="data-table"
          >
            <el-table-column label="ID" prop="container_id" width="80" />
            <el-table-column label="价格" prop="pay" width="100">
              <template #default="scope">
                <div class="price-tag">¥ {{ scope.row.pay }}</div>
              </template>
            </el-table-column>
            <el-table-column label="购买时间" min-width="160">
              <template #default="scope">
                <div class="time-info">{{ scope.row.created_at }}</div>
              </template>
            </el-table-column>
            <el-table-column label="到期时间" min-width="160">
              <template #default="scope">
                <div class="time-info">{{ scope.row.become_time }}</div>
              </template>
            </el-table-column>
            <el-table-column label="规格" prop="plan_id" width="80" />
            <el-table-column label="用户ID" prop="user_id" width="80" />
            <el-table-column label="状态" width="100" align="center">
              <template #default="scope">
                <el-tag 
                  :type="scope.row.container_state == 0 || scope.row.container_state == 1
                    ? 'info'
                    : scope.row.container_state == 2
                      ? 'success'
                      : 'danger'"
                  effect="light"
                >
                  {{
                    scope.row.container_state == 0
                      ? "未支付"
                      : scope.row.container_state == 1
                        ? "未开通"
                        : scope.row.container_state == 2
                          ? "开机"
                          : "关机"
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button 
                  type="primary" 
                  size="small" 
                  :icon="Setting"
                  @click="$router.push('/servers/containers?container_id=' + scope.row.container_id)"
                >
                  管理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!--分页-->
          <div class="pagination-container">
            <el-pagination 
              background 
              layout="total, sizes, prev, pager, next, jumper" 
              :total="total" 
              :current-page="containerBox.page"
              :page-size="containerBox.count" 
              :page-sizes="[5, 10, 20, 50]" 
              @update:current-page="handleCurrentPageChange"
              @update:page-size="handlePageSizeChange" 
            />
          </div>
        </el-tab-pane>
        
        <!-- 虚拟机列表 -->
        <el-tab-pane v-if="TypeData == 'hyperV'" label="虚拟机列表" :lazy="true">
          <VmList :ID="serverMessage.server_id" />
        </el-tab-pane>
        
        <!-- 浮动IP池 -->
        <el-tab-pane v-if="TypeData == 'dockerContainer'" label="浮动IP池" :lazy="true">
          <div class="tab-header">
            <h3 class="tab-title">浮动IP管理</h3>
            <div class="action-btns">
              <el-button type="primary" @click="floatVisible = true" :icon="Plus">
                添加浮动IP
              </el-button>
              <el-button type="primary" @click="addMore = true" :icon="Plus">
                批量添加浮动IP
              </el-button>
            </div>
          </div>
          
          <el-table 
            :data="floatList" 
            style="width: 100%" 
            border 
            stripe
            class="data-table"
          >
            <el-table-column label="ID" prop="id" width="80" />
            <el-table-column label="创建时间" min-width="160">
              <template #default="scope">
                <div class="time-info">{{ scope.row.created_at }}</div>
              </template>
            </el-table-column>
            <el-table-column label="浮动IP" prop="floating_ip" min-width="150" />
            <el-table-column label="状态" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.is_used ? 'success' : 'info'" effect="light">
                  {{ scope.row.is_used ? "已绑定" : "未绑定" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template #default="scope">
                <el-tooltip content="删除IP" placement="top" :hide-after="1500">
                  <el-button 
                    type="danger" 
                    circle
                    :icon="Delete"
                    @click="delFloating(scope.row.id)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          
          <el-empty v-if="floatList.length === 0" description="暂无浮动IP数据" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 添加/编辑实例规格对话框 -->
    <el-dialog
      v-model="centerDialogVisible"
      :title="addOrChange ? '添加实例规格' : '编辑实例规格'"
      width="650px"
      top="5vh"
      destroy-on-close
      class="spec-dialog"
    >
      <el-form :model="spec_form" label-width="140px">
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="规格名称">
                <el-input v-model="spec_form.name" placeholder="请输入实例规格名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述">
                <el-input v-model="spec_form.description" placeholder="对实例规格的介绍" type="textarea" :rows="2" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">资源配置</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="内存">
                <el-input v-model="spec_form.memory" placeholder="内存限制" type="number">
                  <template #append>MB</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="硬盘">
                <el-input v-model="spec_form.disk" placeholder="硬盘限制" type="number">
                  <template #append>GB</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="TypeData == 'dockerContainer' ? 'CPU(毫核)' : 'CPU(核)'">
                <el-input 
                  v-model="spec_form.cpu" 
                  :placeholder="TypeData == 'dockerContainer' ? 'CPU 限制 (1核=1000毫核)' : 'CPU 限制'" 
                  type="number"
                >
                  <template #append>{{ TypeData == 'dockerContainer' ? '毫核' : '核' }}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存数量">
                <el-input v-model="spec_form.number" placeholder="库存数量" type="number">
                  <template #append>个</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section" v-if="TypeData == 'dockerContainer'">
          <div class="section-title">网络配置</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上行带宽">
                <el-input v-model="spec_form.bandwidth_tx" placeholder="上行带宽" type="number">
                  <template #append>Mbps</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下行带宽">
                <el-input v-model="spec_form.bandwidth_rx" placeholder="下行带宽" type="number">
                  <template #append>Mbps</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上行流量阈值">
                <el-input v-model="spec_form.threshold_tx" placeholder="上行流量报警阈值" type="number">
                  <template #append>Mbps</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下行流量阈值">
                <el-input v-model="spec_form.threshold_rx" placeholder="下行流量报警阈值" type="number">
                  <template #append>Mbps</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section" v-if="TypeData == 'hyperV'">
          <div class="section-title">虚拟机特性</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="允许开放端口数">
                <el-input v-model="spec_form.port_num" placeholder="默认允许开放端口数" type="number">
                  <template #append>个</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="允许快照数">
                <el-input v-model="spec_form.snapshot_num" placeholder="默认允许快照数" type="number">
                  <template #append>个</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="读写限制">
                <el-input v-model="spec_form.min_iops" placeholder="读写限制(1iops=8kb/s)" type="number">
                  <template #append>IOPS</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="读写最大突发">
                <el-input v-model="spec_form.max_iops" placeholder="读写最大突发" type="number">
                  <template #append>IOPS</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">价格与验证</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="价格">
                <el-input v-model="spec_form.price" placeholder="价格" type="number">
                  <template #prepend>¥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="额外硬盘价格">
                <el-input v-model="spec_form.volume_price" placeholder="额外硬盘价格" type="number">
                  <template #prepend>¥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要实名">
                <el-switch
                  v-model="spec_form.must_real_name"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="需要实名"
                  inactive-text="不需要实名"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div class="left-actions">
            <el-tooltip content="粘贴配置" placement="top">
              <el-button @click="getit" :icon="Download">
                粘贴
              </el-button>
            </el-tooltip>
            <el-tooltip content="复制配置" placement="top">
              <el-button @click="copyit" :icon="Upload">
                复制
              </el-button>
            </el-tooltip>
          </div>
          <div class="right-actions">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editSpec">确认</el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 添加浮动IP对话框 -->
    <el-dialog
      v-model="floatVisible"
      title="添加浮动IP"
      width="480px"
      destroy-on-close
      class="float-dialog"
    >
      <el-form label-width="120px">
        <el-form-item label="浮动IP地址">
          <el-input
            v-model="newFloatingIp"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 10 }"
            placeholder="每个IP一行，换行添加下一个"
          />
        </el-form-item>
        <div class="ip-tips">
          <el-alert
            title="添加提示"
            type="info"
            description="请确保每行一个IP，且格式正确"
            :closable="false"
            show-icon
          />
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="floatVisible = false">取消</el-button>
          <el-button type="primary" @click="ToAddFloatingIp">确认添加</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量添加浮动IP对话框 -->
    <el-dialog
      v-model="addMore"
      title="批量添加浮动IP"
      width="480px"
      destroy-on-close
      class="float-dialog"
    >
      <el-form label-width="140px">
        <el-form-item label="起始浮动IP地址">
          <div class="ip-input-group">
            <el-input v-model="addr_floating_ip" placeholder="如：11.11.11" />
            <span class="ip-separator">.</span>
            <el-input v-model="start_ip" placeholder="起始值" class="ip-last-segment" />
          </div>
        </el-form-item>
        <el-form-item label="结束浮动IP地址">
          <div class="ip-input-group">
            <el-input v-model="addr_floating_ip" placeholder="如：11.11.11" disabled />
            <span class="ip-separator">.</span>
            <el-input v-model="end_ip" placeholder="结束值" class="ip-last-segment" />
          </div>
        </el-form-item>
        <div class="ip-tips">
          <el-alert
            title="批量添加说明"
            type="info"
            description="系统将添加从起始IP到结束IP的所有地址"
            :closable="false"
            show-icon
          />
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addMore = false">取消</el-button>
          <el-button type="primary" @click="ToAddMore">确认添加</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  selectServer,
  getServerPlan,
  editServerPlan,
  addServerPlan,
  deleteServerPlan,
  getContainer,
  getFloatingIpList,
  addFloatingIp,
  delFloatingIp,
  addFloatingIpBatch
} from "@/utils/acs/server";
import { ElMessage, ElNotification } from 'element-plus';
import { copyDomText } from "@/utils/hide";
import { 
  Plus, 
  Edit, 
  Delete, 
  Download, 
  Upload, 
  Refresh,
  Monitor,
  Cpu as CpuIcon,
  Location,
  Setting,
  Search
} from '@element-plus/icons-vue';

// 组件引入
import serverChart from "./components/serverChart.vue";
import VmList from "./components/VmList.vue";

const router = useRouter();
const route = useRoute();
let serverMessage = ref({});
const specLoading = ref(false);

// 初始化数据的函数
const initData = async () => {
  try {
    TypeData.value = route.query.type;
    // 重置数据状态
    serverMessage.value = {};
    spec_list.value = [];
    user_servers.value = [];
    floatList.value = [];
    
    // 获取服务器信息
    let res = await selectServer({ server_id: route.query.server_id });
    if (res && res.data && res.data.data) {
      serverMessage.value = res.data.data;
      ElNotification({
        title: '数据刷新成功',
        message: `已成功获取服务器 ${serverMessage.value.name || '未命名'} 的数据`,
        type: 'success',
        duration: 3000
      });
    }
    
    // 获取浮动IP列表
    await getFloating();
    
    // 获取实例规格
    await GetSpecs();
    
    // 获取所有容器
    let usertype = localStorage.getItem("user_type");
    if (usertype == "1") {
      containerBox.server_id = route.query.server_id;
      let cons = await getContainer(containerBox);
      if (cons && cons.data) {
        user_servers.value = cons.data.data || [];
        total.value = cons.data.count || 0;
      }
    }
  } catch (error) {
    console.error("初始化数据失败:", error);
    ElMessage.error("加载数据失败，请刷新页面重试");
  }
};

// 监听路由参数变化
watch(
  () => route.query,
  (newQuery) => {
    if (newQuery.server_id) {
      initData();
    }
  },
  { deep: true }
);

onMounted(() => {
  initData();
});

const TypeData = ref("");

//获取服务器实例规格
const GetSpecs = async () => {
  specLoading.value = true;
  try {
    let plans = await getServerPlan({
      server_id: route.query.server_id,
      count: 30
    });
    console.log("服务器实例规格", plans.data.data);
    spec_list.value = plans.data.data;
  } catch (error) {
    console.error("获取实例规格列表失败:", error);
    ElMessage.error("获取实例规格列表失败");
  } finally {
    specLoading.value = false;
  }
};

//获取浮动ip列表
const getFloating = async () => {
  try {
    let res = await getFloatingIpList({ server_id: route.query.server_id });
    if (res && res.data) {
      floatList.value = res.data.data || [];
      floatTotal.value = res.data.count || 0;
    }
  } catch (error) {
    console.error("获取浮动IP列表失败:", error);
    ElMessage.error("获取浮动IP列表失败");
    floatList.value = [];
    floatTotal.value = 0;
  }
};

const floatTotal = ref(10);
const floatList = ref([]);
const floatVisible = ref(false);
const newFloatingIp = ref("");

//新增浮动ip
const ToAddFloatingIp = async () => {
  if (!newFloatingIp.value.trim()) {
    ElMessage.warning('请输入至少一个IP地址');
    return;
  }
  
  let arr = newFloatingIp.value.split("\n").filter(ip => ip.trim().length > 0);
  
  if (arr.length === 0) {
    ElMessage.warning('没有有效的IP地址');
    return;
  }
  
  let promises = arr.map(item => {
    return addFloatingIp({
      server_id: route.query.server_id,
      floating_ip: item.trim()
    }).then(res => {
      if (res.data.code !== 200) {
        return Promise.reject(new Error(`${res.data.message}`));
      }
      return res;
    });
  });
  
  try {
    ElMessage.info(`正在添加 ${arr.length} 个IP地址...`);
    
    const results = await Promise.allSettled(promises);
    let successCount = 0;
    let failList = [];
    
    results.forEach((result, index) => {
      if (result.status === "fulfilled") {
        successCount++;
      } else {
        failList.push(`IP ${arr[index]}: ${result.reason.message}`);
        ElMessage.error(`IP ${arr[index]} 添加失败: ${result.reason.message}`);
      }
    });
    
    if (successCount > 0) {
      ElNotification({
        title: 'IP添加结果',
        message: `${successCount}个IP添加成功，${arr.length - successCount}个失败`,
        type: successCount === arr.length ? 'success' : 'warning',
        duration: 5000
      });
    }
    
    getFloating();
    floatVisible.value = false;
    newFloatingIp.value = '';
  } catch (error) {
    ElMessage.error("处理过程中发生未知错误");
  }
};

//删除浮动ip
const delFloating = async (id) => {
  try {
    let res = await delFloatingIp({ id: id });
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
      getFloating();
    } else {
      ElMessage.error(res.data.message || "删除失败");
    }
  } catch (error) {
    console.error("删除浮动IP失败:", error);
    ElMessage.error("删除失败，请重试");
  }
};

//批量添加浮动IP
const addMore = ref(false);
const addr_floating_ip = ref("");
const start_ip = ref("");
const end_ip = ref("");

const ToAddMore = async () => {
  if (!addr_floating_ip.value || !start_ip.value || !end_ip.value) {
    ElMessage.warning('请填写完整的IP地址信息');
    return;
  }
  
  try {
    const startNum = parseInt(start_ip.value);
    const endNum = parseInt(end_ip.value);
    
    if (isNaN(startNum) || isNaN(endNum)) {
      ElMessage.error('IP地址的最后一段必须是数字');
      return;
    }
    
    if (startNum > endNum) {
      ElMessage.error('起始IP必须小于或等于结束IP');
      return;
    }
    
    if (endNum - startNum > 100) {
      const confirmed = await ElMessageBox.confirm(
        `您将添加${endNum - startNum + 1}个IP地址，确定继续吗？`, 
        '批量添加确认', 
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => false);
      
      if (!confirmed) return;
    }
    
    ElMessage.info(`正在批量添加IP地址...`);
    
    const res = await addFloatingIpBatch({
      server_id: route.query.server_id,
      start_floating_ip: `${addr_floating_ip.value}.${start_ip.value}`,
      end_floating_ip: `${addr_floating_ip.value}.${end_ip.value}`
    });
    
    if (res.data.code == 200) {
      ElNotification({
        title: '批量添加成功',
        message: `已成功添加从 ${addr_floating_ip.value}.${start_ip.value} 到 ${addr_floating_ip.value}.${end_ip.value} 的IP地址`,
        type: 'success',
        duration: 5000
      });
      addMore.value = false;
      getFloating();
      
      // 重置表单
      start_ip.value = '';
      end_ip.value = '';
    } else {
      ElMessage.error(res.data.message || "批量添加失败");
    }
  } catch (error) {
    console.error("批量添加IP失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

//容器相关数据
const containerBox = reactive({
  server_id: "",
  page: 1,
  count: 10,
  key: "",
  user_id: ""
});

//修改新增实例规格的弹窗开关变量
const centerDialogVisible = ref(false);
//修改或新增实例规格的判断
const addOrChange = ref(false);
const editSpec = async () => {
  if (!spec_form.name || !spec_form.memory || !spec_form.disk || !spec_form.cpu || !spec_form.price) {
    ElMessage.warning('请填写必要的规格信息');
    return;
  }
  
  try {
    if (addOrChange.value) {
      const res = await addServerPlan({
        ...spec_form,
        server_id: route.query.server_id
      });
      
      if (res.data.code == 200) {
        ElNotification({
          title: '添加成功',
          message: `已成功添加规格 "${spec_form.name}"`,
          type: 'success',
          duration: 3000
        });
        centerDialogVisible.value = false;
      } else {
        ElMessage.error(res.data.message || "添加失败");
        return;
      }
    } else {
      const res = await editServerPlan(spec_form);
      
      if (res.data.code == 200) {
        ElNotification({
          title: '修改成功',
          message: `已成功修改规格 "${spec_form.name}"`,
          type: 'success',
          duration: 3000
        });
        centerDialogVisible.value = false;
      } else {
        ElMessage.error(res.data.message || "修改失败");
        return;
      }
    }
    
    //更新服务器实例规格
    await GetSpecs();
  } catch (error) {
    console.error("操作实例规格失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

//删除实例规格
const deleteSpec = async (id) => {
  try {
    const confirmed = await ElMessageBox.confirm(
      '删除实例规格将影响使用该规格的用户，确定要删除吗？', 
      '删除确认', 
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    ).catch(() => false);
    
    if (!confirmed) return;
    
    const res = await deleteServerPlan({
      plan_id: id,
      server_type: TypeData.value
    });
    
    if (res.data.code == 200) {
      ElMessage.success("删除成功！");
      //更新服务器实例规格
      await GetSpecs();
    } else {
      ElMessage.error(res.data.message || "删除失败");
    }
  } catch (error) {
    console.error("删除实例规格失败:", error);
    ElMessage.error("删除失败，请重试");
  }
};

const spec_list = ref([]);
//容器列表
const user_servers = ref([]);
//容器分页
const total = ref(10);
const handleCurrentPageChange = async newPage => {
  try {
    containerBox.page = newPage;
    let cons = await getContainer(containerBox);
    if (cons && cons.data) {
      user_servers.value = cons.data.data || [];
      total.value = cons.data.count || 0;
    }
  } catch (error) {
    console.error("获取容器列表失败:", error);
    ElMessage.error("获取容器列表失败");
  }
};

const handlePageSizeChange = async newSize => {
  try {
    containerBox.count = newSize;
    containerBox.page = 1; // 切换每页条数时重置为第一页
    let cons = await getContainer(containerBox);
    if (cons && cons.data) {
      user_servers.value = cons.data.data || [];
      total.value = cons.data.count || 0;
    }
  } catch (error) {
    console.error("获取容器列表失败:", error);
    ElMessage.error("获取容器列表失败");
  }
};

const spec_form = reactive({
  plan_id: "",
  name: "",
  memory: "",
  disk: "",
  cpu: "",
  price: "",
  bandwidth_rx: "",
  bandwidth_tx: "",
  threshold_rx: "",
  threshold_tx: "",
  port_num: "",
  snapshot_num: "",
  number: "",
  volume_price: "",
  min_iops: "",
  max_iops: "",
  description: "",
  must_real_name: 0
});

function show_spec(data = null) {
  if (!data) {
    // 当data未传值，视为新增实例规格
    // 遍历form对象的每个键值对
    Object.keys(spec_form).forEach(key => {
      spec_form[key] = key === 'must_real_name' ? 0 : '';
    });
    
    // 设置默认类型
    spec_form.server_type = TypeData.value;
  } else {
    // data传值，视为修改实例规格
    // 遍历data对象的每个键值对
    Object.keys(data).forEach(key => {
      if (key in spec_form) {
        spec_form[key] = data[key];
      }
    });
  }
}

//复制内容
const copytext = ref({});
const copyit = async () => {
  try {
    copytext.value = JSON.parse(JSON.stringify(spec_form));
    copyDomText(JSON.stringify(copytext.value, null, 2));
    ElMessage.success("已复制配置到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
    ElMessage.error("复制失败");
  }
};

const getit = async () => {
  try {
    let text = await navigator.clipboard.readText();
    let objet = JSON.parse(text);
    
    // 移除plan_id，避免覆盖原ID
    if (addOrChange.value) {
      Reflect.deleteProperty(objet, "plan_id");
    }
    
    Object.keys(spec_form).forEach(key => {
      if (key in objet) {
        spec_form[key] = objet[key];
      }
    });
    
    ElMessage.success("配置已从剪贴板导入");
  } catch (err) {
    console.error("读取剪贴板失败:", err);
    ElMessage.error("无法读取剪贴板内容，请检查格式是否正确");
  }
};

// 导入其他需要的组件
import { ElMessageBox } from 'element-plus';
</script>

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

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

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

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

.status-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

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

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

.status-dot.offline {
  background-color: #F56C6C;
  box-shadow: 0 0 6px rgba(245, 108, 108, 0.8);
}

/* 服务器信息卡片 */
.server-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.info-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 0;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

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

.card-title {
  background-color: #f5f7fa;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title .el-icon {
  font-size: 18px;
  color: #409EFF;
}

.info-content {
  padding: 16px;
}

.info-item {
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.info-value {
  font-size: 15px;
  color: #303133;
  word-break: break-all;
}

.info-value.highlight {
  font-weight: 600;
  font-size: 16px;
  color: #409EFF;
}

/* 主要内容区域 */
.chart-section {
  margin-bottom: 24px;
}

.content-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tab-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.search-input {
  width: 240px;
}

.action-btns {
  display: flex;
  gap: 8px;
}

/* 表格样式 */
.data-table {
  margin-bottom: 16px;
}

.table-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.resource-value {
  white-space: nowrap;
}

.unit {
  color: #909399;
  font-size: 12px;
  margin-left: 2px;
}

.price-tag {
  font-weight: 600;
  color: #F56C6C;
}

.time-info {
  font-size: 13px;
  color: #606266;
}

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

/* 对话框样式 */
.form-section {
  margin-bottom: 24px;
}

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

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

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

/* IP对话框样式 */
.ip-input-group {
  display: flex;
  align-items: center;
}

.ip-separator {
  margin: 0 8px;
  font-weight: bold;
}

.ip-last-segment {
  width: 80px !important;
  flex-shrink: 0;
}

.ip-tips {
  margin-top: 16px;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .server-info {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .info-card.location-info {
    grid-column: span 2;
  }
}

@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .server-info {
    grid-template-columns: 1fr;
  }
  
  .info-card.location-info {
    grid-column: auto;
  }
  
  .tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .action-btns {
    width: 100%;
    justify-content: space-between;
  }
}
</style> 