<template>
  <!-- <uni-nav-bar
		left-icon="left" 
		title="诊疗指南" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="180rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar> -->
  <navBar title="诊疗指南" />
  <view class="zhinan-page" v-if="tab == 'zhinan'">
    <!-- 导航栏 -->

    <!-- 固定搜索栏 -->
    <view class="search-container-fixed filter-bar">
      <view class="search-box" @click="goSearch">
        <uni-icons type="search" size="22" color="#999"></uni-icons>
        <text class="search-text">搜索</text>
      </view>

      <view class="divider"></view>
      <view class="filter-item" @click="showFilterPopup">
        <text :class="{ active: keywords }">筛选</text>
        <up-image
          :src="keywords ? filterOn : filter"
          width="36rpx"
          height="36rpx"
        ></up-image>
      </view>
    </view>

    <!-- 指南分类网格 -->
    <view class="guidelines-grid">
      <view
        class="guideline-item"
        v-for="(item, index) in guidelineCategories"
        :key="index"
        @click="enterCategory(item)"
      >
        <view class="item-image">
          <up-image
            :src="docUrl + item.imgs"
            mode="widthFix"
            width="100%"
            height="320rpx"
            class="category-icon"
            :loadingIcon="lazyImg"
            :errorIcon="lazyImg"
            :lazy-load="true"
          >
            <template #error>
              <image
                :src="lazyImg"
                class="category-icon"
                mode="widthFix"
              ></image>
            </template>
            <template v-slot:loading>
              <image
                :src="lazyImg"
                class="category-icon"
                mode="widthFix"
              ></image>
            </template>
          </up-image>
        </view>
        <view class="item-content">
          <text class="category-title">{{ item.name }}</text>
          <text class="category-count">(共{{ item.total }}份)</text>
        </view>
      </view>
    </view>
    <view class="total">
      <up-image :src="star1" width="85rpx" height="9rpx"></up-image>
      <view class="count"> {{ total }}份文献</view>
      <up-image :src="star2" width="85rpx" height="9rpx"></up-image>
    </view>
  </view>
  <view class="qikan-page" v-else-if="tab == 'qikan'">
    <!-- 导航头部 -->

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 标签切换区域 -->
      <view class="tab-section">
        <view class="tab-container">
          <view
            class="tab-item"
            :class="{ active: activeTab === 'daichawenxian' }"
            @click="switchTabQikan('daichawenxian')"
          >
            <text class="tab-text">代查文献</text>
            <view class="tab-underline">
              <up-image
                :src="activeImg"
                width="48rpx"
                height="18rpx"
                v-if="activeTab === 'daichawenxian'"
              ></up-image>
            </view>
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'yingwenwenxian' }"
            @click="switchTabQikan('yingwenwenxian')"
          >
            <text class="tab-text">英文文献</text>
            <view class="tab-underline">
              <up-image
                :src="activeImg"
                width="48rpx"
                height="18rpx"
                v-if="activeTab === 'yingwenwenxian'"
              ></up-image>
            </view>
          </view>
        </view>
      </view>

      <!-- 代查文献内容 -->
      <view class="content-section" v-if="activeTab === 'daichawenxian'">
        <!-- 顶部图标和说明 -->

        <up-image :src="paperImg" width="100%"></up-image>
        <!-- 表单区域 -->
        <view class="form-section">
          <!-- 接收邮箱 -->
          <view class="form-group formemail">
            <view class="form-label">
              <text>接收邮箱</text>
              <text class="required">*</text>
            </view>
            <view class="input-container">
              <input
                class="form-input"
                type="text"
                placeholder="请输入文献接收邮箱"
                v-model="formData.email"
              />
            </view>
          </view>
          <!-- 文献单元列表 -->
          <view
            class="from-cell literature-item"
            v-for="(literature, index) in literatureList"
            :key="literature.id"
          >
            <!-- 文献类型标签 -->
            <view class="form-group wenxian">
              <view class="tag-container">
                <view class="tag-item active">文献{{ index + 1 }}</view>
              </view>
            </view>

            <view class="formbox">
              <!-- 文献名称 -->
              <view class="form-group">
                <view class="form-label">
                  <text>文献名称</text>
                  <text class="required">*</text>
                </view>
                <view class="input-container">
                  <textarea
                    class="form-textarea"
                    type="text"
                    :adjust-position="false"
                    placeholder="不支持关键字/广泛查询"
                    v-model="literature.literatureName"
                  />
                </view>
              </view>

              <!-- 作者 -->
              <view class="form-group">
                <view class="form-label">
                  <text>作者</text>
                </view>
                <view class="input-container">
                  <input
                    class="form-input"
                    type="text"
                    placeholder="请输入作者姓名"
                    v-model="literature.author"
                  />
                </view>
              </view>

              <!-- 期刊名称 -->
              <view class="form-group">
                <view class="form-label">
                  <text>期刊名称</text>
                </view>
                <view class="input-container">
                  <input
                    class="form-input"
                    type="text"
                    placeholder="请输入期刊名称"
                    v-model="literature.journalName"
                  />
                </view>
              </view>
            </view>

            <!-- 删除按钮 -->
            <view
              class="delbox"
              v-if="literatureList.length > 1"
              @click="removeLiterature(index)"
            >
              <up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
            </view>

            <!-- 文献分隔线 -->
            <view
              class="literature-divider"
              v-if="index < literatureList.length - 1"
            ></view>
          </view>
          <!-- 添加代查文献按钮 -->
          <view class="add-literature-section" v-if="literatureList.length < 5">
            <view class="add-button" @click="addLiterature">
              <up-icon name="plus" size="18" color="#4A90E2"></up-icon>
              <text class="add-text">添加代查文献</text>
            </view>
            <view class="limit-tip">
              <view class="imgbox">
                <up-image
                  :src="countImg"
                  width="186rpx"
                  height="74rpx"
                ></up-image>
              </view>
              <view class="count"
                >还可添加{{ 5 - literatureList.length }}篇</view
              >
            </view>
          </view>
        </view>

        <!-- 常见问题 -->
        <view class="faq-section">
          <up-image
            :src="questionImg"
            width="100%"
            mode="widtFix"
            height="540rpx"
          ></up-image>
        </view>
        <view class="tips">
          <view class="title">注意</view>
          <view class="row">每次至多提交5篇文献代查</view>
          <view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
          <view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
        </view>
        <view class="btnbox">
          <up-image
            :src="submitImg"
            width="100%"
            height="160rpx"
            mode="widtFix"
          ></up-image>
        </view>
      </view>

      <!-- 英文文献内容（暂时显示占位内容） -->
      <view class="content-section" v-if="activeTab === 'yingwenwenxian'">
        <view class="placeholder-content">
          <uni-icons type="info" size="60" color="#999"></uni-icons>
          <text class="placeholder-text">英文文献功能正在开发中...</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 筛选弹窗 -->
  <view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
    <view class="filter-content" @click.stop>
      <!-- 筛选标签网格 -->
      <view class="filter-tags">
        <view
          class="tag-item"
          v-for="(tag, index) in filterTags"
          :key="index"
          :class="{ active: tag.selected }"
          @click="toggleTag(index)"
        >
          {{ tag.NAME }}
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="filter-buttons">
        <view class="btn-reset" @click="resetFilter">重置</view>
        <view class="btn-confirm" @click="confirmFilter">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow, onBackPress, onLoad } from "@dcloudio/uni-app";
