<template>
  <div class="sysseting-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="base">
        <el-form :model="baseForm" label-width="120px" class="tab-form">
          <el-form-item label="投诉电话">
            <el-input v-model="baseForm.phone" placeholder="请输入投诉电话" style="width: 300px" />
          </el-form-item>
          <el-form-item label="抢单开始时间">
            <el-time-picker v-model="baseForm.startTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
          </el-form-item>
          <el-form-item label="抢单结束时间">
            <el-time-picker v-model="baseForm.endTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
          </el-form-item>
          <el-form-item label="秒杀结束时间">
            <el-date-picker
              v-model="baseForm.mstime"
              type="datetime"
              placeholder="选择秒杀结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="质保金扣除比例">
            <el-input-number v-model="baseForm.marginRate" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
          </el-form-item>
          <el-form-item label="消费金">
            <el-input-number v-model="baseForm.consumption" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="用户支付服务费用后根据用户的实际支付换算得到的消费金比例" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="服务金">
            <el-input-number v-model="baseForm.servicefee" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="用户支付商品费用后根据用户的实际支付换算得到的服务金比例" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="消费金抵扣比例">
            <el-input-number v-model="baseForm.consumption_deduction" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="用户支付订单时可用消费金抵扣的最大比例" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="服务金抵扣比例">
            <el-input-number v-model="baseForm.service_deduction" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="用户支付订单时可用服务金抵扣的最大比例" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="物料分佣">
            <el-input-number v-model="baseForm.material_commissions" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="平台统一设置，师傅使用物料后师傅所得物料分佣的比例" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="会员优惠">
            <el-input-number v-model="baseForm.member_discount" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="包年会员在平台消费进行的折扣" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="充值附送比例">
            <el-input-number v-model="baseForm.recharge_discount" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
            <el-tooltip content="用户充值时按照用户充值金额的比例进行赠送" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="下单送积分">
            <el-input v-model="baseForm.orderScore" style="width: 120px" />
            <el-tooltip content="下单支付金额多少元赠送1积分，不填则不赠送" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="搜索热词">
            <el-select v-model="baseForm.hotwords" multiple filterable allow-create default-first-option placeholder="请输入热词" style="width: 600px">
              <el-option v-for="item in baseForm.hotwords" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="客服二维码">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-change="handleQrChange"
              :before-upload="beforeQrUpload"
            >
              <img v-if="baseForm.qrUrl" :src="baseForm.qrUrl" class="qr-img" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('1')">提交</el-button>
            <el-button @click="resetBase">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文本配置" name="text">
        <el-form :model="textForm" label-width="120px" class="tab-form">
          <el-form-item label="公司名称">
            <el-input v-model="textForm.company" placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="textForm.intro" :rows="4" placeholder="请输入公司简介" />
          </el-form-item>
          <el-form-item label="质保金说明">
            <Editor v-model="textForm.marginDesc"  />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('2')">提交</el-button>
            <el-button @click="resetText">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="下单时间配置" name="orderTime">
        <el-form label-width="120px" class="tab-form">
          <el-form-item label="下单时间">
            <div v-for="(item, idx) in orderTimes" :key="idx" style="display: flex; align-items: center; margin-bottom: 8px;">
              <el-time-picker
                v-model="item.start"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 130px; margin-right: 8px;"
                @change="updateTimeRange(idx)"
              />
              <span style="margin: 0 4px;">-</span>
              <el-time-picker
                v-model="item.end"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 130px; margin-right: 12px;"
                @change="updateTimeRange(idx)"
              />
              <el-input-number v-model="item.count" :min="0" style="width:25%; margin-right: 12px;" />
              <el-button icon="el-icon-delete" type="danger" @click="removeOrderTime(idx)" circle />
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrderTime">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('3')">提交</el-button>
            <el-button @click="resetOrderTime">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="时间配置" name="time">
        <el-form :model="timeForm" label-width="120px" class="tab-form">
          <el-form-item label="每月提现时间">
            <el-select v-model="timeForm.withdrawDays" multiple placeholder="请选择日期" style="width: 300px">
              <el-option v-for="d in 31" :key="d" :label="d + '号'" :value="d + '号'" />
            </el-select>
          </el-form-item>
          <el-form-item label="定时接单时长">
            <el-input-number v-model="timeForm.autoOrderMinutes" :min="1" style="width: 120px" />
            <span style="margin-left: 8px">分钟</span>
            <div class="el-form-item__tip">订单无人接单时多少分钟后，自动重新派单。单位（分钟）</div>
          </el-form-item>
          <el-form-item label="取消订单时长">
            <el-input-number v-model="timeForm.cancelOrderDays" :min="1" style="width: 120px" />
            <span style="margin-left: 8px">天</span>
            <div class="el-form-item__tip">师傅到达之后，多久之后没有报工则取消订单。单位（天）</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('4')">提交</el-button>
            <el-button @click="resetTime">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="会员配置" name="config_five">
        <el-form :model="memberForm" label-width="120px" class="tab-form">
          <el-form-item label="会员权益说明">
            <Editor v-model="memberForm.member"  />
          </el-form-item>
          <el-form-item label="会员规则说明">
            <Editor v-model="memberForm.memberRule"  />
          </el-form-item>
          <el-form-item label="充值规则说明">
            <Editor v-model="memberForm.recharge"  />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('5')">提交</el-button>
            <el-button @click="resetMember">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="评价标签" name="config_six">
        <el-form :model="ratingForm" label-width="120px" class="tab-form">
          <el-form-item label="服务评价标签">
            <el-select v-model="ratingForm.service" multiple filterable allow-create default-first-option placeholder="请输入服务评价标签" style="width: 600px">
              <el-option v-for="item in ratingForm.service" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品评价标签">
            <el-select v-model="ratingForm.goods" multiple filterable allow-create default-first-option placeholder="请输入商品评价标签" style="width: 600px">
              <el-option v-for="item in ratingForm.goods" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('6')">提交</el-button>
            <el-button @click="resetRating">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="通知公告" name="config_banner">
        <div class="notice-container">
          <!-- 页面头部操作区 -->
          <div class="notice-header">
            <div class="notice-title">
              <h3>通知公告管理</h3>
              <p class="notice-desc">管理首页展示的通知公告，支持富文本编辑和状态控制</p>
            </div>
            <div class="notice-header-actions">
              <div class="notice-filter">
                <el-select v-model="noticeFilter" placeholder="筛选分类" clearable size="small" style="width: 150px; margin-right: 12px;">
                  <el-option label="全部公告" value=""></el-option>
                  <el-option label="首页通知公告" value="home"></el-option>
                  <el-option label="活动通知公告" value="activity"></el-option>
                </el-select>
              </div>
              <el-button type="primary" icon="el-icon-plus" @click="addNotice">添加公告</el-button>
              <el-button type="success" icon="el-icon-check" @click="saveAllConfig('notice')">保存全部</el-button>
              <el-button icon="el-icon-refresh" @click="resetNotice">重置</el-button>
            </div>
          </div>

          <!-- 公告列表 -->
          <div class="notice-list">
            <div v-if="filteredNoticeList.length === 0" class="notice-empty">
              <el-empty description="暂无公告数据">
                <el-button type="primary" @click="addNotice">添加第一条公告</el-button>
              </el-empty>
            </div>

            <div v-for="(item, index) in filteredNoticeList" :key="index" class="notice-item">
              <el-card shadow="hover" :class="['notice-card', { 'notice-offline': item.status === 0, 'notice-expanded': item.expanded }]">

                <!-- 简洁行显示 -->
                <div class="notice-simple-row" @click="toggleNoticeExpand(item.originalIndex)">
                  <div class="notice-simple-left">
                    <span class="notice-index">{{ item.originalIndex + 1 }}</span>
                    <el-tag
                      :type="getCategoryTagType(item.category)"
                      size="mini"
                      class="notice-category-tag-left">
                      {{ getCategoryName(item.category) }}
                    </el-tag>
                    <div class="notice-simple-info">
                      <span class="notice-simple-title">{{ item.title || '未设置标题' }}</span>
                      <span class="notice-simple-meta">排序: {{ item.sort || 0 }}</span>
                  </div>
                  </div>
                  <div class="notice-simple-right">
                    <el-tag :type="noticeForm.notice[item.originalIndex].status === 1 ? 'success' : 'danger'" size="small">
                      {{ noticeForm.notice[item.originalIndex].status === 1 ? '已上线' : '已下线' }}
                    </el-tag>
                    <el-switch
                      v-model="noticeForm.notice[item.originalIndex].status"
                      :active-value="1"
                      :inactive-value="0"
                      size="mini"
                      active-color="#67C23A"
                      inactive-color="#F56C6C"
                      @change="handleStatusChange(item.originalIndex)"
                      @click.native.stop
                      style="margin: 0 12px;">
                    </el-switch>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      circle
                      @click.stop="removeNotice(item.originalIndex)">
                    </el-button>
                    <i
                      :class="item.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                      class="notice-expand-icon">
                    </i>
                  </div>
                </div>

                <!-- 展开的编辑内容 -->
                <div v-show="item.expanded" class="notice-card-content">
                  <el-divider style="margin: 16px 0;"></el-divider>
                  <el-form label-width="80px" label-position="top">
                    <div class="notice-form-grid">
                      <!-- 第一行：标题 -->
                      <div class="notice-form-row full-width">
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <el-form-item label="公告标题" class="notice-title-item">
                              <el-input
                                v-model="item.title"
                                placeholder="请输入公告标题"
                                maxlength="100"
                                show-word-limit
                                clearable>
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="公告分类" class="notice-category-item">
                              <el-select
                                v-model="item.category"
                                placeholder="请选择公告分类"
                                @change="val => handleCategoryChange(val, item, item.originalIndex)">
                                <el-option label="首页通知公告" value="home">
                                  <span style="display: flex; align-items: center;">
                                    <i class="el-icon-house" style="color: #409EFF; margin-right: 8px;"></i>
                                    首页通知公告
                                  </span>
                                </el-option>
                                <el-option label="活动通知公告" value="activity">
                                  <span style="display: flex; align-items: center;">
                                    <i class="el-icon-star-on" style="color: #E6A23C; margin-right: 8px;"></i>
                                    活动通知公告
                                  </span>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="排序" class="notice-sort-item">
                              <el-input-number
                                v-model="item.sort"
                                :min="0"
                                :max="999"
                                controls-position="right"
                                placeholder="排序值">
                              </el-input-number>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="跳转链接" class="notice-link-item">
                              <el-select
                                v-model="item.link"
                                placeholder="请选择站内地址"
                                filterable
                                clearable
                                style="width: 100%;">
                                <el-option
                                  v-for="(link, idx) in siteLinks"
                                  :key="idx"
                                  :label="link.name + (link.remark ? '（' + link.remark + '）' : '')"
                                  :value="link.url"
                                />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </div>

                      <!-- 第二行：内容 -->
                      <div class="notice-form-row full-width">
                        <el-form-item label="公告内容" class="notice-content-item">
                          <Editor v-model="item.content"  />
                        </el-form-item>
                      </div>
                    </div>
                  </el-form>

                  <!-- 编辑区域底部操作按钮 -->
                  <div class="notice-edit-actions">
                    <el-button type="primary" size="small" @click="saveNoticeItem(item.originalIndex)">
                      <i class="el-icon-check"></i> 保存
                    </el-button>
                    <el-button size="small" @click="toggleNoticeExpand(item.originalIndex)">
                      <i class="el-icon-close"></i> 收起
                    </el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </div>

          <!-- 底部操作区 -->
          <div class="notice-footer" v-if="noticeForm.notice.length > 0">
            <el-divider></el-divider>
            <div class="notice-footer-actions">
              <el-button type="primary" icon="el-icon-plus" @click="addNotice">添加公告</el-button>
              <el-button type="success" icon="el-icon-check" @click="saveAllConfig('notice')">保存全部</el-button>
              <el-button icon="el-icon-refresh" @click="resetNotice">重置</el-button>
            </div>
            <div class="notice-footer-tips">
              <el-alert
                title="温馨提示"
                type="info"
                :closable="false"
                show-icon>
                <div slot="description">
                  <p>• 只有状态为"上线"的公告才会在前端显示</p>
                  <p>• 公告按排序值升序排列，数值越小越靠前</p>
                  <p>• 保存后需要前端重新请求接口才能看到最新内容</p>
                </div>
              </el-alert>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="活动专区维护" name="activity_zone">
        <div class="activity-zone-container">
          <div class="activity-header">
            <el-button type="primary" icon="el-icon-plus" @click="addActivity">添加活动</el-button>
            <el-button type="success" icon="el-icon-check" @click="saveAllConfig('activity')">保存全部</el-button>
            <el-button icon="el-icon-refresh" @click="resetActivity">重置</el-button>
          </div>
          <div v-if="activityForm.activities.length === 0" class="activity-empty">
            <el-empty description="暂无活动数据">
              <el-button type="primary" @click="addActivity">添加第一条活动</el-button>
            </el-empty>
          </div>
          <div v-for="(item, index) in activityForm.activities" :key="index" class="activity-item">
            <el-card shadow="hover" :class="['activity-card', { 'activity-offline': item.status === 0, 'activity-expanded': item.expanded }]">
              <!-- 简洁行显示 -->
              <div class="activity-simple-row" @click="toggleActivityExpand(index)">
                <div class="activity-simple-left">
                  <span class="activity-index">{{ index + 1 }}</span>
                  <div class="activity-simple-info">
                    <span class="activity-simple-title">{{ item.title || '未设置标题' }}</span>
                    <span class="activity-simple-content">{{ item.content ? (item.content.length > 20 ? item.content.slice(0, 20) + '...' : item.content) : '无内容' }}</span>
                    <span v-if="item.link" class="activity-simple-link">链接: {{ item.link.length > 30 ? item.link.slice(0, 30) + '...' : item.link }}</span>
                    <span class="activity-simple-position">显示位置: {{ item.position || 0 }}</span>
                  </div>
                  <img v-if="item.imgUrl" :src="item.imgUrl" class="activity-thumb" />
                </div>
                <div class="activity-simple-right">
                  <el-tag :type="item.status === 1 ? 'success' : 'danger'" size="small">
                    {{ item.status === 1 ? '已上线' : '已下线' }}
                  </el-tag>
                  <el-switch
                    v-model="item.status"
                    :active-value="1"
                    :inactive-value="0"
                    size="mini"
                    active-color="#67C23A"
                    inactive-color="#F56C6C"
                    @change="handleActivityStatusChange(index)"
                    @click.native.stop
                    style="margin: 0 12px;">
                  </el-switch>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    circle
                    @click.stop="removeActivity(index)">
                  </el-button>
                  <i
                    :class="item.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                    class="activity-expand-icon">
                  </i>
                </div>
              </div>
              <!-- 展开编辑内容 -->
              <div v-show="item.expanded" class="activity-card-content">
                <el-divider style="margin: 16px 0;"></el-divider>
                <el-form label-width="80px" label-position="top">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="活动标题">
                        <el-input v-model="item.title" placeholder="请输入活动标题" maxlength="100" show-word-limit clearable />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="活动链接">

                        <selecturl  v-model="item.link"></selecturl>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="显示位置">
                        <el-input-number
                          v-model="item.position"
                          :min="0"
                          :max="999"
                          controls-position="right"
                          placeholder="显示位置（数字越小越靠前）"
                          style="width: 100%;">
                        </el-input-number>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="状态">
                        <el-switch v-model="item.status" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="活动图片">
                        <el-upload
                          :ref="'activityUpload' + index"
                          :action="uploadFileUrl"
                          :headers="uploadHeaders"
                          :show-file-list="false"
                          :on-success="(res, file) => handleActivityImgSuccess(res, file, index)"
                          :on-error="(err, file) => handleActivityImgError(err, file, index)"
                          :before-upload="file => beforeActivityImgUpload(file, index)"
                          :key="'upload_' + index + '_' + (item.imgUrl ? 'has' : 'no')"
                          class="activity-img-uploader"
                          name="file">
                          <div style="position:relative;display:inline-block;">
                            <img v-if="item.imgUrl" :src="item.imgUrl" class="activity-img" style="cursor:pointer" title="点击替换图片" />
                            <el-button v-if="item.imgUrl" class="activity-img-delete-btn" type="danger" icon="el-icon-close" circle size="mini" @click.stop="removeActivityImg(index)" style="position:absolute;top:2px;right:2px;padding:0;width:22px;height:22px;" title="删除图片"></el-button>
                            <i v-else class="el-icon-plus activity-uploader-icon" style="cursor:pointer" title="点击上传图片" />
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="活动内容">
                        <el-input v-model="item.content" type="textarea" :rows="4" placeholder="请输入活动内容" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="activity-edit-actions">
                  <el-button type="primary" size="small" @click="saveActivityItem(index)">
                    <i class="el-icon-check"></i> 保存
                  </el-button>
                  <el-button size="small" @click="toggleActivityExpand(index)">
                    <i class="el-icon-close"></i> 收起
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="站内地址" name="siteLinks">
        <el-form label-width="100px" class="tab-form">
          <div v-for="(item, idx) in siteLinks" :key="idx" style="display: flex; align-items: center; margin-bottom: 8px;">
            <el-input v-model="item.name" placeholder="名称" style="width: 120px; margin-right: 8px;" />
            <el-input v-model="item.url" placeholder="地址" style="width: 220px; margin-right: 8px;" />
