game_event_admin/src/views/system/gameEvent/edit.vue

<template>
  <div class="game-event-edit">
    <el-card shadow="never">
      <template #header>
        <div class="page-header">
          <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
          <span class="page-title">{{ isEdit ? '编辑赛事' : '新增赛事' }}</span>
        </div>
      </template>

      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息" name="basic">
          <el-form ref="basicFormRef" :model="basicForm" :rules="basicRules" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="赛事编号" prop="eventCode">
                  <el-input v-model="basicForm.eventCode" placeholder="请输入赛事编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="赛事名称" prop="eventName">
                  <el-input v-model="basicForm.eventName" placeholder="请输入赛事名称" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="赛事类型" prop="eventType">
                  <el-select v-model="basicForm.eventType" placeholder="请选择赛事类型" style="width: 100%">
                    <el-option v-for="dict in game_event_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用途" prop="purpose">
                  <el-select v-model="basicForm.purpose" placeholder="请选择用途" style="width: 100%">
                    <el-option v-for="dict in game_event_purpose" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startTime">
                  <el-date-picker
                    v-model="basicForm.startTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择开始时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    v-model="basicForm.endTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择结束时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="举办地点" prop="location">
                  <el-input v-model="basicForm.location" placeholder="请输入举办地点" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="举办单位" prop="unit">
                  <el-input v-model="basicForm.unit" placeholder="请输入举办单位" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否默认赛事" prop="isDefault">
                  <el-radio-group v-model="basicForm.isDefault">
                    <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-radio-group v-model="basicForm.status">
                    <el-radio v-for="dict in game_event_status" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="赛事链接" prop="eventUrl">
                  <image-upload-cropper v-model="basicForm.eventUrl" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="裁判码" prop="refereeUrl">
                  <image-upload-cropper v-model="basicForm.refereeUrl" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12" v-for="item in imageConfigItems" :key="item.configKey">
                <el-form-item :label="item.configDesc">
                  <image-upload-cropper v-model="item.configValue" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="备注" prop="remark">
              <el-input v-model="basicForm.remark" type="textarea" placeholder="请输入备注" :rows="3" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 赛事菜单标签页 -->
        <el-tab-pane label="赛事菜单" name="menu">
          <div class="menu-config">
            <div class="menu-header">
              <h3>赛事菜单</h3>
              <el-button type="primary" @click="showMenuSelectDialog" icon="Plus">添加菜单项</el-button>
            </div>

            <el-table :data="menuItems" border style="width: 100%">
              <el-table-column label="菜单名称" prop="name" width="200">
                <template #default="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="图标" prop="pic" width="80">
                <template #default="scope">
                  <el-image v-if="scope.row.pic" :src="scope.row.pic" style="width: 40px; height: 40px" fit="cover" />
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="跳转类型" prop="jumpType" width="100">
                <template #default="scope">
                  <span>{{ getJumpTypeLabel(scope.row.jumpType) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="颜色" prop="color" width="100">
                <template #default="scope">
                  <div v-if="scope.row.color" :style="{ backgroundColor: scope.row.color, width: '30px', height: '20px', borderRadius: '4px' }"></div>
                </template>
              </el-table-column>
              <el-table-column label="跳转路径" prop="jumpPath">
                <template #default="scope">
                  <span>{{ scope.row.jumpPath }}</span>
                </template>
              </el-table-column>
              <el-table-column label="排序" prop="sortNum" width="80">
                <template #default="scope">
                  <span>{{ scope.row.sortNum }}</span>
                </template>
              </el-table-column>
              <el-table-column label="活动类型" prop="activityType" width="100">
                <template #default="scope">
                  <span>{{ scope.row.activityType === 0 ? '赛前' : scope.row.activityType === 1 ? '赛中' : '赛后' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="removeMenuItem(scope.$index)" icon="Delete">删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 菜单选择弹框 -->
          <el-dialog v-model="menuSelectDialogVisible" title="选择菜单" width="60%" :close-on-click-modal="false">
            <div class="menu-select-content">
              <div class="search-bar" style="margin-bottom: 16px">
                <el-input v-model="menuSearchKeyword" placeholder="搜索菜单名称" clearable style="width: 300px" />
              </div>

              <el-table :data="filteredAvailableMenus" border style="width: 100%" @selection-change="handleMenuSelectionChange" max-height="400">
                <el-table-column type="selection" width="55" />
                <el-table-column label="菜单名称" prop="name" width="200" />
                <el-table-column label="图标" prop="pic" width="80">
                  <template #default="scope">
                    <el-image v-if="scope.row.pic" :src="scope.row.pic" style="width: 40px; height: 40px" fit="cover" />
                  </template>
                </el-table-column>
                <el-table-column label="颜色" prop="color" width="100">
                  <template #default="scope">
                    <div
                      v-if="scope.row.color"
                      :style="{ backgroundColor: scope.row.color, width: '30px', height: '20px', borderRadius: '4px' }"
                    ></div>
                  </template>
                </el-table-column>
                <el-table-column label="跳转类型" prop="jumpType" width="120">
                  <template #default="scope">
                    <span>{{ getJumpTypeLabel(scope.row.jumpType) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="跳转路径" prop="jumpPath" />
                <el-table-column label="排序" prop="sortNum" width="80" />
              </el-table>
            </div>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="menuSelectDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmAddMenuItems">确认添加</el-button>
              </span>
            </template>
          </el-dialog>
        </el-tab-pane>

        <!-- 配置信息标签页 -->
        <el-tab-pane label="配置信息" name="config">
          <div class="config-info">
            <div class="config-header">
              <h3>赛事配置信息</h3>
              <el-button type="primary" @click="addConfigItem" icon="Plus">添加配置</el-button>
            </div>

            <el-table :data="configItems" border style="width: 100%">
              <el-table-column label="配置类型" prop="configType" width="150">
                <template #default="scope">
                  <el-select v-model="scope.row.configType" placeholder="请选择配置类型" style="width: 100%">
                    <el-option v-for="type in configTypes" :key="type.typeCode" :label="type.typeName" :value="type.typeCode" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="配置键" prop="configKey" width="200">
                <template #default="scope">
                  <el-input v-model="scope.row.configKey" placeholder="请输入配置键" />
                </template>
              </el-table-column>
              <el-table-column label="配置值" prop="configValue">
                <template #default="scope">
                  <image-or-url-input v-model="scope.row.configValue" />
                </template>
              </el-table-column>
              <el-table-column label="配置描述" prop="configDesc">
                <template #default="scope">
                  <el-input v-model="scope.row.configDesc" placeholder="请输入配置描述" />
                </template>
              </el-table-column>
              <!-- <el-table-column label="是否启用" prop="isEnabled">
                <template #default="scope">
                  <el-switch v-model="scope.row.isEnabled" />
                </template>
              </el-table-column> -->
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="removeConfigItem(scope.$index)" icon="Delete">删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 底部操作按钮 -->
      <div class="form-actions">
        <el-button @click="goBack">取消</el-button>
        <el-button type="primary" @click="saveEvent" :loading="saveLoading">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="GameEventEdit" lang="ts">
import { getGameEvent, addGameEvent, updateGameEvent, changeEventDefault } from '@/api/system/gameEvent';
import { GameEventVO, GameEventForm } from '@/api/system/gameEvent/types';
import { listGameEventConfig, addGameEventConfig, updateGameEventConfig, delGameEventConfig } from '@/api/system/gameEventConfig';
import { GameEventConfigForm } from '@/api/system/gameEventConfig/types';
import { listGameEventConfigType } from '@/api/system/gameEventConfigType'; // 添加导入
import { GameEventConfigTypeVO } from '@/api/system/gameEventConfigType/types'; // 添加导入
import { useRoute, useRouter } from 'vue-router';
import { listRelateMenu, getEnabledNavigator, editRelate, type EditRelateMenuParams, GameNavigatorVo } from '@/api/system/common/nav/gameNavigator';

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { game_event_type, game_event_purpose, game_event_status, sys_yes_no, game_project_type } = toRefs<any>(
  proxy?.useDict('game_event_type', 'game_event_purpose', 'game_event_status', 'sys_yes_no', 'game_project_type')
);

// 页面状态
const isEdit = ref(false);
const activeTab = ref('basic');
const saveLoading = ref(false);

// 判断是否为默认赛事操作
const isDefaultEventOperation = () => {
  return basicForm.value.isDefault === '0';
};

// 获取有效的赛事ID（默认赛事返回空字符串，否则返回实际ID）
const getEffectiveEventId = (eventId?: string | number): string => {
  if (isDefaultEventOperation()) {
    return '';
  }
  return String(eventId || (route.params.id as string) || '');
};

// 表单引用
const basicFormRef = ref<ElFormInstance>();

// 基本信息表单
const basicForm = ref<GameEventForm>({
  eventCode: '',
  eventName: '',
  eventType: '',
  location: '',
  purpose: '',
  startTime: '',
  endTime: '',
  eventUrl: '',
  refereeUrl: '',
  registerUrl: '',
  unit: '',
  isDefault: '0',
  status: '0',
  remark: ''
});

// 表单验证规则
const basicRules = {
  eventCode: [{ required: true, message: '请输入赛事编号', trigger: 'blur' }],
  eventName: [{ required: true, message: '请输入赛事名称', trigger: 'blur' }],
  eventType: [{ required: true, message: '请选择赛事类型', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
};

const currentEventId = ref<number>();

// 初始化页面
onMounted(async () => {
  const eventId = route.params.id as string;
  if (eventId) {
    isEdit.value = true;
    currentEventId.value = Number(eventId);
    await loadEventData(eventId);
  } else {
    // 新增模式，加载图片配置模板
    // await loadImageConfigTemplates();
  }
  // 加载配置类型选项
  await loadConfigTypes();
});

// 加载赛事数据
const loadEventData = async (eventId: string | number) => {
  try {
    const res = await getGameEvent(eventId);
    const data = res.data;

    // 填充基本信息
    Object.assign(basicForm.value, data);

    // 加载图片配置数据
    try {
      await loadImageConfigData(eventId);
    } catch (error) {
      console.warn('加载图片配置数据失败，继续加载其他数据:', error);
      // 不中断其他数据的加载
    }

    await loadMenuData(eventId); // 加载菜单数据
    await loadConfigData(eventId); // 加载配置数据
  } catch (error) {
    proxy?.$modal.msgError('加载赛事数据失败');
  }
};

/** 状态修改  */
const handleStatusChange = async (row: GameEventVO) => {
  const text = row.isDefault === '0' ? '启用' : '停用';
  try {
    await proxy?.$modal.confirm('确认要"' + text + '""' + row.eventName + '"为默认赛事吗?');
    await changeEventDefault(row.eventId, row.isDefault);
    await loadEventData(row.eventId);
    proxy?.$modal.msgSuccess(text + '成功');
  } catch {
    return;
  } finally {
    row.isDefault = row.isDefault === '0' ? '1' : '0';
  }
};
// 菜单列表数据
const menuItems = ref<GameNavigatorVo[]>([]);

// 菜单选择弹框相关数据
const menuSelectDialogVisible = ref(false);
const availableMenus = ref<any[]>([]);
const selectedMenus = ref<any[]>([]);
const menuSearchKeyword = ref('');

// 过滤可用菜单的计算属性
const filteredAvailableMenus = computed(() => {
  if (!menuSearchKeyword.value) {
    return availableMenus.value;
  }
  return availableMenus.value.filter((menu) => menu.name?.toLowerCase().includes(menuSearchKeyword.value.toLowerCase()));
});

// 加载菜单数据
const loadMenuData = async (eventId: string | number) => {
  try {
    const res = await listRelateMenu({
      eventId: eventId,
      pageNum: 1,
      pageSize: 1000,
      orderByColumn: '',
      isAsc: ''
    });
    menuItems.value = Array.isArray(res.rows) ? res.rows : [];
  } catch (error) {
    proxy?.$modal.msgError('加载菜单数据失败');
  }
};

// 显示菜单选择弹框
const showMenuSelectDialog = async () => {
  try {
    // 加载可用的导航菜单
    const res = await getEnabledNavigator();
    availableMenus.value = Array.isArray(res.data) ? res.data : [];
    selectedMenus.value = [];
    menuSearchKeyword.value = '';
    menuSelectDialogVisible.value = true;
  } catch (error) {
    proxy?.$modal.msgError('加载可用菜单失败');
  }
};

// 处理菜单选择变化
const handleMenuSelectionChange = (selection: any[]) => {
  selectedMenus.value = selection;
};

// 确认添加菜单项
const confirmAddMenuItems = () => {
  console.log('selectedMenus:', selectedMenus.value);
  if (selectedMenus.value.length === 0) {
    proxy?.$modal.msgWarning('请选择要添加的菜单');
    return;
  }

  // 将选中的菜单添加到菜单列表中
  selectedMenus.value.forEach((menu) => {
    // 检查是否已存在相同的菜单（根据menu的navId和当前menuItems的icon字段比较）
    const exists = menuItems.value.some((item) => item.navId === Number(menu.navId));
    if (!exists) {
      menuItems.value.push(menu);
    }
  });
  console.log('menuItems:', menuItems.value);
  menuSelectDialogVisible.value = false;
  proxy?.$modal.msgSuccess(`成功添加 ${selectedMenus.value.length} 个菜单项`);
};

// 获取跳转类型标签
const getJumpTypeLabel = (jumpType: number) => {
  const typeMap = {
    1: '跳转链接',
    2: '不跳转',
    3: '小程序内链',
    4: '小程序外链',
    5: 'H5外链',
    6: '公众号文章',
    7: '公众号',
    8: '电话拨号'
  };
  return typeMap[jumpType as keyof typeof typeMap] || '未知类型';
};

// 删除菜单项
const removeMenuItem = async (index: number) => {
  try {
    // 从本地数组中删除元素
    menuItems.value.splice(index, 1);

    // 获取当前赛事ID
    const eventId = (route.params.id as string) || '';

    // 调用saveMenuData方法同步到后端
    await saveMenuData(eventId);

    proxy?.$modal.msgSuccess('删除菜单项成功');
  } catch (error) {
    console.error('删除菜单项失败:', error);
    proxy?.$modal.msgError('删除菜单项失败');
  }
};

// 保存菜单数据
const saveMenuData = async (eventId: string | number) => {
  try {
    // 提取所有菜单的navId
    const menus = menuItems.value.map((item) => Number(item.navId)); // 转换为数字类型
    // 调用editRelate接口保存赛事关联菜单
    const relateData: EditRelateMenuParams = {
      eventId: eventId,
      menus: menus
    };

    await editRelate(relateData);
  } catch (error) {
    console.error('保存菜单数据失败:', error);
    throw new Error('保存菜单失败');
  }
};

// 图片配置数据
const imageConfigItems = ref<GameEventConfigForm[]>([]);
// 加载图片配置数据（用于编辑模式）
const loadImageConfigData = async (eventId: string | number) => {
  try {
    // 先查询所有image类型的配置模板（不限制eventId，获取所有可用的图片配置项）
    const templateRes = await listGameEventConfig({
      configType: 'IMAGE',
      pageNum: 1,
      pageSize: 100,
      orderByColumn: '',
      isAsc: ''
    });

    // 获取所有图片配置模板
    const allImageConfigs = Array.isArray(templateRes.rows) ? templateRes.rows : [];

    // 查询当前赛事的图片配置数据（如果是默认赛事，eventId为空字符串）
    const eventRes = await listGameEventConfig({
      eventId: eventId === '' ? '' : eventId,
      configType: 'IMAGE',
      pageNum: 1,
      pageSize: 100,
      orderByColumn: '',
      isAsc: ''
    });

    const eventImageConfigs = Array.isArray(eventRes.rows) ? eventRes.rows : [];

    // 合并配置：以模板为基础，用当前赛事的数据覆盖
    imageConfigItems.value = allImageConfigs.map((template) => {
      const existingConfig = eventImageConfigs.find((item) => item.configKey === template.configKey);
      return {
        ...template,
        eventId: eventId,
        configValue: existingConfig?.configValue || '',
        isEnabled: existingConfig?.isEnabled || template.isEnabled || '0',
        status: existingConfig?.status || template.status || '0',
        configId: existingConfig?.configId
      };
    });
  } catch (error) {
    console.error('加载图片配置数据失败:', error);
    proxy?.$modal.msgError('加载图片配置数据失败: ' + (error as Error).message);
    imageConfigItems.value = [];
  }
};
// 刷新图片配置
const refreshImageConfigs = async () => {
  const eventId = route.params.id as string;
  if (eventId && eventId !== 'add') {
    await loadImageConfigData(getEffectiveEventId(eventId));
  } else {
    // 新增模式，只加载配置模板
    // await loadImageConfigTemplates();
  }
};
// 保存图片配置数据
const saveImageConfigData = async (eventId?: string | number) => {
  try {
    // 如果是默认赛事操作，使用空字符串作为eventId
    const targetEventId = eventId === '' ? '' : eventId || (route.params.id as string);
    const updates: GameEventConfigForm[] = [];
    const adds: GameEventConfigForm[] = [];

    // 收集需要更新和添加的数据
    for (const item of imageConfigItems.value) {
      if (item.configKey) {
        const configData: GameEventConfigForm = {
          ...item,
          eventId: targetEventId,
          configType: 'IMAGE'
        };

        if (item.configId && item.configValue) {
          updates.push(configData);
        } else if (!item.configId && item.configValue) {
          adds.push(configData);
        }
      }
    }

    // 批量更新
    if (updates.length > 0) {
      await Promise.all(updates.map(updateGameEventConfig));
    }

    // 批量添加
    if (adds.length > 0) {
      await Promise.all(adds.map(addGameEventConfig));
    }
  } catch (error) {
    console.error('保存图片配置数据失败:', error);
    throw new Error('保存图片配置失败');
  }
};

// 处理标签页切换
const handleTabClick = () => {
  // 可以在这里添加标签页切换的逻辑
};

// 配置信息数据
const configItems = ref<GameEventConfigForm[]>([]);
// 配置类型选项
const configTypes = ref<GameEventConfigTypeVO[]>([]);

// 加载配置类型数据
const loadConfigTypes = async () => {
  try {
    const res = await listGameEventConfigType({
      pageNum: 1,
      pageSize: 1000,
      orderByColumn: '',
      isAsc: ''
    });
    configTypes.value = Array.isArray(res.rows) ? res.rows : [];
  } catch (error) {
    proxy?.$modal.msgError('加载配置类型数据失败');
  }
};

// 加载赛事配置数据
const loadConfigData = async (eventId: string | number) => {
  try {
    const res = await listGameEventConfig({
      eventId: eventId === '' ? '' : eventId,
      pageNum: 1,
      pageSize: 10,
      orderByColumn: '',
      isAsc: ''
    });
    configItems.value = Array.isArray(res.rows) ? res.rows : [];
  } catch (error) {
    console.error('加载赛事配置数据失败:', error);
    proxy?.$modal.msgError('加载赛事配置数据失败: ' + (error as Error).message);
  }
};

// 添加配置项
const addConfigItem = () => {
  configItems.value.push({
    configKey: '',
    configValue: '',
    configDesc: '',
    configType: '' // 添加配置类型字段
  });
};

// 删除配置项
const removeConfigItem = (index: number) => {
  const configItem = configItems.value[index];
  if (configItem.configId) {
    delGameEventConfig(configItem.configId).then(() => {
      configItems.value.splice(index, 1);
    });
  } else {
    configItems.value.splice(index, 1);
  }
};

// 保存赛事配置数据
const saveconfigData = async (eventId: string | number) => {
  try {
    for (const item of configItems.value) {
      // 确保eventId被正确设置
      const configData = { ...item, eventId };

      if (item.configId) {
        // 更新现有队伍
        await updateGameEventConfig(configData);
      } else if (item.configDesc) {
        // 只有有名称的新队伍才保存
        await addGameEventConfig(configData);
      }
    }
  } catch (error) {
    console.error('保存赛事配置信息失败:', error);
    throw new Error('保存赛事配置信息失败');
  }
};

// 保存赛事信息
const saveEvent = async () => {
  try {
    // 验证基本信息表单
    await basicFormRef.value?.validate();

    saveLoading.value = true;

    // 合并表单数据
    const formData: GameEventForm = {
      ...basicForm.value
    };

    let savedEventId: string;
    // 如果设置为默认赛事，则取消其他赛事的默认状态
    if (basicForm.value.isDefault === '0') {
      handleStatusChange({
        eventId: basicForm.value.eventId,
        isDefault: basicForm.value.isDefault,
        eventName: basicForm.value.eventName
      } as GameEventVO);
    }

    // 保存基本信息
    if (!isEdit.value) {
      const addRes = await addGameEvent(formData);
      // 假设返回的数据中包含新创建的赛事ID
      savedEventId = addRes?.data as string;
    } else {
      savedEventId = route.params.id as string;
    }
    // 保存图片配置数据
    await saveImageConfigData(savedEventId);
    // 保存赛事配置项数据
    await saveconfigData(savedEventId);
    // 保存菜单数据
    await saveMenuData(savedEventId);

    // 保存基本信息
    if (isEdit.value) {
      await updateGameEvent(formData);
    }

    proxy?.$modal.msgSuccess('保存成功');

    // 保存成功后，设置一个标识，表示需要刷新列表数据
    sessionStorage.setItem('needRefreshGameEventList', 'true');
    goBack();
  } catch (error) {
    console.error('保存失败:', error);
    proxy?.$modal.msgError('保存失败');
  } finally {
    saveLoading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.game-event-edit {
  .page-header {
    display: flex;
    align-items: center;
    gap: 16px;

    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .menu-config,
  .project-config,
  .config-info,
  .image-config {
    .menu-header,
    .project-header,
    .config-header,
    .image-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .image-config {
    .config-info {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

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

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

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

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #ebeef5;
  }
}

:deep(.el-tabs__content) {
  padding: 20px 0;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style>