import upImg from "@/static/cb_up.png";
import downImg from "@/static/cb_up.png";
import filter from "@/static/cb_screen_no.png";
import filterOn from "@/static/cb_screen_yes.png";
import star1 from "@/static/xingxing1.png";
import star2 from "@/static/xingxing2.png";
import paperImg from "@/static/paper_bg.png";
import activeImg from "@/static/route.png";
import emailImg from "@/static/email_bg.png";
import countImg from "@/static/sheng_bg.png";
import questionImg from "@/static/paper_question.png";
import submitImg from "@/static/paper_submit.png";
import delImg from "@/static/delete_paper.png";
import api from "@/api/api.js";
import docUrl from "@/utils/docUrl.js";
import navTo from "@/utils/navTo.js";
import navBar from "@/components/navBar/navBar.vue";
import lazyImg from "@/static/zhinanLazy.png";
import throttle from "@/utils/throttle.js";
const total = ref(0);
const tab = ref("zhinan");
// 响应式数据
const searchText = ref("");
const guidelineCategories = ref([]);
const isFilterActive = ref(false);
// 指南库检索结果（如需在列表页使用）
const searchLibraryList = ref([]);
const filterTags = ref([]);
const keywords = ref("");
onBackPress(() => {
  try {
    uni.sendNativeEvent(
      "goTabbarPage",
      {
        msg: "home",
      },
      (ret) => {
        console.log(ret);
      }
    );
  } catch (e) {
    console.log(e);
  }
  plus.runtime.quit();
  return true;
});
// 页面加载
onMounted(() => {});
const showFilter = ref(false);
// 筛选弹窗相关方法
const showFilterPopup = () => {
  showFilter.value = true;
};
const goSearch = () => {
  uni.sendNativeEvent(
    "goHomeSearch",
    {
      msg: "zhinan",
    },
    (ret) => {
      console.log(ret);
    }
  );
};
const hideFilterPopup = () => {
  showFilter.value = false;
};