<!--            <el-select v-model="item.params" placeholder="选择类型">-->
<!--              <el-option value="1" label="普通链接"></el-option>-->
<!--              <el-option value="2" label="服务链接"></el-option>-->
<!--              <el-option value="3" label="商品链接"></el-option>-->
<!--            </el-select>-->
<!--            <el-input v-model="item.params" placeholder="参数" style="width: 160px; margin-right: 8px;" />-->
            <el-input v-model="item.remark" placeholder="备注" style="width: 160px; margin-right: 8px;" />

            <el-button icon="el-icon-delete" type="danger" @click="removeSiteLink(idx)" circle />
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="addSiteLink">新增</el-button>
          <el-button type="success" @click="saveSiteLinks" style="margin-left: 12px;">保存</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="上门标准" name="serviceStandard">
        <el-form :model="serviceStandardForm" label-width="120px" class="tab-form">
          <el-form-item label="上门标准说明">
            <Editor v-model="serviceStandardForm.serviceStandard" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAllConfig('serviceStandard')">提交</el-button>
            <el-button @click="resetServiceStandard">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="首页弹窗维护" name="popupConfig">
        <div class="popup-container">
          <div class="popup-header">
            <el-button type="primary" icon="el-icon-plus" @click="addPopup">添加弹窗</el-button>
            <el-button type="success" icon="el-icon-check" @click="saveAllConfig('popup')">保存全部</el-button>
            <el-button icon="el-icon-refresh" @click="resetPopup">重置</el-button>
          </div>
          <div v-if="popupForm.popups.length === 0" class="popup-empty">
            <el-empty description="暂无弹窗数据">
              <el-button type="primary" @click="addPopup">添加第一条弹窗</el-button>
            </el-empty>
          </div>
          <div v-for="(item, index) in popupForm.popups" :key="index" class="popup-item">
            <el-card shadow="hover" :class="['popup-card', { 'popup-offline': item.status === 0, 'popup-expanded': item.expanded }]">
              <!-- 简洁行显示 -->
              <div class="popup-simple-row" @click="togglePopupExpand(index)">
                <div class="popup-simple-left">
                  <span class="popup-index">{{ index + 1 }}</span>
                  <div class="popup-simple-info">
                    <span v-if="item.link" class="popup-simple-link">链接: {{ item.link.length > 30 ? item.link.slice(0, 30) + '...' : item.link }}</span>
                    <span class="popup-simple-position">排序: {{ item.sort || 0 }}</span>
                  </div>
                  <img v-if="item.imgUrl" :src="item.imgUrl" class="popup-thumb" />
                </div>
                <div class="popup-simple-right">
                  <el-tag :type="item.status === 1 ? 'success' : 'danger'" size="small">
                    {{ item.status === 1 ? '已上线' : '已下线' }}
                  </el-tag>
                  <el-switch
                    v-model="item.status"
                    :active-value="1"
                    :inactive-value="0"
                    size="mini"
                    active-color="#67C23A"
                    inactive-color="#F56C6C"
                    @change="handlePopupStatusChange(index)"
                    @click.native.stop
                    style="margin: 0 12px;">
                  </el-switch>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    circle
                    @click.stop="removePopup(index)">
                  </el-button>
                  <i
                    :class="item.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                    class="popup-expand-icon">
                  </i>
                </div>
              </div>
              <!-- 展开编辑内容 -->
              <div v-show="item.expanded" class="popup-card-content">
                <el-divider style="margin: 16px 0;"></el-divider>
                <el-form label-width="80px" label-position="top">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="跳转链接">

                        <selecturl  v-model="item.link"></selecturl>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="排序">
                        <el-input-number
                          v-model="item.sort"
                          :min="0"
                          :max="999"
                          controls-position="right"
                          placeholder="排序值（数字越小越靠前）"
                          style="width: 100%;">
                        </el-input-number>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="状态">
                        <el-switch v-model="item.status" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="弹窗图片">
                        <el-upload
                          :ref="'popupUpload' + index"
                          :action="uploadFileUrl"
                          :headers="uploadHeaders"
                          :show-file-list="false"
                          :on-success="(res, file) => handlePopupImgSuccess(res, file, index)"
                          :on-error="(err, file) => handlePopupImgError(err, file, index)"
                          :before-upload="file => beforePopupImgUpload(file, index)"
                          :key="'upload_' + index + '_' + (item.imgUrl ? 'has' : 'no')"
                          class="popup-img-uploader"
                          name="file">
                          <div style="position:relative;display:inline-block;">
                            <img v-if="item.imgUrl" :src="item.imgUrl" class="popup-img" style="cursor:pointer" title="点击替换图片" />
                            <el-button v-if="item.imgUrl" class="popup-img-delete-btn" type="danger" icon="el-icon-close" circle size="mini" @click.stop="removePopupImg(index)" style="position:absolute;top:2px;right:2px;padding:0;width:22px;height:22px;" title="删除图片"></el-button>
                            <i v-else class="el-icon-plus popup-uploader-icon" style="cursor:pointer" title="点击上传图片" />
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="popup-edit-actions">
                  <el-button type="primary" size="small" @click="savePopupItem(index)">
                    <i class="el-icon-check"></i> 保存
                  </el-button>
                  <el-button size="small" @click="togglePopupExpand(index)">
                    <i class="el-icon-close"></i> 收起
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" style="margin-top: 24px;" @click="saveAllConfig">保存全部配置</el-button>
  </div>
