<template>
  <div class="product-service-page" :class="{ 'single-product-page': isSinglePageMode }">
    <TopBox v-if="isSinglePageMode" class="single-page-topbox" />
 
    <!-- 产品分类导航 -->
    <div v-if="!isSinglePageMode" class="category-nav">
      <div v-for="category in panelData"
           :key="category.firTitle"
           class="nav-item" 
           :class="{ active: activeCategory === category.firTitle }"
           @click="switchCategory(category)">
        <span>{{ category.firTitle }}</span>
      </div>
    </div>

    <!-- 产品内容区域 -->
    <div class="product-content">
      <!-- 左侧菜单区域（只有有二级或三级菜单时才显示） -->
      <div v-if="hasMenuSidebar" class="menu-sidebar">

        <template v-if="isTokenMarketActive">
          <div class="input">
            <el-input
              v-model="searchKeyword"
              class="product-search"
              clearable
              prefix-icon="el-icon-search"
              placeholder="输入关键词 搜索模型"
            ></el-input>
          </div>
          <div class="token-filter-section">
            <h4>模型筛选</h4>
            <div class="token-filter-grid">
              <button
                v-for="item in tokenModelTypeList"
                :key="item"
                class="token-filter-item"
                :class="{ active: tokenActiveModelType === item }"
                @click="toggleTokenModelType(item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
          <div class="token-filter-section">
            <h4>提供方</h4>
            <div class="token-filter-grid">
              <button
                v-for="item in tokenProviderList"
                :key="item"
                class="token-filter-item"
                :class="{ active: tokenActiveProvider === item }"
                @click="toggleTokenProvider(item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
        </template>

        <template v-else>
          <div class="input">
          <el-input
        v-model="searchKeyword"
        class="product-search"
        clearable
        prefix-icon="el-icon-search"
        placeholder="搜索产品名称、类型或描述"
      ></el-input>
        </div>
        <!-- 二级菜单 -->
       
        <div v-if="hasSecondLevel" class="subcategory-section">
          <div class="subcategory-list">
            <div v-for="subItem in currentSubcategories"
                 :key="getSubItemKey(subItem)"
                 class="subcategory-item"
                 :class="{ active: activeSubId === getSubItemKey(subItem) }"
                 @click="switchSubcategory(subItem)">
              <span class="subcategory-name">{{ subItem.secTitle }}</span>
              <span v-if="getProductCount(subItem)" class="product-count">
                {{ getProductCount(subItem) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 三级菜单（如果有且不是算/网分类） -->
        <div v-if="hasThirdLevel && !isSpecialCategory" class="third-level-section">
          <div class="third-level-list">
            <div v-for="thirdItem in thirdLevelData"
                 :key="getThirdItemKey(thirdItem)"
                 class="third-level-item"
                 :class="{ active: activeThirdId === getThirdItemKey(thirdItem) }"
                 @click="switchThirdLevel(thirdItem)">
              {{ thirdItem.thrTitle }}
            </div>
          </div>
        </div>
        </template>
      </div>

      <!-- 主内容区 -->
      <div class="main-content" :class="{ 'full-width': !hasMenuSidebar }">
        <template v-if="isTokenMarketActive">
          <!-- <div class="token-market-toolbar">
            <span>排序:</span>
            <button class="token-sort-btn active">综合排序</button>
            <button class="token-sort-btn">体验</button>
          </div> -->
          <div class="token-market-grid">
            <div
              v-for="(product, index) in displayedTokenProducts"
              :key="product.id"
              class="token-market-card"
              @click="goModelDetail(product)"
            >
              <div class="token-card-top">
                <h3>{{ product.display_name || product.model_name }}</h3>
                <!-- <span v-if="product.sort_order <= 10" class="token-new-badge">NEW</span> -->
                <!-- <i class="el-icon-more token-more"></i> -->
              </div>
              <div class="token-tags">
                <span>{{ product.model_type || '-' }}</span>
                <span>{{ product.billing_method || '-' }}</span>
                <span>{{ product.provider || '-' }}</span>
                <span v-if="product.llmid">{{ product.llmid }}</span>
              </div>
              <div class="token-price-line">
                <span>输入 ¥{{ formatTokenPrice(product.input_token_price) }}/千Token</span>
                <span>输出 ¥{{ formatTokenPrice(product.output_token_price) }}/千Token</span>
              </div>
              <div class="token-meta">
                <span class="token-provider-avatar">{{ getProviderInitial(product.provider) }}</span>
                <span>{{ product.provider || '-' }}</span>
              </div>
              <div class="token-actions">
                <button @click.stop="goModelApiDocument(product)">
                  <i class="el-icon-document"></i>
                  API文档
                </button>
                <button v-if="index === 0" class="experience" @click.stop="goModelExperience(product)">
                  <i class="el-icon-video-play"></i>
                  体验
                </button>
              </div>
            </div>
          </div>
        </template>

        <!-- 产品网格 -->
        <div v-else class="product-grid">
          <div v-for="product in displayedProducts"
               :key="product.id"
               class="product-card"
               @click="handleProductClick(product)">
            <div class="product-header">
              <div class="product-icon">
                <i :class="getProductIcon(product)"></i>
              </div>
              <div class="product-title">
                <h3 class="product-name">{{ product.name }}</h3>
                <span class="product-type">{{ product.type }}</span>
              </div>
              <span v-if="product.discount" class="discount-badge">
                {{ product.discount }}折
              </span>
            </div>
            <div class="product-desc">
              {{ getProductDescription(product) }}
            </div>
            <div class="product-footer">
              <span class="product-status">稳定服务</span>
              <button class="detail-btn" @click.stop="handleProductClick(product)">
                查看详情
                <i class="el-icon-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="isTokenMarketActive ? !displayedTokenProducts.length : !hasDisplayProducts" class="empty-state">
          <div class="empty-icon">
            <i class="el-icon-box"></i>
          </div>
          <p class="empty-text">{{ searchKeyword ? '没有匹配的产品' : '暂无产品数据' }}</p>
          <span>可以切换分类或调整搜索关键词后再试。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
import TopBox from '@/views/homePage/components/topBox/index.vue'

export default {
  name: "ProductServicePage",
  components: {
    TopBox
  },
  data() {
    return {
      panelData: [],
      activeCategory: '',
      activeSubId: null,
      activeThirdId: null,
      searchKeyword: '',
      currentProducts: [],
      tokenList: [],
      tokenModelTypeList: [],
      tokenProviderList: [],
      tokenActiveModelType: '',
      tokenActiveProvider: ''
    };
  },
  computed: {
    isTokenMarketActive() {
      return this.isTokenMarketCategory(this.activeCategory);
    },
    isSinglePageMode() {
      return this.$route.path === '/tokenMarket' || this.$route.query.single === '1' || this.$route.query.single === 'true';
    },
    currentSubcategories() {
      if (!this.activeCategory || !this.panelData.length) return [];
      const category = this.panelData.find(item => item.firTitle === this.activeCategory);
      return category ? category.secMenu : [];
    },
    hasSecondLevel() {
      return this.currentSubcategories && this.currentSubcategories.length > 0;
    },
    hasThirdLevel() {
      return this.thirdLevelData && this.thirdLevelData.length > 0;
    },
    hasProducts() {
      return this.currentProducts && this.currentProducts.length > 0;
    },
    displayedProducts() {
      const keyword = this.searchKeyword.trim().toLowerCase();

      if (!keyword) {
        return this.currentProducts;
      }

      return this.currentProducts.filter(product => {
        const productText = [
          product.name,
          product.type,
          this.getProductDescription(product)
        ].join(' ').toLowerCase();

        return productText.includes(keyword);
      });
    },
    hasDisplayProducts() {
      return this.displayedProducts && this.displayedProducts.length > 0;
    },
    totalProductCount() {
      return this.panelData.reduce((total, category) => {
        return total + this.getAllProductsFromCategory(category).length;
      }, 0);
    },
    activeCategorySummary() {
      if (!this.activeCategory) {
        return '选择分类后查看对应产品能力';
      }

      const productCount = this.currentProducts.length;
      const subCount = this.currentSubcategories.length;
      return `当前分类包含 ${subCount} 个子类，${productCount} 个可选产品`;
    },
    hasMenuSidebar() {
      if (this.isTokenMarketActive) return true;
      return this.hasSecondLevel || this.hasThirdLevel;
    },
    isSpecialCategory() {
      return this.activeCategory === '算' || this.activeCategory === '网';
    },
    thirdLevelData() {
      if (!this.activeSubId || !this.currentSubcategories.length) return [];

      // 从activeSubId中提取真实的subItem id
      const realSubId = this.activeSubId.split('_')[0];
      const subItem = this.currentSubcategories.find(item =>
        item.id === realSubId || item.id?.toString() === realSubId
      );

      return subItem && subItem.thrMenu ? subItem.thrMenu : [];
    },
    // 检查是否登录
    loginState() {
      const userId = sessionStorage.getItem('userId');
      return userId !== null && userId !== 'null' && userId !== '';
    },
    displayedTokenProducts() {
      const keyword = this.searchKeyword.trim().toLowerCase();
      return this.tokenList.filter(item => {
        const matchKeyword = !keyword || [
          item.display_name,
          item.model_name,
          item.model_type,
          item.provider,
          item.description
        ].join(' ').toLowerCase().includes(keyword);
        const matchType = !this.tokenActiveModelType || item.model_type === this.tokenActiveModelType;
        const matchProvider = !this.tokenActiveProvider || item.provider === this.tokenActiveProvider;
        return matchKeyword && matchType && matchProvider;
      });
    }
  },
  async mounted() {
    await this.loadNavData();
    this.initializeDefaultData();
  },
  methods: {
    // 判断当前一级分类是否为 TOKEN 市集，后续用于切换独立渲染逻辑。
    isTokenMarketCategory(title) {
      return ['TOKEN市集', 'Token市集', 'token市集', 'Token Market'].includes(title);
    },

    // 从导航接口内嵌的 token_market 中取出模型列表和筛选项。
    setTokenMarketData(category) {
      const marketData = category && category.token_market && category.token_market.data
        ? category.token_market.data
        : {};
      this.tokenList = Array.isArray(marketData.model_list) ? marketData.model_list : [];
      this.tokenModelTypeList = Array.isArray(marketData.model_type_list) ? marketData.model_type_list : [];
      this.tokenProviderList = Array.isArray(marketData.provider_list) ? marketData.provider_list : [];
    },

    // 点击同一个模型类型时取消筛选，再点其他类型则切换筛选项。
    toggleTokenModelType(type) {
      this.tokenActiveModelType = this.tokenActiveModelType === type ? '' : type;
    },

    // 点击同一个供应商时取消筛选，再点其他供应商则切换筛选项。
    toggleTokenProvider(provider) {
      this.tokenActiveProvider = this.tokenActiveProvider === provider ? '' : provider;
    },

    // TOKEN 市集价格展示，去掉无意义的尾部 0。
    formatTokenPrice(value) {
      if (value === undefined || value === null || value === '') return '-';
      const num = Number(value);
      if (Number.isNaN(num)) return value;
      return num.toFixed(4).replace(/\.?0+$/, '');
    },

    // 供应商头像取首字，避免没有 logo 时卡片显得空。
    getProviderInitial(provider) {
      return provider ? provider.slice(0, 1) : 'M';
    },

    // TOKEN 市集卡片点击：进入模型详情页。
    goModelDetail(model) {
      this.cacheTokenMarketModel(model);
      this.$router.push({
        name: 'modelDetail',
        query: {
          id: model.id,
          model_id: model.id,
          llmid: model.llmid || model.model_name || model.id,
          from: 'tokenMarket',
          category: 'TOKEN市集',
          single: this.isSinglePageMode ? '1' : undefined
        }
      });
    },

    // TOKEN 市集 API 文档按钮：进入模型 API 文档页。
    goModelApiDocument(model) {
      this.cacheTokenMarketModel(model);
      this.$router.push({
        name: 'modelApiDocument',
        query: {
          id: model.id,
          model_id: model.id,
          from: 'tokenMarket',
          category: 'TOKEN市集',
          single: this.isSinglePageMode ? '1' : undefined
        }
      });
    },

    // TOKEN 市集体验按钮：进入模型体验页。
    goModelExperience(model) {
      if (!this.loginState) {
        this.$message.warning('请先登录再进行体验哦')
        return;
      }
      this.cacheTokenMarketModel(model);
      this.$router.push({
        name: 'modelExperience',
        query: {
          id: model.id,
          model_id: model.id,
          from: 'tokenMarket',
          category: 'TOKEN市集'
        }
      });
    },

    // 详情页需要完整模型字段，这里点击时缓存当前卡片数据，避免只带 id 过去后页面无法渲染。
    cacheTokenMarketModel(model) {
      if (!model) return;
      sessionStorage.setItem('tokenMarketSelectedModel', JSON.stringify(model));
    },

    // 生成唯一的二级菜单项key
    getSubItemKey(subItem) {
      return `${subItem.id}_${this.activeCategory}_${subItem.secTitle}`;
    },

    // 生成唯一的三级菜单项key
    getThirdItemKey(thirdItem) {
      return `${thirdItem.id}_${this.activeSubId}_${thirdItem.thrTitle}`;
    },

    // 加载导航数据
    async loadNavData() {
      try {
        const response = await reqNavList({ url_link: window.location.href });
        if (response.status && response.data.product_service) {
          this.panelData = this.processNavData(response.data.product_service);
        }
      } catch (error) {
        console.error("加载产品数据失败:", error);
        this.panelData = [];
      }
    },

    // 处理导航数据 - 修复数据结构
    processNavData(data) {
      return data.map((category, categoryIndex) => {
        if (this.isTokenMarketCategory(category.firTitle)) {
          this.setTokenMarketData(category);
        }
        // 确保一级分类有唯一标识
        if (!category.uniqueId) {
          category.uniqueId = `category_${categoryIndex}_${category.firTitle}`;
        }

        if (category.secMenu) {
          category.secMenu.forEach((secItem, secIndex) => {
            // 确保二级菜单项有唯一标识
            if (!secItem.id) {
              secItem.id = `sec_${categoryIndex}_${secIndex}`;
            }

            if (secItem.thrMenu) {
              secItem.thrMenu.forEach((thrItem, thrIndex) => {
                // 确保三级菜单项有唯一标识
                if (!thrItem.id) {
                  thrItem.id = `thr_${categoryIndex}_${secIndex}_${thrIndex}`;
                }

                if (thrItem.value) {
                  thrItem.value.forEach(product => {
                    product.type = secItem.secTitle;
                    // 确保产品有唯一ID
                    if (!product.id) {
                      product.id = `product_${categoryIndex}_${secIndex}_${thrIndex}_${Math.random().toString(36).substr(2, 9)}`;
                    }
                  });
                }
              });
            }
          });
        }
        return category;
      });
    },

    // 初始化默认数据
    initializeDefaultData() {
      if (this.panelData.length > 0) {
        const defaultCategory = this.getDefaultCategory();
        this.activeCategory = defaultCategory.firTitle;
        this.setDefaultSubcategory(defaultCategory);
      }
    },

    // 进入 /product 时优先根据路由 query 打开指定分类；没有 query 时默认打开 TOKEN 市集。
    getDefaultCategory() {
      const queryCategory = this.$route.query.category || this.$route.query.tab;
      const categoryFromQuery = queryCategory
        ? this.panelData.find(item => item.firTitle === queryCategory || this.isTokenMarketCategory(queryCategory) && this.isTokenMarketCategory(item.firTitle))
        : null;
      const tokenCategory = this.panelData.find(item => this.isTokenMarketCategory(item.firTitle));
      return categoryFromQuery || tokenCategory || this.panelData[0];
    },

    // 根据分类设置默认二级菜单
    setDefaultSubcategory(category) {
      if (this.isTokenMarketCategory(category.firTitle)) {
        this.activeSubId = null;
        this.activeThirdId = null;
        this.currentProducts = [];
        return;
      }
      if (category.secMenu && category.secMenu.length > 0) {
        let defaultSubItem = category.secMenu[0];

        if (category.firTitle === '算') {
          const zhishuanItem = category.secMenu.find(item =>
            item.secTitle && item.secTitle.includes('智算')
          );
          if (zhishuanItem) defaultSubItem = zhishuanItem;
        } else if (category.firTitle === '网') {
          const networkItem = category.secMenu.find(item =>
            item.secTitle && item.secTitle.includes('算力网络')
          );
          if (networkItem) defaultSubItem = networkItem;
        }

        this.activeSubId = this.getSubItemKey(defaultSubItem);
        this.updateProductList(defaultSubItem);
      } else {
        this.activeSubId = null;
        this.activeThirdId = null;
        this.currentProducts = this.getAllProductsFromCategory(category);
      }
    },

    // 获取分类下的所有产品
    getAllProductsFromCategory(category) {
      let allProducts = [];
      if (category.secMenu) {
        category.secMenu.forEach(secItem => {
          if (secItem.thrMenu) {
            secItem.thrMenu.forEach(thrItem => {
              if (thrItem.value) {
                allProducts = allProducts.concat(thrItem.value);
              }
            });
          }
        });
      }
      return allProducts;
    },

    // 切换分类
    switchCategory(category) {
      if (category && category.firTitle === '元境') {
        this.goYuanjing()
        return;
      }

      this.activeCategory = category.firTitle;
      this.activeSubId = null;
      this.activeThirdId = null;
      if (this.isTokenMarketCategory(category.firTitle)) {
        this.setTokenMarketData(category);
        this.currentProducts = [];
        return;
      }
      this.setDefaultSubcategory(category);
    },
    async goYuanjing() {
      const userId = sessionStorage.getItem('userId')
      if (!userId || userId === 'null' || userId === '') {
        window.open('https://ai.opencomputing.cn/', '_blank')
        return
      }

      const yuanJingWindow = window.open('', '_blank')

      try {
        const res = await gotoYuanJingAPI({ user_id: userId })
        const deerer = this.getYuanJingAuthorization(res)

        if (!deerer) {
          if (yuanJingWindow) {
            yuanJingWindow.close()
          }
          this.$message.error((res && res.msg) || '获取元境授权参数失败')
          return
        }

        const loginUrl = `https://ai.opencomputing.cn/#/getCookie?deerer=${encodeURIComponent(deerer)}`
        if (yuanJingWindow) {
          yuanJingWindow.location.href = loginUrl
        } else {
          window.location.href = loginUrl
        }
      } catch (error) {
        if (yuanJingWindow) {
          yuanJingWindow.close()
        }
        this.$message.error('跳转元境失败，请稍后重试')
      }
    },
    getYuanJingAuthorization(res) {
      if (!res) {
        return ''
      }

      if (typeof res === 'string') {
        return res
      }

      const data = res.data || res
      if (typeof data === 'string') {
        return data
      }

      return data.Authorization || data.authorization || data.token || data.header || data.value || ''
    },

    // 切换二级分类
    switchSubcategory(subItem) {
      this.activeSubId = this.getSubItemKey(subItem);
      this.activeThirdId = null;
      this.updateProductList(subItem);
    },

    // 切换三级分类
    switchThirdLevel(thirdItem) {
      this.activeThirdId = this.getThirdItemKey(thirdItem);
      this.currentProducts = thirdItem.value || [];
    },

    // 更新产品列表
    updateProductList(subItem) {
      if (this.isSpecialCategory) {
        this.currentProducts = this.getAllProductsFromSubcategory(subItem);
        return;
      }

      if (subItem.thrMenu && subItem.thrMenu.length > 0) {
        this.activeThirdId = null;
        this.currentProducts = this.getAllProductsFromSubcategory(subItem);
      } else {
        this.activeThirdId = null;
        this.currentProducts = [];
      }
    },

    // 获取二级分类下的所有产品
    getAllProductsFromSubcategory(subItem) {
      let allProducts = [];
      if (subItem.thrMenu) {
        subItem.thrMenu.forEach(thrItem => {
          if (thrItem.value) {
            allProducts = allProducts.concat(thrItem.value);
          }
        });
      }
      return allProducts;
    },

    // 获取产品数量
    getProductCount(subItem) {
      if (!subItem.thrMenu) return 0;
      return subItem.thrMenu.reduce((total, thirdItem) => {
        return total + (thirdItem.value ? thirdItem.value.length : 0);
      }, 0);
    },

    // 获取产品描述
    getProductDescription(product) {
      const descriptions = {
        '云服务器_GPU': '高性能GPU云服务器，适合AI训练、科学计算等场景',
        '云服务器_BCC': '平衡型云服务器，满足大多数业务需求',
        '专属服务器': '独享物理服务器，提供更高性能和安全隔离',
        '轻量应用服务器': '轻量级应用部署，简单易用',
        '专线接入': '高速稳定的专线网络接入服务',
        '文字识别': '高精度文字识别，支持多种场景和语言',
        'AI能力引擎': '强大的AI能力引擎，赋能各种智能应用',
        '大数据平台': '全面的大数据处理和分析平台',
        '云服务平台': '一站式云服务平台，便捷高效',
        '智能内容科技': '智能内容生成与处理技术',
        'SME企业服务': '中小企业专属服务解决方案',
        '视频云平台': '专业的视频云处理与分发平台',
        '智能短信': '智能化短信服务和营销解决方案'
      };
      return descriptions[product.name] || '专业的云服务产品，提供稳定可靠的服务';
    },

    // 根据产品类型展示不同图标，让卡片更容易区分。
    getProductIcon(product) {
      const iconMap = {
        '百度云': 'el-icon-cloudy',
        '阿里云': 'el-icon-cloudy-and-sunny',
        '智算': 'el-icon-cpu',
        '算力网络': 'el-icon-connection'
      };

      return iconMap[product.type] || 'el-icon-coin';
    },

    // 修复阿里云跳转逻辑
    async handleAliyunProductClick(useid) {
        // 第一步：同步请求
        const syncResponse = await reqNewHomeSync();

        if (!syncResponse.status) {
          this.$message.warning(syncResponse.msg || '同步失败，请稍后重试');
          return;
        }
        // 第二步：获取跳转链接
        const festivalResponse = await reqNewHomeFestival();
        console.log(festivalResponse);

        if (festivalResponse.status && festivalResponse.data) {
          window.open(festivalResponse.data);
        } else {
          this.$message.warning(festivalResponse.msg || '获取跳转链接失败');
        }

    },

    // 点击产品
    async handleProductClick(product) {
      console.log('点击产品:', product);

      const userId = sessionStorage.getItem('userId');

      if (product.type === '百度云') {
        if (userId) {
          localStorage.setItem('redirectUrl', product.url);
          localStorage.setItem('userRescourseUrl', product.listUrl);
          this.$router.push({
            name: 'baiduProductShow',
            params: {
              listUrl: product.listUrl,
              url: product.url
            }
          });
        } else {
          this.$router.push({
            path: "/login",
            query: {
              fromPath: 'productService',
              type: 'bd',
              listUrl: product.listUrl,
              url: product.url
            }
          });
        }
      } else if (product.type === '阿里云') {

        if (userId) {
          await this.handleAliyunProductClick();
        } else {
          this.$router.push({
            path: "/login",
            query: {
              fromPath: 'productService',
              type: 'ali',
            }
          });
        }
      } else if (product.type === '智算' || product.type === '算力网络') {
        if (product.name === '容器云') {
          if (userId) {
            this.$router.push('/product/productHome/k8s/createK8s');
          } else {
            this.$router.push({
              path: "/login",
              query: {
                fromPath: 'productService',
                type: 'rqy',
              }
            });
          }
        } else {
          this.$router.push({
            path: '/homePage/detail',
            query: {
              id: product.id,
            }
          });
        }
      } else if (product.name === '灵医智能体') {
        this.$router.push('/homePage/hospital');
      } else if (product.name === '客悦·智能客服') {
        this.$router.push('/homePage/customerService');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.product-service-page {
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  min-height: calc(100vh - 100px);

  &.single-product-page {
    height: 100vh;
    min-height: 100vh;
    padding: 28px;
    background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
    overflow-y: auto;
    overflow-x: hidden;

    .single-page-topbox {
      width: 100vw;
      margin: -28px calc(50% - 50vw) 24px;
    }

    .product-content {
      max-width: 1180px;
      margin-right: auto;
      margin-left: auto;
    }

    .product-content {
      padding-bottom: 40px;
    }
  }

  .category-nav {
    display: flex;
    justify-content: space-around;
    margin-bottom: 32px;
    border-bottom: 1px solid #f0f0f0;

    .nav-item {
      padding: 12px 24px;
      font-size: 16px;
      color: #666;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.3s;

      &:hover {
        color: #1E6FFF;
      }

      &.active {
        color: #1E6FFF;
        border-bottom-color: #1E6FFF;
        font-weight: 600;
      }
    }
  }

  .product-content {
    display: flex;
    gap: 24px;

    .menu-sidebar {
      width: 280px;
      height: calc(100vh - 100px);
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      flex-shrink: 0;

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e8e8e8;
      }

      .subcategory-section {
        margin-bottom: 24px;
      }

      .subcategory-list,
      .third-level-list {
        .subcategory-item,
        .third-level-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 12px;
          cursor: pointer;
          transition: all 0.3s;
          border-radius: 6px;
          margin-bottom: 4px;

          &:hover {
            background: rgba(30, 111, 255, 0.05);
            color: #1E6FFF;
          }

          &.active {
            background: rgba(30, 111, 255, 0.1);
            color: #1E6FFF;
            font-weight: 600;
          }

          .subcategory-name {
            font-size: 14px;
          }

          .product-count {
            background: #e8f4ff;
            color: #1E6FFF;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
          }
        }
      }

      .third-level-list {
        .third-level-item {
          padding-left: 20px;
          font-size: 13px;
        }
      }
    }

    .main-content {
      flex: 1;

      &.full-width {
        flex: 1;
        margin-left: 0;
      }

      .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;

        .product-card {
          background: #fff;
          border: 1px solid #f0f0f0;
          border-radius: 8px;
          padding: 20px;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            border-color: #1E6FFF;
          }

          .product-header {
            display: flex;
            justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 12px;

                .product-name {
                  font-size: 16px;
                  font-weight: 600;
                  color: #1a1a1a;
                  margin: 0;
                  flex: 1;
                }

                .discount-badge {
                  background: linear-gradient(135deg, #ff6b6b, #ff4757);
                  color: #fff;
                  font-size: 12px;
                  padding: 4px 8px;
                  border-radius: 4px;
                  font-weight: 600;
                  margin-left: 8px;
                }
              }

              .product-desc {
                font-size: 14px;
                color: #666;
                line-height: 1.5;
                margin-bottom: 16px;
                display: -webkit-box;
                // -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }

              .product-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .product-type {
                  font-size: 12px;
                  color: #999;
                  background: #f8f9fa;
                  padding: 4px 8px;
                  border-radius: 4px;
                }

                .detail-btn {
                  background: #1E6FFF;
                  color: #fff;
                  border: none;
                  padding: 6px 12px;
                  border-radius: 4px;
                  font-size: 12px;
                  cursor: pointer;
                  transition: background 0.3s;

                  &:hover {
                    background: #0d5ae0;
                  }
                }
              }
            }
          }

          .empty-state {
            text-align: center;
            padding: 60px 20px;

            .empty-icon {
              font-size: 48px;
              margin-bottom: 16px;
            }

            .empty-text {
              color: #999;
              font-size: 14px;
            }
          }
        }
      }
    }

    @media (max-width: 768px) {
      .product-service-page {
        padding: 16px;

        .product-content {
          flex-direction: column;

          .menu-sidebar {
            width: 100%;
            order: 2;
          }

          .main-content {
            order: 1;

            &.full-width {
              margin-left: 0;
            }
          }
        }

        .product-grid {
          grid-template-columns: 1fr !important;
        }
      }
    }
.product-service-page {
  background: linear-gradient(180deg, #f3f7ff 0%, #f7f9fc 38%, #ffffff 100%);

  .page-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px;
    color: #ffffff;
    background:
      radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 32%),
      linear-gradient(135deg, #1e6fff 0%, #5d8dff 52%, #7fb0ff 100%);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(30, 111, 255, 0.18);

    .hero-content {
      max-width: 560px;

      .hero-tag {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 12px;
        margin-bottom: 14px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
      }

      h2 {
        margin: 0 0 10px;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 1px;
      }

      p {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        line-height: 1.8;
      }
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 116px);
      gap: 12px;
      align-items: center;

      .stat-card {
        padding: 16px 14px;
        text-align: center;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;

        span {
          display: block;
          margin-bottom: 8px;
          color: rgba(255, 255, 255, 0.78);
          font-size: 12px;
        }

        strong {
          font-size: 26px;
          line-height: 1;
        }
      }
    }
  }
  .product-search {
    margin:  10px 0;
      /deep/ .el-input__inner {
        height: 40px;
        line-height: 40px;
        border-radius: 12px;
      }
    }
  .page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #edf1f7;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(31, 45, 61, 0.06);

    h3 {
      margin: 0 0 6px;
      color: #1f2d3d;
      font-size: 18px;
    }

    p {
      margin: 0;
      color: #8a94a6;
      font-size: 13px;
    }

   
  }

  .category-nav {
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #edf1f7;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(31, 45, 61, 0.05);

    .nav-item {
      flex: 1;
      min-width: 96px;
      padding: 12px 18px;
      text-align: center;
      border: 0;
      border-radius: 12px;

      &:hover {
        background: #f4f8ff;
      }

      &.active {
        color: #ffffff;
        background: linear-gradient(135deg, #1e6fff, #5d8dff);
        box-shadow: 0 10px 22px rgba(30, 111, 255, 0.18);
      }
    }
  }

  .product-content {
    align-items: flex-start;

    .menu-sidebar {
      position: sticky;
      top: 16px;
      padding: 16px;
      background: #ffffff;
      border: 1px solid #edf1f7;
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(31, 45, 61, 0.06);
    }

    .token-filter-section {
      margin-top: 18px;

      h4 {
        margin: 0 0 10px;
        color: #98a2b3;
        font-size: 13px;
        font-weight: 600;
      }
    }

    .token-filter-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .token-filter-item {
      padding: 4px 0;
      color: #344054;
      text-align: left;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 14px;

      &.active {
        color: #1e6fff;
        font-weight: 600;
      }
    }
  }

  .product-content .subcategory-list,
  .product-content .third-level-list {
    .subcategory-item,
    .third-level-item {
      padding: 12px 14px;
      border-radius: 12px;

      &.active {
        background: linear-gradient(135deg, rgba(30, 111, 255, 0.12), rgba(93, 141, 255, 0.08));
        box-shadow: inset 3px 0 0 #1e6fff;
      }
    }
  }

  .product-content .main-content {
    min-width: 0;

    .token-market-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: #667085;
      font-size: 14px;
    }

    .token-sort-btn {
      height: 28px;
      padding: 0 12px;
      color: #667085;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;

      &.active {
        color: #7c3aed;
        background: #f5f3ff;
        border-color: #c4b5fd;
      }
    }

    .token-market-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .token-market-card {
      flex: 0 0 calc((100% - 28px) / 3);
      min-width: 0;
      padding: 14px;
      background: #ffffff;
      border: 1px solid #edf1f7;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(31, 45, 61, 0.05);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: #d7e4f5;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(31, 45, 61, 0.08);
      }
    }

    .token-card-top {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;

      h3 {
        flex: 1;
        margin: 0;
        color: #1f2d3d;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
      }
    }

    .token-new-badge {
      padding: 1px 6px;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      background: #3b82f6;
      border-radius: 5px;
    }

    .token-more {
      color: #98a2b3;
      transform: rotate(90deg);
    }

    .token-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px dashed #d8e0ee;

      span {
        padding: 2px 6px;
        color: #667085;
        font-size: 11px;
        background: #f8fafc;
        border: 1px solid #edf1f7;
        border-radius: 6px;
      }
    }

    .token-price-line {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 8px;
      color: #1f2937;
      font-size: 12px;
      font-weight: 600;
    }

    .token-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      color: #667085;
      font-size: 12px;
    }

    .token-provider-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      color: #ffffff;
      font-size: 10px;
      background: #1e6fff;
      border-radius: 4px;
    }

    .token-actions {
      display: flex;
      gap: 6px;

      button {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 28px;
        padding: 0 10px;
        color: #475467;
        font-size: 12px;
        background: #ffffff;
        border: 1px solid #d8e0ee;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          color: #1e6fff;
          border-color: #9ec5ff;
          background: #f4f8ff;
        }
      }

      .experience {
        color: #4f46e5;
        border-color: #c7d2fe;

        &:hover {
          color: #4338ca;
          border-color: #a5b4fc;
          background: #eef2ff;
        }
      }
    }

    .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

      .product-card {
        position: relative;
        min-height: 178px;
        overflow: hidden;
        border-color: #edf1f7;
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(31, 45, 61, 0.06);

        &::after {
          content: "";
          position: absolute;
          right: -36px;
          top: -36px;
          width: 96px;
          height: 96px;
          background: rgba(30, 111, 255, 0.08);
          border-radius: 50%;
            pointer-events: none;
        }

        &:hover {
          box-shadow: 0 18px 38px rgba(30, 111, 255, 0.14);
        }

        .product-header {
            position: relative;
            z-index: 1;
          align-items: flex-start;
          gap: 12px;

          .product-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            color: #1e6fff;
            font-size: 22px;
            background: #eef5ff;
            border-radius: 14px;
          }

          .product-title {
            flex: 1;
            min-width: 0;
          }

          .product-name {
            margin: 0 0 7px;
            color: #1f2d3d;
            line-height: 1.4;
          }

          .product-type {
            display: inline-flex;
            color: #7a8699;
            font-size: 12px;
            background: #f4f6fa;
            padding: 4px 8px;
            border-radius: 999px;
          }

          .discount-badge {
            position: relative;
            z-index: 1;
            border-radius: 999px;
            white-space: nowrap;
          }
        }

        .product-desc {
          position: relative;
          z-index: 1;
          min-height: 44px;
          color: #667085;
          line-height: 1.6;
          line-clamp: 2;
          -webkit-line-clamp: 2;
        }

        .product-footer {
          position: relative;
          z-index: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .product-status {
            color: #12b76a;
            font-size: 12px;
            background: #ecfdf3;
            padding: 5px 10px;
            border-radius: 999px;
          }

          .detail-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #ffffff;
            background: #1E6FFF;
            border: none;
            padding: 8px 13px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 0.25s ease, transform 0.25s ease;

            &:hover {
              background: #0d5ae0;
              transform: translateX(2px);
            }
          }
        }
      }
    }

    .empty-state {
      padding: 76px 20px;
      text-align: center;
      background: #ffffff;
      border: 1px dashed #d8e0ee;
      border-radius: 18px;

      .empty-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
        color: #98a2b3;
        font-size: 32px;
        background: #f4f6fa;
        border-radius: 18px;
      }

      .empty-text {
        margin: 0 0 8px;
        color: #475467;
        font-size: 15px;
        font-weight: 600;
      }

      span {
        color: #98a2b3;
        font-size: 13px;
      }
    }
  }

  @media (max-width: 1080px) {
    .page-hero {
      flex-direction: column;

      .hero-stats {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .page-toolbar {
      align-items: flex-start;
      flex-direction: column;

      .product-search {
        width: 100%;
      }
    }

    .product-content .main-content .token-market-card {
      flex-basis: calc((100% - 14px) / 2);
    }
  }

  @media (max-width: 768px) {
    .product-content .main-content .token-market-card {
      flex-basis: 100%;
    }
  }
}
</style>