const toggleTag = (index) => {
  const tag = filterTags.value[index];
  // 限制最多选择3个标签
  if (!tag.selected && filterTags.value.filter((t) => t.selected).length >= 3) {
    uni.showToast({
      title: "最多选择3个标签",
      icon: "none",
    });
    return;
  }
  tag.selected = !tag.selected;
  isFilterActive.value = filterTags.value.some((item) => item.selected);
};

const resetFilter = () => {
  // 清空所有已选标签
  filterTags.value.forEach((tag) => (tag.selected = false));
  // 关闭筛选激活态
  isFilterActive.value = false;
  // 清空关键字
  keywords.value = "";
  // 刷新列表数据（可按需保留或移除）
  // currentPage.value = 1;
  // hasMoreData.value = true;
  //loadVideoData(true);
};

const confirmFilter = throttle(() => {
  isFilterActive.value = true;
  hideFilterPopup();
  const selectedTags = filterTags.value.filter((tag) => tag.selected);
  let words = "";
  console.log("选中的筛选标签:", selectedTags);
  for (let i = 0; i < selectedTags.length; i++) {
    if (words) {
      words += "," + selectedTags[i].NAME;
    } else {
      words = selectedTags[i].NAME;
    }
  }
  keywords.value = words;
  if (!keywords.value) return;
  console.log(1111111);
  console.log("看看执行了几次");
  navTo({
    url: "/pages_app/hot/hot?keywords=" + encodeURIComponent(keywords.value),
  });

  // 根据选中的标签重新加载数据
}, 1000);
onLoad(() => {
  loadGuideTypes();
  loadSearchLibrary();
  loadGuideTags();
  uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "list_page",
        page_type: "诊疗指南",
      },
    },
    (ret) => {
      console.log(ret);
    });
});
onShow(() => {});

// 加载指南分类（guideType）
const loadGuideTypes = async () => {
  try {
    const res = await api.guideType({});
    guidelineCategories.value = res.data;
    for (var i = 0; i < res.data.length; i++) {
      total.value = total.value + res.data[i].total;
    }
  } catch (e) {
    console.error("加载指南分类失败:", e);
  }
};

// 调用治疗指南列表（searchLibraryU）
const loadSearchLibrary = async () => {
  try {
    const res = await api.searchLibraryU({
      page: 1,
      pageSize: 20,
      type: 1,
      keywords: "",
    });
    if (res && res.code === 200) {
      searchLibraryList.value = res.data;
    }
  } catch (e) {
    console.error("加载指南库失败:", e);
  }
};

// 加载指南标签列表
const loadGuideTags = async () => {
  try {
    const res = await api.guideTag({
      type: 3,
    });

    if (res && res.code === 200 && res.data) {
      // 将API返回的标签数据转换为筛选标签格式
      filterTags.value = res.data.map((tag) => ({
        ...tag,
        selected: false,
      }));
    }
  } catch (e) {
    console.error("加载指南标签失败:", e);
  }
};

// 进入指南分类
const enterCategory = (item) => {
  navTo({
    url: `/pages_app/zhinanList/zhinanList?typeUuid=${item.uuid}&title=${item.name}`,
  });
};

// 显示筛选对话框
const showFilterDialog = () => {
  console.log("显示筛选");
  // 可以实现筛选弹窗
};