</template>

<script>
import { listSiteConfig, getSiteConfig, delSiteConfig, addSiteConfig, updateSiteConfig } from "@/api/system/SiteConfig"
import { getToken } from "@/utils/auth"
import  selecturl from "./selecturl.vue"






export default {
  name: 'SysSeting',
  components: {
    selecturl
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      activeTab: 'base',
      SiteConfigList: [],
      config_one: {},
      config_two: {},
      config_three: {},
      config_four: {},
      config_five: {},
      config_six: {},
      total: 0,   // 系统配置表格数据
      token: getToken(), // 获取token用于上传
      // 上传配置

      uploadFileUrl:process.env.NODE_ENV === 'development'?"/dev-api/common/upload":"/prod-api/common/upload",
      uploadHeaders: {
        Authorization: "Bearer " + getToken(),
      },
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        name: null,
        status: null
      },
      // 基本信息
      baseForm: {
        phone: '',
        startTime: '',
        endTime: '',
        mstime: '',
        marginRate: 10,
        consumption: 0,
        servicefee: 0,
        material_commissions: 10,
        member_discount: 80,
        recharge_discount: 0,
        consumption_deduction: 0,
        service_deduction: 0,
        orderScore: 100,
        hotwords: ['水电维修', '家电清洗', '灯具维修', '墙面翻新', '门窗家具', '疏通维修', '防水维修'],
        qrUrl: ''
      },
      // 文本配置
      textForm: {
        company: '',
        intro: '',
        marginDesc: ''
      },
      memberForm:{
        member: '',
        memberRule: '',
        recharge: '' // 新增充值规则说明
      },
      // 评价标签配置
      ratingForm: {
        service: ['服务态度好', '技术专业', '准时守信', '认真负责', '价格合理'],
        goods: ['商品质量好', '包装完整', '物流快速', '性价比高', '描述相符']
      },
      // 下单时间配置
      orderTimes: [

      ],
      // 时间配置
      timeForm: {
        withdrawDays: ['8号', '18号', '28号'],
        autoOrderMinutes: 10,
        cancelOrderDays: 7
      },

      config_seven: {},
      noticeForm: {
        notice: []
      },
      // 通知公告筛选
      noticeFilter: '',
      activityForm: {
        activities: []
      },
      config_eight: {},
      config_nine: {}, // 新增站内地址配置
      siteLinks: [], // 站内地址数据
      config_ten: {}, // 上门标准配置
      serviceStandardForm: {
        serviceStandard: ''
      },
      config_eleven: {}, // 首页弹窗配置
      popupForm: {
        popups: []
      },

    }
  },
  computed: {
    // 过滤后的公告列表
    filteredNoticeList() {
      let filtered = this.noticeForm.notice;

      // 根据分类筛选
      if (this.noticeFilter) {
        filtered = filtered.filter(item => item.category === this.noticeFilter);
      }

      // 添加原始索引，用于在过滤后仍能正确操作原数组
      return filtered.map((item, index) => {
        const originalIndex = this.noticeForm.notice.findIndex(notice => notice === item);
        return {
          ...item,
          originalIndex: originalIndex
        };
      });
    }
  },
  created() {
         this.getList()
      },
  methods: {
     /** 查询系统配置列表 */
     getList() {
      this.loading = true
      listSiteConfig(this.queryParams).then(response => {
        this.SiteConfigList = response.rows

        // config_one 基本信息
        this.config_one = response.rows.find(item => item.name === 'config_one')
        if (this.config_one && this.config_one.value) {
          const configOneObj = JSON.parse(this.config_one.value)
          this.baseForm = {
            phone: configOneObj.phone || '',
            startTime: configOneObj.loot_start || '',
            endTime: configOneObj.loot_end || '',
            mstime: configOneObj.mstime || '',
            marginRate: configOneObj.margin || 10,
            consumption: configOneObj.consumption || 0,
            servicefee: configOneObj.servicefee || 0,
            material_commissions: configOneObj.material_commissions || 10,
            member_discount: configOneObj.member_discount || 80,
            recharge_discount: configOneObj.recharge_discount || 0,
            consumption_deduction: configOneObj.consumption_deduction || 0,
            service_deduction: configOneObj.service_deduction || 0,
            orderScore: configOneObj.orderScore || 100,
            hotwords: configOneObj.hot || [],
            qrUrl: configOneObj.kf || '',
          }
        }

        // config_two 文本配置
        this.config_two = response.rows.find(item => item.name === 'config_two')
        if (this.config_two && this.config_two.value) {
          const configTwoObj = JSON.parse(this.config_two.value)
          this.textForm = {
            company: configTwoObj.name || '',
            intro: configTwoObj.brief || '',
            marginDesc: configTwoObj.money_explain || ''
          }
        }

        // config_five 会员配置
        this.config_five = response.rows.find(item => item.name === 'config_five')
        if (this.config_five && this.config_five.value) {
          const configfiveObj = JSON.parse(this.config_five.value)
          this.memberForm = {
            member: configfiveObj.member || '',
            memberRule: configfiveObj.memberRule || '',
            recharge: configfiveObj.recharge || ''
          }
        }

        // config_six 评价标签配置
        this.config_six = response.rows.find(item => item.name === 'config_six')
        if (this.config_six && this.config_six.value) {
          const configSixObj = JSON.parse(this.config_six.value)
          this.ratingForm = {
            service: configSixObj.service || ['服务态度好', '技术专业', '准时守信', '认真负责', '价格合理'],
            goods: configSixObj.goods || ['商品质量好', '包装完整', '物流快速', '性价比高', '描述相符']
          }
        }

        // config_three 下单时间配置
        this.config_three = response.rows.find(item => item.name === 'config_three')
        this.orderTimes = []
        if (this.config_three && this.config_three.value) {
          let _data = JSON.parse(this.config_three.value)
          if (_data && _data.time) {
            for (let key in _data.time) {
              const [start, end] = _data.time[key].key.split('-');
              this.orderTimes.push({
                start: start || '',
                end: end || '',
                count: _data.time[key].num || 99
              })
            }
          }
        }

        // config_four 时间配置
        this.config_four = response.rows.find(item => item.name === 'config_four')
        if (this.config_four && this.config_four.value) {
          const configFourObj = JSON.parse(this.config_four.value)
          this.timeForm = {
            withdrawDays: configFourObj.time || [],
            autoOrderMinutes: configFourObj.order_time || 10,
            cancelOrderDays: configFourObj.remove_time || 7
          }
        }

        // config_seven 通知公告配置
        this.config_seven = response.rows.find(item => item.name === 'config_seven')
        if (this.config_seven && this.config_seven.value) {
          const configNoticeObj = JSON.parse(this.config_seven.value)
          this.noticeForm.notice = (configNoticeObj.notice || []).map(item => ({
            ...item,
            category: item.category || 'home', // 兼容旧数据，默认为首页通知公告
            expanded: false // 从后端加载的数据默认不展开
          }))
        }

        // config_eight 活动专区配置
        this.config_eight = response.rows.find(item => item.name === 'config_eight')
        if (this.config_eight && this.config_eight.value) {
          const configEightObj = JSON.parse(this.config_eight.value)
          this.activityForm.activities = (configEightObj.activities || []).map(item => ({
            ...item,
            status: typeof item.status === 'undefined' ? 1 : item.status,
            link: item.link || '', // 兼容旧数据，默认为空字符串
            position: typeof item.position === 'undefined' ? 0 : item.position, // 兼容旧数据，默认显示位置为0
            expanded: false // 从后端加载的数据默认不展开
          }))
        }

        // config_nine 站内地址配置
        this.config_nine = response.rows.find(item => item.name === 'config_nine')
        if (this.config_nine && this.config_nine.value) {
          try {
            this.siteLinks = JSON.parse(this.config_nine.value).siteLinks || [];
          } catch (e) {
            this.siteLinks = [];
          }
        } else {
          this.siteLinks = [];
        }

        // config_ten 上门标准配置
        this.config_ten = response.rows.find(item => item.name === 'config_ten')
        if (this.config_ten && this.config_ten.value) {
          try {
            const configTenObj = JSON.parse(this.config_ten.value)
            this.serviceStandardForm = {
              serviceStandard: configTenObj.serviceStandard || ''
            }
          } catch (e) {
            this.serviceStandardForm = { serviceStandard: '' }
          }
        } else {
          this.serviceStandardForm = { serviceStandard: '' }
        }

        // config_eleven 首页弹窗配置
        this.config_eleven = response.rows.find(item => item.name === 'config_shiyi')

        if (this.config_eleven && this.config_eleven.value) {
          try {
            const configElevenObj = JSON.parse(this.config_eleven.value)

            this.popupForm.popups = (configElevenObj.popups || []).map(item => ({
              ...item,
              status: typeof item.status === 'undefined' ? 1 : item.status,
              link: item.link || '',
              sort: typeof item.sort === 'undefined' ? 0 : item.sort,
              expanded: false
            }))

          } catch (e) {
            console.error('解析弹窗配置失败:', e);
            this.popupForm.popups = []
          }
        } else {
          this.popupForm.popups = []
        }

        this.total = response.total
        this.loading = false
      })
    },
    // 基本信息
    submitBase() {
      this.$message.success('提交成功（模拟）')
    },
    resetBase() {
      this.$refs.baseForm && this.$refs.baseForm.resetFields && this.$refs.baseForm.resetFields()
      // 手动重置mstime字段
      this.baseForm.mstime = ''
    },
    handleQrChange(file) {
      // 模拟上传二维码
      const reader = new FileReader()
      reader.onload = e => {
        this.baseForm.qrUrl = e.target.result
      }
      reader.readAsDataURL(file.raw)
    },
    beforeQrUpload(file) {
      const isImg = file.type.startsWith('image/')
      if (!isImg) {
        this.$message.error('只能上传图片格式')
      }
      return isImg
    },
    // 文本配置
    submitText() {
      this.$message.success('提交成功（模拟）')
    },
    resetText() {
      this.textForm = { company: '', intro: '', marginDesc: '' }
    },
    // 下单时间配置
    updateTimeRange(idx) {
      const item = this.orderTimes[idx];
      if (item.start && item.end && item.start >= item.end) {
        this.$message.error('结束时间必须大于开始时间');
        item.end = '';
      }
    },
    addOrderTime() {
      this.orderTimes.push({ start: '', end: '', count: 99 });
    },
    removeOrderTime(idx) {
      this.orderTimes.splice(idx, 1)
    },
    submitOrderTime() {
      // 提交时拼接时间段
      const timeList = this.orderTimes.map(item => ({
        time: `${item.start}-${item.end}`,
        count: item.count
      }));
      // 这里可以将 timeList 发送给后端
      this.$message.success('提交成功（模拟）')
    },
    resetOrderTime() {
      this.orderTimes = [

      ]
    },
    // 时间配置
    submitTime() {
      this.$message.success('提交成功（模拟）')
    },
    resetTime() {
      this.timeForm = { withdrawDays: ['8号', '18号', '28号'], autoOrderMinutes: 10, cancelOrderDays: 7 }
    },
    resetMember() {
      this.memberForm = { member: '', memberRule: '', recharge: '' }
    },
    resetRating() {
      this.ratingForm = {
        service: ['服务态度好', '技术专业', '准时守信', '认真负责', '价格合理'],
        goods: ['商品质量好', '包装完整', '物流快速', '性价比高', '描述相符']
      }
    },
    resetServiceStandard() {
      this.serviceStandardForm = { serviceStandard: '' }
    },
    resetPopup() {
      this.popupForm.popups = []
    },
    async saveAllConfig(e) {
      // 1. 组装 config_one
      const config_one = {
        phone: this.baseForm.phone,
        loot_start: this.baseForm.startTime,
        loot_end: this.baseForm.endTime,
        mstime: this.baseForm.mstime,
        margin: this.baseForm.marginRate,
        consumption: this.baseForm.consumption,
        servicefee: this.baseForm.servicefee,
        material_commissions: this.baseForm.material_commissions,
        member_discount: this.baseForm.member_discount,
        recharge_discount: this.baseForm.recharge_discount,
        consumption_deduction: this.baseForm.consumption_deduction,
        service_deduction: this.baseForm.service_deduction,
        orderScore: this.baseForm.orderScore,
        hot: this.baseForm.hotwords,
        kf: this.baseForm.qrUrl
      };
      // 2. 组装 config_two
      const config_two = {
        name: this.textForm.company,
        brief: this.textForm.intro,
        money_explain: this.textForm.marginDesc
      };
      // 3. 组装 config_three
      const config_three = {
        time: this.orderTimes.map(item => ({
          key: `${item.start}-${item.end}`,
          num: item.count
        }))
      };
      // 4. 组装 config_four
      const config_four = {
        time: this.timeForm.withdrawDays,
        order_time: this.timeForm.autoOrderMinutes,
        remove_time: this.timeForm.cancelOrderDays
      };
      // 5. 组装 config_five
      const config_five = {
        member: this.memberForm.member,
        memberRule: this.memberForm.memberRule,
        recharge: this.memberForm.recharge
      };
      // 6. 组装 config_six
      const config_six = {
        service: this.ratingForm.service,
        goods: this.ratingForm.goods
      };
      // 组装 config_seven
      const config_seven = {
        notice: this.noticeForm.notice.map(item => ({
          title: item.title || '',
          content: item.content || '',
          link: item.link || '',
          sort: parseInt(item.sort) || 0,
          status: parseInt(item.status) || 1,
          category: item.category || 'home'
        })).sort((a, b) => a.sort - b.sort)
      };
      try {
        if(e=='1'){
          await updateSiteConfig({ name: 'config_one',id:this.config_one.id, value: JSON.stringify(config_one) });
        }else if(e=='2'){
          await updateSiteConfig({ name: 'config_two',id:this.config_two.id, value: JSON.stringify(config_two) });
        }else if(e=='3'){
          await updateSiteConfig({ name: 'config_three',id:this.config_three.id, value: JSON.stringify(config_three) });
        }else if(e=='4'){
          await updateSiteConfig({ name: 'config_four',id:this.config_four.id, value: JSON.stringify(config_four) });
        }else if(e=='5'){
          await updateSiteConfig({ name: 'config_five',id:this.config_five.id, value: JSON.stringify(config_five) });
        }else if(e=='6'){
          if (!this.config_six || !this.config_six.id) {
            await addSiteConfig({ name: 'config_six', value: JSON.stringify(config_six), status: 1 });
          } else {
            await updateSiteConfig({ name: 'config_six', id: this.config_six.id, value: JSON.stringify(config_six) });
          }
        }else if(e=='notice'){
          console.log('保存通知公告配置');
          console.log('config_seven数据:', config_seven);
          console.log('当前config_seven配置:', this.config_seven);

          if (!this.config_seven || !this.config_seven.id) {
            console.log('新增通知公告配置');
            const response = await addSiteConfig({
              name: 'config_seven',
              value: JSON.stringify(config_seven),
              status: 1
            });
            console.log('新增响应:', response);
          } else {
            console.log('更新通知公告配置，ID:', this.config_seven.id);
            const response = await updateSiteConfig({
              name: 'config_seven',
              id: this.config_seven.id,
              value: JSON.stringify(config_seven)
            });
            console.log('更新响应:', response);
          }
        }else if(e=='activity'){
          const config_eight = {
            activities: this.activityForm.activities.map(item => ({
              title: item.title || '',
              content: item.content || '',
              link: item.link || '',
              imgUrl: item.imgUrl || '',
              status: parseInt(item.status) || 0,
              position: parseInt(item.position) || 0
            }))
          };
          if (!this.config_eight || !this.config_eight.id) {
            await addSiteConfig({ name: 'config_eight', value: JSON.stringify(config_eight), status: 1 });
          } else {
            await updateSiteConfig({ name: 'config_eight', id: this.config_eight.id, value: JSON.stringify(config_eight) });
          }
        }else if(e=='siteLinks'){
          const config_nine = { siteLinks: this.siteLinks };
          try {
            if (!this.config_nine || !this.config_nine.id) {
              await addSiteConfig({ name: 'config_nine', value: JSON.stringify(config_nine), status: 1 });
            } else {
              await updateSiteConfig({ name: 'config_nine', id: this.config_nine.id, value: JSON.stringify(config_nine) });
            }
            this.$message.success('站内地址已保存！');
            await this.getList();
          } catch (error) {
            this.$message.error('保存失败，请重试');
          }
        }else if(e=='serviceStandard'){
          const config_ten = {
            serviceStandard: this.serviceStandardForm.serviceStandard
          };
          try {
            if (!this.config_ten || !this.config_ten.id) {
              await addSiteConfig({ name: 'config_ten', value: JSON.stringify(config_ten), status: 1 });
            } else {
              await updateSiteConfig({ name: 'config_ten', id: this.config_ten.id, value: JSON.stringify(config_ten) });
            }
            this.$message.success('上门标准已保存！');
            await this.getList();
          } catch (error) {
            this.$message.error('保存失败，请重试');
          }
          return; // 单独保存时直接返回，不执行后面的通用保存逻辑
        }else if(e=='popup'){
          const config_eleven = {
            popups: this.popupForm.popups.map(item => ({
              link: item.link || '',
              imgUrl: item.imgUrl || '',
              status: parseInt(item.status) || 0,
              sort: parseInt(item.sort) || 0
            })).sort((a, b) => a.sort - b.sort)
          };

          try {
            if (!this.config_eleven || !this.config_eleven.id) {
              const response = await addSiteConfig({
                name: 'config_shiyi',
                value: JSON.stringify(config_eleven),
                status: 1
              });
              this.config_eleven = response.data;
            } else {
              await updateSiteConfig({
                name: 'config_shiyi',
                id: this.config_eleven.id,
                value: JSON.stringify(config_eleven)
              });
            }
            this.$message.success('首页弹窗已保存！');
            await this.getList();
          } catch (error) {
            console.error('保存弹窗失败:', error);
            this.$message.error('保存失败，请重试');
          }
          return; // 单独保存时直接返回，不执行后面的通用保存逻辑
        }

        // 如果没有指定具体的配置类型，则保存所有配置
        if (!e) {
          this.$message.success('保存成功！');
          await this.getList();
        }
      } catch (error) {
        console.error('保存失败:', error);
        console.error('错误详情:', error.response || error.message || error);

        let errorMessage = '保存失败，请重试';
        if (error.response && error.response.data && error.response.data.msg) {
          errorMessage = `保存失败：${error.response.data.msg}`;
        } else if (error.message) {
          errorMessage = `保存失败：${error.message}`;
        }

        this.$message.error(errorMessage);
      }
    },
    addNotice() {
      // 找到当前最大的排序值
      const maxSort = this.noticeForm.notice.length > 0
        ? Math.max(...this.noticeForm.notice.map(item => item.sort || 0))
        : -1;

      this.noticeForm.notice.push({
        title: '',
        content: '',
        link: '',
        sort: maxSort + 1,
        status: 1,
        category: 'home', // 默认为首页通知公告
        expanded: true // 新添加的公告默认展开以便编辑
      })
    },

    // 切换公告展开/收起状态
    toggleNoticeExpand(index) {
      this.$set(this.noticeForm.notice[index], 'expanded', !this.noticeForm.notice[index].expanded);
    },

    // 保存单个公告项
    async saveNoticeItem(index) {
      const item = this.noticeForm.notice[index];

      console.log('开始保存公告，索引:', index);
      console.log('保存的公告数据:', item);

      // 验证必填项
      if (!item.title || !item.title.trim()) {
        this.$message.error('请输入公告标题');
        return;
      }

      if (!item.content || !item.content.trim()) {
        this.$message.error('请输入公告内容');
        return;
      }

      // 验证分类
      if (!item.category) {
        this.$set(this.noticeForm.notice[index], 'category', 'home');
      }

      try {
        // 构造保存数据
        const config_seven = {
          notice: this.noticeForm.notice.map(noticeItem => ({
            title: noticeItem.title || '',
            content: noticeItem.content || '',
            link: noticeItem.link || '',
            sort: parseInt(noticeItem.sort) || 0,
            status: parseInt(noticeItem.status) || 1,
            category: noticeItem.category || 'home'
          })).sort((a, b) => a.sort - b.sort)
        };

        console.log('准备保存的配置数据:', config_seven);
        console.log('config_seven信息:', this.config_seven);

        let response;
        if (!this.config_seven || !this.config_seven.id) {
          console.log('新增配置数据');
          response = await addSiteConfig({
            name: 'config_seven',
            value: JSON.stringify(config_seven),
            status: 1
          });
          console.log('新增响应:', response);
        } else {
          console.log('更新配置数据，ID:', this.config_seven.id);
          response = await updateSiteConfig({
            name: 'config_seven',
            id: this.config_seven.id,
            value: JSON.stringify(config_seven)
          });
          console.log('更新响应:', response);
        }

        this.$message.success('公告保存成功！');

        // 重新获取数据
        await this.getList();

        // 保存成功后收起编辑区域
        this.$set(this.noticeForm.notice[index], 'expanded', false);

      } catch (error) {
        console.error('保存公告失败:', error);
        console.error('错误详情:', error.response || error.message || error);
        this.$message.error(`保存失败：${error.message || '请重试'}`);
      }
    },
    async removeNotice(index) {
      const item = this.noticeForm.notice[index];
      const title = item ? (item.title || '未设置标题') : '公告';

      try {
        await this.$confirm(`确定删除公告"${title}"吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        });

        // 删除公告
        this.noticeForm.notice.splice(index, 1);

        // 重新排序
        this.noticeForm.notice.forEach((item, idx) => {
          item.sort = idx;
        });

        // 保存到后端
        try {
          const config_seven = {
            notice: this.noticeForm.notice.map(item => ({
              title: item.title || '',
              content: item.content || '',
              link: item.link || '',
              sort: parseInt(item.sort) || 0,
              status: parseInt(item.status) || 1,
              category: item.category || 'home'
            })).sort((a, b) => a.sort - b.sort)
          };

          if (!this.config_seven || !this.config_seven.id) {
            await addSiteConfig({
              name: 'config_seven',
              value: JSON.stringify(config_seven),
              status: 1
            });
          } else {
            await updateSiteConfig({
              name: 'config_seven',
              id: this.config_seven.id,
              value: JSON.stringify(config_seven)
            });
          }

          this.$message.success('删除成功');
          await this.getList();
        } catch (error) {
          console.error('删除保存失败:', error);
          this.$message.error('删除失败，请重试');
          // 回滚删除操作
          this.getList();
        }
      } catch (error) {
        this.$message.info('已取消删除');
      }
    },
    resetNotice() {
      this.noticeForm.notice = []
    },

    // 获取分类名称
    getCategoryName(category) {
      const categoryMap = {
        'home': '首页通知公告',
        'activity': '活动通知公告'
      };
      return categoryMap[category] || '首页通知公告';
    },

    // 获取分类标签类型
    getCategoryTagType(category) {
      const typeMap = {
        'home': 'primary',
        'activity': 'warning'
      };
      return typeMap[category] || 'primary';
    },

    // 处理状态变化
    async handleStatusChange(index) {
      const item = this.noticeForm.notice[index];
      if (!item) return;

      const newStatus = item.status;
      const oldStatus = newStatus === 1 ? 0 : 1;
      const statusText = newStatus === 1 ? '上线' : '下线';
      const currentTitle = item.title || '未设置标题';

      // 添加确认对话框
      try {
        await this.$confirm(`确定要${statusText}公告"${currentTitle}"吗？`, '状态变更确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: newStatus === 1 ? 'success' : 'warning'
        });
      } catch (error) {
        // 用户取消了操作，回滚状态
        this.$set(this.noticeForm.notice[index], 'status', oldStatus);
        return;
      }

      // 用户确认，保存到后端
      try {
        const config_seven = {
          notice: this.noticeForm.notice.map(item => ({
            title: item.title,
            content: item.content,
            link: item.link,
            sort: item.sort,
            status: item.status,
            category: item.category || 'home'
          })).sort((a, b) => a.sort - b.sort)
        };

        if (!this.config_seven || !this.config_seven.id) {
          await addSiteConfig({ name: 'config_seven', value: JSON.stringify(config_seven), status: 1 });
        } else {
          await updateSiteConfig({ name: 'config_seven', id: this.config_seven.id, value: JSON.stringify(config_seven) });
        }

        this.$message.success(`公告${statusText}成功！`);

        // 重新获取数据以确保同步
        this.getList();
      } catch (error) {
        console.error('状态更新失败:', error);
        // 保存失败，回滚状态
        this.$set(this.noticeForm.notice[index], 'status', oldStatus);
        this.$message.error('状态更新失败，请重试');
      }
    },
    handleCategoryChange(val, item, index) {
      // 强制响应式，防止item.category不是响应式
      this.$set(this.noticeForm.notice[index], 'category', val)
    },
    addActivity() {
      // 找到当前最大的显示位置值
      const maxPosition = this.activityForm.activities.length > 0
        ? Math.max(...this.activityForm.activities.map(item => item.position || 0))
        : -1;

      this.activityForm.activities.push({
        title: '',
        content: '',
        link: '',
        imgUrl: '',
        status: 1,
        position: maxPosition + 1, // 新活动的显示位置自动设为最大值+1
        expanded: false // 新添加的活动默认不展开
      });
    },
    removeActivity(index) {
      this.activityForm.activities.splice(index, 1);
    },
    resetActivity() {
      this.activityForm.activities = [];
    },
    beforeActivityImgUpload(file, index) {
      console.log('准备上传图片:', file.name, file.type, file.size);

      // 检查文件类型
      const isImg = file.type.startsWith('image/');
      if (!isImg) {
        this.$message.error('只能上传图片格式');
        return false;
      }

      // 检查文件大小（限制10MB）
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('图片大小不能超过10MB');
        return false;
      }

      console.log('图片检查通过，开始上传...');
      this.$message.info('图片上传中...');

      return true;
    },
    handleActivityImgSuccess(res, file, index) {
      console.log('图片上传成功回调:', res, file, index);
      console.log('完整响应数据:', JSON.stringify(res, null, 2));

      // 处理上传成功的响应
      let url = '';
      if (res && res.code === 200) {
        // 标准的RuoYi响应格式
        if (res.url) {
          url = res.url;
        } else if (res.fileName) {
          url = res.fileName;
        } else if (res.data && res.data.url) {
          url = res.data.url;
        } else if (res.data && res.data.fileName) {
          url = res.data.fileName;
        }
      } else if (res) {
        // 兼容其他格式
        if (typeof res === 'string') {
          url = res;
        } else if (res.url) {
          url = res.url;
        } else if (res.fileName) {
          url = res.fileName;
        } else if (res.data) {
          if (typeof res.data === 'string') {
            url = res.data;
          } else if (res.data.url) {
            url = res.data.url;
          } else if (res.data.fileName) {
            url = res.data.fileName;
          }
        }
      }

      console.log('解析出的图片URL:', url);

      // 如果是相对路径，自动拼接完整URL
      if (url && !/^https?:\/\//.test(url)) {
        // 使用VUE_APP_BASE_API或当前域名
        const base = process.env.VUE_APP_BASE_API || window.location.origin;
        url = base.replace(/\/$/, '') + (url.startsWith('/') ? url : '/' + url);
      }

      console.log('最终处理后的图片URL:', url);

      if (url) {
        // 确保索引有效
        if (this.activityForm.activities[index]) {
          this.$set(this.activityForm.activities[index], 'imgUrl', url);
          this.$message.success('图片上传成功');
          console.log('图片URL已设置到活动数据:', this.activityForm.activities[index]);

          // 强制刷新上传组件
          this.$forceUpdate();
        } else {
          console.error('活动索引无效:', index);
          this.$message.error('活动索引无效');
        }
      } else {
        console.error('无法从响应中获取图片URL');
        console.error('响应数据结构:', res);
        this.$message.error('图片上传失败：无法获取图片地址');
      }
    },
    handleActivityImgError(err, file, index) {
      console.error('图片上传失败:', err, file, index);
      console.error('错误详情:', JSON.stringify(err, null, 2));

      let errorMessage = '图片上传失败';
      if (err.message) {
        errorMessage += '：' + err.message;
      } else if (err.response && err.response.data && err.response.data.msg) {
        errorMessage += '：' + err.response.data.msg;
      } else if (err.response && err.response.statusText) {
        errorMessage += '：' + err.response.statusText;
      } else {
        errorMessage += '：网络错误';
      }

      this.$message.error(errorMessage);
    },
    // 删除图片
    removeActivityImg(index) {
      this.$confirm('确定要删除这张图片吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$set(this.activityForm.activities[index], 'imgUrl', '');
        this.$message.success('图片删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    toggleActivityExpand(index) {
      this.$set(this.activityForm.activities[index], 'expanded', !this.activityForm.activities[index].expanded);
    },
    async saveActivityItem(index) {
      const item = this.activityForm.activities[index];

      // 验证必填项
      if (!item.title || !item.title.trim()) {
        this.$message.error('请输入活动标题');
        return;
      }

      try {
        // 构造保存数据
        const config_eight = {
          activities: this.activityForm.activities.map(activityItem => ({
            title: activityItem.title || '',
            content: activityItem.content || '',
            link: activityItem.link || '',
            imgUrl: activityItem.imgUrl || '',
            status: parseInt(activityItem.status) || 0,
            position: parseInt(activityItem.position) || 0
          }))
        };

        if (!this.config_eight || !this.config_eight.id) {
          await addSiteConfig({
            name: 'config_eight',
            value: JSON.stringify(config_eight),
            status: 1
          });
        } else {
          await updateSiteConfig({
            name: 'config_eight',
            id: this.config_eight.id,
            value: JSON.stringify(config_eight)
          });
        }

        this.$message.success('活动保存成功！');

        // 重新获取数据
        await this.getList();

        // 保存成功后收起编辑区域
        this.$set(this.activityForm.activities[index], 'expanded', false);

      } catch (error) {
        console.error('保存活动失败:', error);
        this.$message.error(`保存失败：${error.message || '请重试'}`);
      }
    },
    async handleActivityStatusChange(index) {
      const item = this.activityForm.activities[index];
      if (!item) return;

      const newStatus = item.status;
      const oldStatus = newStatus === 1 ? 0 : 1;
      const statusText = newStatus === 1 ? '上线' : '下线';
      const currentTitle = item.title || '未设置标题';

      // 添加确认对话框
      try {
        await this.$confirm(`确定要${statusText}活动"${currentTitle}"吗？`, '状态变更确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: newStatus === 1 ? 'success' : 'warning'
        });
      } catch (error) {
        // 用户取消了操作，回滚状态
        this.$set(this.activityForm.activities[index], 'status', oldStatus);
        return;
      }

      // 用户确认，保存到后端
      try {
        const config_eight = {
          activities: this.activityForm.activities.map(item => ({
            title: item.title || '',
            content: item.content || '',
            link: item.link || '',
            imgUrl: item.imgUrl || '',
            status: parseInt(item.status) || 0,
            position: parseInt(item.position) || 0
          }))
        };

        if (!this.config_eight || !this.config_eight.id) {
          await addSiteConfig({ name: 'config_eight', value: JSON.stringify(config_eight), status: 1 });
        } else {
          await updateSiteConfig({ name: 'config_eight', id: this.config_eight.id, value: JSON.stringify(config_eight) });
        }

        this.$message.success(`活动${statusText}成功！`);

        // 重新获取数据以确保同步
        this.getList();
      } catch (error) {
        console.error('状态更新失败:', error);
        // 保存失败，回滚状态
        this.$set(this.activityForm.activities[index], 'status', oldStatus);
        this.$message.error('状态更新失败，请重试');
      }
    },

    async removeActivity(index) {
      const item = this.activityForm.activities[index];
      const title = item ? (item.title || '未设置标题') : '活动';

      try {
        await this.$confirm(`确定删除活动"${title}"吗？`, '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        // 删除活动
        this.activityForm.activities.splice(index, 1);

        // 保存到后端
        try {
          const config_eight = {
            activities: this.activityForm.activities.map(item => ({
              title: item.title || '',
              content: item.content || '',
              link: item.link || '',
              imgUrl: item.imgUrl || '',
              status: parseInt(item.status) || 0,
              position: parseInt(item.position) || 0
            }))
          };

          if (!this.config_eight || !this.config_eight.id) {
            await addSiteConfig({
              name: 'config_eight',
              value: JSON.stringify(config_eight),
              status: 1
            });
          } else {
            await updateSiteConfig({
              name: 'config_eight',
              id: this.config_eight.id,
              value: JSON.stringify(config_eight)
            });
          }

          this.$message.success('删除成功');
          await this.getList();
        } catch (error) {
          console.error('删除保存失败:', error);
          this.$message.error('删除失败，请重试');
          // 回滚删除操作
          this.getList();
        }
      } catch (error) {
        this.$message.info('已取消删除');
      }
    },
    addSiteLink() {
      this.siteLinks.push({ name: '', url: '', remark: '', params: '' });
    },
    removeSiteLink(idx) {
      this.siteLinks.splice(idx, 1);
    },
    async saveSiteLinks() {
      const config_nine = { siteLinks: this.siteLinks };
      try {
        if (!this.config_nine || !this.config_nine.id) {
          await addSiteConfig({ name: 'config_nine', value: JSON.stringify(config_nine), status: 1 });
        } else {
          await updateSiteConfig({ name: 'config_nine', id: this.config_nine.id, value: JSON.stringify(config_nine) });
        }
        this.$message.success('站内地址已保存！');
        await this.getList();
      } catch (error) {
        this.$message.error('保存失败，请重试');
      }
    },

    // 首页弹窗相关方法
    addPopup() {
      // 找到当前最大的排序值
      const maxSort = this.popupForm.popups.length > 0
        ? Math.max(...this.popupForm.popups.map(item => item.sort || 0))
        : -1;

      const newPopup = {
        link: '',
        imgUrl: '',
        sort: maxSort + 1,
        status: 1,
        expanded: true // 新添加的弹窗默认展开以便编辑
      };

      this.popupForm.popups.push(newPopup);

      this.$message.success('弹窗添加成功！');
    },

    // 切换弹窗展开/收起状态
    togglePopupExpand(index) {
      this.$set(this.popupForm.popups[index], 'expanded', !this.popupForm.popups[index].expanded);
    },

    // 保存单个弹窗项
    async savePopupItem(index) {
      const item = this.popupForm.popups[index];

      try {
        // 构造保存数据
        const config_eleven = {
          popups: this.popupForm.popups.map(popupItem => ({
            link: popupItem.link || '',
            imgUrl: popupItem.imgUrl || '',
            status: parseInt(popupItem.status) || 0,
            sort: parseInt(popupItem.sort) || 0
          })).sort((a, b) => a.sort - b.sort)
        };

        if (!this.config_eleven || !this.config_eleven.id) {
          const response = await addSiteConfig({
            name: 'config_shiyi',
            value: JSON.stringify(config_eleven),
            status: 1
          });
          // 更新config_eleven的id
          this.config_eleven = response.data;
        } else {
          await updateSiteConfig({
            name: 'config_shiyi',
            id: this.config_eleven.id,
            value: JSON.stringify(config_eleven)
          });
        }

        this.$message.success('弹窗保存成功！');

        // 重新获取数据
        await this.getList();

        // 保存成功后收起编辑区域
        this.$set(this.popupForm.popups[index], 'expanded', false);

      } catch (error) {
        console.error('保存弹窗失败:', error);
        this.$message.error(`保存失败：${error.message || '请重试'}`);
      }
    },

    // 删除弹窗
    async removePopup(index) {
      const item = this.popupForm.popups[index];

      try {
        await this.$confirm(`确定删除弹窗吗？`, '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        // 删除弹窗
        this.popupForm.popups.splice(index, 1);

        // 重新排序
        this.popupForm.popups.forEach((item, idx) => {
          item.sort = idx;
        });

        // 保存到后端
        try {
          const config_eleven = {
            popups: this.popupForm.popups.map(item => ({
              link: item.link || '',
              imgUrl: item.imgUrl || '',
              status: parseInt(item.status) || 0,
              sort: parseInt(item.sort) || 0
            })).sort((a, b) => a.sort - b.sort)
          };

          if (!this.config_eleven || !this.config_eleven.id) {
            if (this.popupForm.popups.length > 0) {
              // 如果还有弹窗，创建新配置
              const response = await addSiteConfig({
                name: 'config_shiyi',
                value: JSON.stringify(config_eleven),
                status: 1
              });
              this.config_eleven = response.data;
            }
          } else {
            await updateSiteConfig({
              name: 'config_shiyi',
              id: this.config_eleven.id,
              value: JSON.stringify(config_eleven)
            });
          }

          this.$message.success('删除成功');
          await this.getList();
        } catch (error) {
          console.error('删除保存失败:', error);
          this.$message.error('删除失败，请重试');
          // 回滚删除操作
          this.getList();
        }
      } catch (error) {
        this.$message.info('已取消删除');
      }
    },

    // 重置弹窗
    resetPopup() {
      this.popupForm.popups = [];
    },

    // 处理弹窗状态变化
    async handlePopupStatusChange(index) {
      const item = this.popupForm.popups[index];
      if (!item) return;

      const newStatus = item.status;
      const oldStatus = newStatus === 1 ? 0 : 1;
      const statusText = newStatus === 1 ? '上线' : '下线';

      // 添加确认对话框
      try {
        await this.$confirm(`确定要${statusText}弹窗吗？`, '状态变更确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: newStatus === 1 ? 'success' : 'warning'
        });
      } catch (error) {
        // 用户取消了操作，回滚状态
        this.$set(this.popupForm.popups[index], 'status', oldStatus);
        return;
      }

      // 用户确认，保存到后端
      try {
        const config_eleven = {
          popups: this.popupForm.popups.map(item => ({
            link: item.link || '',
            imgUrl: item.imgUrl || '',
            status: parseInt(item.status) || 0,
            sort: parseInt(item.sort) || 0
          }))
        };

        if (!this.config_eleven || !this.config_eleven.id) {
          const response = await addSiteConfig({
            name: 'config_shiyi',
            value: JSON.stringify(config_eleven),
            status: 1
          });
          this.config_eleven = response.data;
        } else {
          await updateSiteConfig({
            name: 'config_shiyi',
            id: this.config_eleven.id,
            value: JSON.stringify(config_eleven)
          });
        }

        this.$message.success(`弹窗${statusText}成功！`);

        // 重新获取数据以确保同步
        this.getList();
      } catch (error) {
        console.error('状态更新失败:', error);
        // 保存失败，回滚状态
        this.$set(this.popupForm.popups[index], 'status', oldStatus);
        this.$message.error('状态更新失败，请重试');
      }
    },

    // 弹窗图片上传前检查
    beforePopupImgUpload(file, index) {
      console.log('准备上传弹窗图片:', file.name, file.type, file.size);

      // 检查文件类型
      const isImg = file.type.startsWith('image/');
      if (!isImg) {
        this.$message.error('只能上传图片格式');
        return false;
      }

      // 检查文件大小（限制10MB）
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('图片大小不能超过10MB');
        return false;
      }

      console.log('弹窗图片检查通过，开始上传...');
      this.$message.info('图片上传中...');

      return true;
    },

    // 弹窗图片上传成功
    handlePopupImgSuccess(res, file, index) {
      console.log('弹窗图片上传成功回调:', res, file, index);
      console.log('完整响应数据:', JSON.stringify(res, null, 2));

      // 处理上传成功的响应
      let url = '';
      if (res && res.code === 200) {
        // 标准的RuoYi响应格式
        if (res.url) {
          url = res.url;
        } else if (res.fileName) {
          url = res.fileName;
        } else if (res.data && res.data.url) {
          url = res.data.url;
        } else if (res.data && res.data.fileName) {
          url = res.data.fileName;
        }
      } else if (res) {
        // 兼容其他格式
        if (typeof res === 'string') {
          url = res;
        } else if (res.url) {
          url = res.url;
        } else if (res.fileName) {
          url = res.fileName;
        } else if (res.data) {
          if (typeof res.data === 'string') {
            url = res.data;
          } else if (res.data.url) {
            url = res.data.url;
          } else if (res.data.fileName) {
            url = res.data.fileName;
          }
        }
      }

      console.log('解析出的弹窗图片URL:', url);

      // 如果是相对路径，自动拼接完整URL
      if (url && !/^https?:\/\//.test(url)) {
        // 使用VUE_APP_BASE_API或当前域名
        const base = process.env.VUE_APP_BASE_API || window.location.origin;
        url = base.replace(/\/$/, '') + (url.startsWith('/') ? url : '/' + url);
      }

      console.log('最终处理后的弹窗图片URL:', url);

      if (url) {
        // 确保索引有效
        if (this.popupForm.popups[index]) {
          this.$set(this.popupForm.popups[index], 'imgUrl', url);
          this.$message.success('弹窗图片上传成功');
          console.log('弹窗图片URL已设置到弹窗数据:', this.popupForm.popups[index]);

          // 强制刷新上传组件
          this.$forceUpdate();
        } else {
          console.error('弹窗索引无效:', index);
          this.$message.error('弹窗索引无效');
        }
      } else {
        console.error('无法从响应中获取弹窗图片URL');
        console.error('响应数据结构:', res);
        this.$message.error('弹窗图片上传失败：无法获取图片地址');
      }
    },

    // 弹窗图片上传失败
    handlePopupImgError(err, file, index) {
      console.error('弹窗图片上传失败:', err, file, index);
      console.error('错误详情:', JSON.stringify(err, null, 2));

      let errorMessage = '弹窗图片上传失败';
      if (err.message) {
        errorMessage += '：' + err.message;
      } else if (err.response && err.response.data && err.response.data.msg) {
        errorMessage += '：' + err.response.data.msg;
      } else if (err.response && err.response.statusText) {
        errorMessage += '：' + err.response.statusText;
      } else {
        errorMessage += '：网络错误';
      }

      this.$message.error(errorMessage);
    },

    // 删除弹窗图片
    removePopupImg(index) {
      this.$confirm('确定要删除这张弹窗图片吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$set(this.popupForm.popups[index], 'imgUrl', '');
        this.$message.success('弹窗图片删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>

<style scoped>
.sysseting-container {
  background: #fff;
  padding: 24px;
  min-height: 600px;
}
.tab-form {
  max-width: 900px;
}
.qr-img {
  width: 120px;
  height: 120px;
  border: 1px solid #eee;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
}

/* 通知公告容器样式 */
.notice-container {
  background: #f8f9fa;
  min-height: 600px;
  padding: 0;
}

/* 页面头部样式 */
.notice-header {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-title h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.notice-desc {
  margin: 0;
  color: #909399;
  font-size: 14px;
  line-height: 1.5;
}

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

.notice-filter {
  display: flex;
  align-items: center;
}

/* 空状态样式 */
.notice-empty {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 公告列表样式 */
.notice-list {
  margin-bottom: 20px;
}

.notice-item {
  margin-bottom: 20px;
}

/* 公告卡片样式 */
.notice-card {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  overflow: hidden;
}

.notice-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.notice-card.notice-offline {
  background: #fafafa;
  border-color: #f0f0f0;
}

.notice-card.notice-offline:hover {
  border-color: #d9d9d9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.notice-card.notice-expanded {
  border-color: #409EFF;
}

/* 简洁行显示样式 */
.notice-simple-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-height: 60px;
}

.notice-simple-row:hover {
  background-color: #f8f9fa;
}

.notice-simple-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.notice-simple-info {
  margin-left: 12px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice-simple-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-category-tag-left {
  margin-left: 12px;
  margin-right: 8px;
  flex-shrink: 0;
  align-self: flex-start;
}

.notice-simple-meta {
  display: block;
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

.notice-simple-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notice-expand-icon {
  font-size: 14px;
  color: #909399;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.notice-card.notice-expanded .notice-expand-icon {
  transform: rotate(180deg);
}

/* 序号样式 */
.notice-index {
  background: #409EFF;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* 卡片内容样式 */
.notice-card-content {
  padding: 0 20px 20px 20px;
  background: #fafbfc;
}

/* 编辑区域底部操作按钮 */
.notice-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.notice-form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notice-form-row.full-width {
  width: 100%;
}

.notice-form-row.two-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.notice-title-item .el-form-item__content {
  width: 100%;
}

.notice-content-item .el-form-item__content {
  width: 100%;
}

.notice-link-item .el-form-item__content {
  width: 100%;
}

.notice-sort-item .el-form-item__content {
  width: 100%;
}

/* 富文本编辑器样式 */
.notice-editor {
  border-radius: 8px;
  overflow: hidden;
}

.notice-editor .ql-toolbar {
  border-top: 1px solid #e4e7ed;
  border-left: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed;
  background: #fafbfc;
}

.notice-editor .ql-container {
  border-bottom: 1px solid #e4e7ed;
  border-left: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed;
  min-height: 200px;
  font-size: 14px;
}

.notice-editor .ql-editor {
  padding: 16px;
  line-height: 1.6;
}

/* 底部操作区样式 */
.notice-footer {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.notice-footer-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.notice-footer-tips {
  margin-top: 16px;
}

.notice-footer-tips .el-alert {
  border-radius: 8px;
}

.notice-footer-tips .el-alert__description p {
  margin: 4px 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
}

/* 活动专区维护容器样式 */
.activity-zone-container { background: #f8f9fa; min-height: 400px; padding: 0; }
.activity-header { background: #fff; padding: 24px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 12px; }
.activity-card { margin-bottom: 20px; }
.activity-img { width: 120px; height: 120px; border: 1px solid #eee; display: block; }
.activity-uploader-icon { font-size: 32px; color: #8c939d; }
.activity-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* 响应式设计 */
@media (max-width: 768px) {
  .notice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .notice-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .notice-filter {
    order: -1;
    width: 100%;
    margin-bottom: 8px;
  }

  .notice-simple-row {
    padding: 12px 16px;
    min-height: 50px;
  }

  .notice-simple-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .notice-simple-info {
    margin-left: 0;
    margin-top: 0;
  }

  .notice-category-tag-left {
    margin-left: 0;
    margin-right: 0;
    margin-top: 4px;
  }

  .notice-simple-title {
    font-size: 13px;
  }

  .notice-simple-right {
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
  }

  .notice-card-content {
    padding: 0 16px 16px 16px;
  }

  .notice-form-row.two-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .notice-edit-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .notice-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.activity-simple-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-height: 60px;
}
.activity-simple-row:hover {
  background-color: #f8f9fa;
}
.activity-simple-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.activity-simple-info {
  margin-left: 12px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.activity-simple-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-simple-content {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  margin-left: 16px;
  border: 1px solid #eee;
}
.activity-simple-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.activity-expand-icon {
  font-size: 14px;
  color: #909399;
  transition: transform 0.3s ease;
  margin-left: 8px;
}
.activity-card.activity-expanded .activity-expand-icon {
  transform: rotate(180deg);
}
.activity-index {
  background: #409EFF;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.activity-card-content {
  padding: 0 20px 20px 20px;
  background: #fafbfc;
}
.activity-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
.activity-img-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 10;
  padding: 0;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activity-simple-link {
  font-size: 11px;
  color: #409EFF;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.activity-simple-position {
  font-size: 11px;
  color: #67C23A;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* 首页弹窗维护容器样式 */
.popup-container {
  background: #f8f9fa;
  min-height: 400px;
  padding: 0;
}

.popup-header {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
}

.popup-empty {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.popup-item {
  margin-bottom: 20px;
}

.popup-card {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  overflow: hidden;
}

.popup-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.popup-card.popup-offline {
  background: #fafafa;
  border-color: #f0f0f0;
}

.popup-card.popup-offline:hover {
  border-color: #d9d9d9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.popup-card.popup-expanded {
  border-color: #409EFF;
}

.popup-simple-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-height: 60px;
}

.popup-simple-row:hover {
  background-color: #f8f9fa;
}

.popup-simple-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.popup-simple-info {
  margin-left: 12px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popup-simple-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-simple-link {
  font-size: 11px;
  color: #409EFF;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.popup-simple-position {
  font-size: 11px;
  color: #67C23A;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.popup-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  margin-left: 16px;
  border: 1px solid #eee;
}

.popup-simple-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.popup-expand-icon {
  font-size: 14px;
  color: #909399;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.popup-card.popup-expanded .popup-expand-icon {
  transform: rotate(180deg);
}

.popup-index {
  background: #409EFF;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.popup-card-content {
  padding: 0 20px 20px 20px;
  background: #fafbfc;
}

.popup-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.popup-img {
  width: 120px;
  height: 120px;
  border: 1px solid #eee;
  display: block;
  object-fit: cover;
}

.popup-uploader-icon {
  font-size: 32px;
  color: #8c939d;
}

.popup-img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-img-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 10;
  padding: 0;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