// 切换底部标签
const switchTab = (tabName) => {
  console.log("切换到:", tabName);
  tab.value = tabName;
};

// 返回
const goBack = () => {
  uni.navigateBack({
    fail() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
  });
};
// 响应式数据
const activeTab = ref("daichawenxian");

// 表单数据
const formData = ref({
  email: "",
  literatureName: "",
  author: "",
  journalName: "",
});

// 文献列表数据
const literatureList = ref([
  {
    id: 1,
    literatureName: "",
    author: "",
    journalName: "",
  },
]);

// 常见问题数据
const faqList = ref([
  {
    question: "如何查找文献？",
    answer:
      "请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。",
    expanded: false,
  },
  {
    question: "查找需要多长时间？",
    answer: "通常在1-3个工作日内完成文献查找并发送到您的邮箱。",
    expanded: false,
  },
  {
    question: "支持哪些文献类型？",
    answer: "支持国内外期刊论文、会议论文、学位论文等多种文献类型。",
    expanded: false,
  },
]);

// 切换顶部标签
const switchTabQikan = (tab) => {
  activeTab.value = tab;
};

// 切换底部导航
const switchBottomTab = (tab) => {
  if (tab === "zhinan") {
    uni.navigateTo({
      url: "/pages_app/zhinan/zhinan",
    });
  } else if (tab === "tools") {
    uni.showToast({
      title: "功能开发中",
      icon: "none",
    });
  }
};

// 添加文献
const addLiterature = () => {
  if (literatureList.value.length >= 5) {
    uni.showToast({
      title: "最多只能添加5篇文献",
      icon: "none",
    });
    return;
  }

  const newLiterature = {
    id: Date.now(), // 使用时间戳作为唯一ID
    literatureName: "",
    author: "",
    journalName: "",
  };

  literatureList.value.push(newLiterature);

  uni.showToast({
    title: "添加成功",
    icon: "none",
  });
};

// 删除文献
const removeLiterature = (index) => {
  if (literatureList.value.length <= 1) {
    uni.showToast({
      title: "至少保留一篇文献",
      icon: "none",
    });
    return;
  }

  literatureList.value.splice(index, 1);

  uni.showToast({
    title: "删除成功",
    icon: "none",
  });
};

// 切换FAQ展开状态
const toggleFaq = (index) => {
  faqList.value[index].expanded = !faqList.value[index].expanded;
};
</script>

<style lang="scss" scoped>
// SCSS Variables
$primary-color: #8b2316;
$bg-color: #f5f5f5;
$white: #fff;
$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$primary-color: #ff6b6b;
$theme-color: #8b2316;
$white: #fff;
$gray-bg: #f5f5f5;
$gray-light: #eee;
$gray-medium: #999;
$gray-dark: #666;
$text-color: #333;
$nav-height: 140rpx;
$border-color: #e0e0e0;
// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;
$accent-color: #4a90e2;
.zhinan-page {
  background-color: $bg-color;
  min-height: 100vh;
  padding-top: 20rpx; // 导航栏高度
}

// 固定搜索容器
.search-container-fixed {
  position: fixed;
  top: calc(var(--status-bar-height) + 44px); // 导航栏高度
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 30rpx;
  background-color: $white;
  gap: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
// 筛选栏
.filter-bar {
  background-color: $white;
  display: flex;
  align-items: center;
  border-bottom: 1px solid $gray-light;

  .search-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    .search-text {
      font-size: 36rpx;
      color: $gray-medium;
    }
  }

  .divider {
    width: 1px;
    height: 16px;
    background-color: $gray-medium;
    margin: 0 $padding;
  }

  .filter-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 36rpx;
    color: #999;
    text {
      margin-top: -1rpx;
      &.active {
        color: #8b2316;
      }
    }
  }
}

// 指南网格
.guidelines-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;

  margin: 0 30rpx;
  margin-top: calc(
    var(--status-bar-height) + 44px + 106rpx
  ); // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)

  .guideline-item {
    margin-top: 20rpx;
    width: calc(33.333% - 14rpx);
    background-color: $white;
    margin-left: 20rpx;
    overflow: hidden;

    transition: transform 0.2s ease;
    &:nth-child(3n + 1) {
      margin-left: 0;
    }
    &:active {
      transform: scale(0.98);
    }

    .item-image {
      width: 100%;

      overflow: hidden; /* 防止溢出 */
    }

    .category-icon {
      width: 100%;
      height: 320rpx; /* 高度自适应 */
      display: block; /* 去除底部间隙 */
    }

    .item-content {
      padding: 20rpx 16rpx;
      text-align: center;

      .category-title {
        display: block;
        font-size: 26rpx;
        color: $text-primary;
        line-height: 1.4;
        margin-bottom: 8rpx;
      }

      .category-count {
        font-size: 22rpx;
        color: $text-light;
      }
    }
  }
}

// 底部导航
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: $white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100rpx;
    gap: 8rpx;
    &.active {
      color: #fff;
      background-color: #8b2316;
    }
    .tab-icon {
      width: 44rpx;
      height: 44rpx;
    }

    .tab-text {
      font-size: 32rpx;
      color: $text-secondary;
      &.active {
        color: #fff;
      }
    }
  }
  .tab-item:nth-child(2) {
    border-right: 2rpx solid #eee;
    border-left: 2rpx solid #eee;
  }
}

// 为网格添加底部边距，避免被tabbar遮挡
.guidelines-grid {
  padding-bottom: 0rpx;
  background-color: $white;
}
.total {
  margin-top: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 40rpx;
  .count {
    margin-top: 50rpx;
    font-size: 30rpx;
    color: #999;
  }
}

.qikan-page {
  background: #f6f6f6;
  min-height: 100vh;
  padding-top: 0rpx;
  padding-bottom: 100rpx; // 为底部导航预留空间
}

.main-content {
  flex: 1;
}

// 标签切换区域 - 固定在顶部
.tab-section {
  position: fixed;
  top: $nav-height; // 140rpx
  left: 0;
  right: 0;
  z-index: 80;
  background-color: #a5d9fe;
  padding: 0 30rpx;

  .tab-container {
    display: flex;
    align-items: center;
    height: 100rpx;

    .tab-item {
      position: relative;
      margin-right: 60rpx;
      padding: 20rpx 0;

      .tab-text {
        font-size: 32rpx;
        color: #333 !important;
        font-weight: 500;
      }

      &.active {
        .tab-text {
          color: $primary-color;
          font-weight: 600;
        }
      }

      .tab-underline {
        position: absolute;
        bottom: 15rpx;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        height: 18rpx;
      }
    }
  }
}

// 内容区域
.content-section {
  background-color: $bg-color;
  min-height: calc(100vh - 340rpx);
  margin-top: 100rpx; // 为固定的标签切换区域留出空间
}

// 头部横幅
.header-banner {
  background: linear-gradient(135deg, #87ceeb, #b0e0e6);
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;

  .banner-content {
    display: flex;
    align-items: center;

    .icon-container {
      position: relative;
      margin-right: 30rpx;

      .sparkle-icon {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        font-size: 24rpx;
      }
    }

    .banner-text {
      flex: 1;

      .main-title {
        font-size: 48rpx;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 10rpx;
      }

      .sub-title {
        font-size: 24rpx;
        color: $text-secondary;
        line-height: 1.4;
      }
    }
  }
}

// 表单区域
.form-section {
  margin: -156rpx 30rpx 20rpx;
  border-radius: 20rpx;
  padding: 0rpx 0rpx;
  .wenxian {
    margin-top: 40rpx;

    overflow: hidden;
  }
  .from-cell {
    position: relative;
    .delbox {
      top: 10rpx;
      right: 30rpx;
      position: absolute;
    }
  }
  .formbox {
    padding: 30rpx 30rpx 30rpx;
    background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0;
    background-size: 100% 148rpx;
    border-radius: 10rpx;
    position: relative;
    z-index: 8;
  }
  .formemail {
    padding: 0 30rpx;
    height: 148rpx;
    display: flex;
    align-items: center;
    border-radius: 20rpx;
    background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0 !important;
    background-size: cover !important;
  }

  // 文献分隔线
  .literature-divider {
    height: 20rpx;
    margin: 20rpx 0;
    background-color: #f0f0f0;
    border-radius: 10rpx;
  }

  .form-group {
    margin-bottom: 40rpx;
    display: flex;

    background-size: 100% 652rpx;
    overflow: hidden;
    &:last-child {
      margin-bottom: 0;
    }

    .form-label {
      display: flex;
      align-items: center;
      width: 160rpx;
      font-size: 28rpx;
      color: $text-primary;
      font-weight: 500;

      .required {
        color: #ff4757;
        margin-left: 8rpx;
      }
    }

    .input-container {
      flex: 1;
      .form-input,
      .form-textarea {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        background: #f6f6f6;
        border: 2rpx solid $border-color;
        border-radius: 12rpx;
        font-size: 28rpx;
        color: $text-primary;
        background-color: $white;
        box-sizing: border-box;
        &::placeholder {
          color: $text-light;
        }

        &:focus {
          border-color: $accent-color;
        }
      }
      .form-textarea {
        padding: 20rpx;
        height: 200rpx;
      }
    }

    .tag-container {
      .tag-item {
        display: inline-block;
        padding: 16rpx 32rpx;
        background-color: #008aff;
        color: $white;
        border-radius: 10rpx 10rpx 0 0;
        font-size: 24rpx;
        font-weight: 500;
      }
    }
  }
  .from-cell .form-group:nth-child(1) {
    margin-bottom: 0;
  }
  .formbox .form-group:nth-child(1) {
    margin-bottom: 40rpx;
  }
}

// 添加文献区域
.add-literature-section {
  position: relative;
  margin-top: 40rpx;
  padding-top: 40rpx;
  border-top: 2rpx solid $border-color;

  .add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    margin: 0 20rpx;
    border: 2rpx solid #0197f1;
    border-radius: 40rpx;
    background-color: rgba(74, 144, 226, 0.05);

    .add-text {
      margin-left: 10rpx;
      font-size: 28rpx;
      color: #0197f1;
      font-weight: 500;
    }
  }

  .limit-tip {
    position: absolute;
    right: 0;
    top: -10rpx;
    text-align: center;
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #fff;

    width: 186rpx;
    height: 74rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    .imgbox {
      top: 0;
      position: absolute;
    }
    .count {
      margin-top: -20rpx;
      position: relative;
      z-index: 3;
    }
  }
}

// 常见问题区域
.faq-section {
  margin: 0rpx 30rpx;
  background-color: $white;
  border-radius: 20rpx;
  padding: 1rpx 1rpx;
}
.tips {
  font-size: 24rpx;
  margin: 30rpx 30rpx;
  color: #999;
}
.btnbox {
  margin: 0 30rpx;
}
// 占位内容
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  .placeholder-text {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: $text-light;
  }
}
// 筛选弹窗样式
.filter-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;

  z-index: 9999;

  .filter-content {
    margin-top: calc(var(--status-bar-height) + 44px + 108rpx);
    overflow-y: scroll;
    background-color: $white;
    // border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx 30rpx 60rpx;
    width: 100%;
    max-height: 80vh;

    .filter-tags {
      display: flex;
      flex-wrap: wrap;

      margin-bottom: 60rpx;
      max-height: 65vh;
      overflow-y: auto;

      .tag-item {
        background-color: #f8f8f8;
        color: $gray-dark;
        padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
        border-radius: 30rpx;
        font-size: 26rpx;
        margin: 8rpx 5rpx;
        border: 2rpx solid #efefef;
        transition: all 0.3s ease;
        width: 152rpx; /* 固定宽度 */
        text-align: center; /* 文本居中 */

        &.active {
          background-color: #fff;
          color: $theme-color;
          border-color: $theme-color;
        }
      }
    }

    .filter-buttons {
      display: flex;
      gap: 20rpx;
      position: fixed;
      bottom: 30rpx;
      left: 30rpx;
      right: 30rpx;
      background-color: #fff; /* 背景色为白色 */

      .btn-reset,
      .btn-confirm {
        flex: 1;
        height: 70rpx;
        border-radius: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 500;
      }

      .btn-reset {
        background-color: $white;
        color: $theme-color;
        border: 2rpx solid $theme-color;
      }

      .btn-confirm {
        border: 2rpx solid $theme-color;
        background-color: $theme-color;
        color: $white;
      }
    }
  }
}
</style>
