<template>
  <div class="product-grid-page">
    <!-- 筛选排序区 -->
    <div class="filter-bar" v-if="showFilter">
      <!-- 分类弹框 -->
      <el-select
        v-model="selectedCategory"
        placeholder="全部分类"
        class="filter-select"
        @change="handleCategoryChange"
      >
        <el-option
          v-for="cat in categories"
          :key="cat.id"
          :label="cat.name"
          :value="cat.id"
        ></el-option>
      </el-select>

      <!-- 排序选项 -->
      <el-select
        v-model="selectedSort"
        placeholder="综合排序"
        class="filter-select"
        @change="handleSortChange"
      >
        <el-option label="综合排序" value="default"></el-option>
        <el-option label="销量↑" value="sales_asc"></el-option>
        <el-option label="销量↓" value="sales_desc"></el-option>
        <el-option label="价格↑" value="price_asc"></el-option>
        <el-option label="价格↓" value="price_desc"></el-option>
      </el-select>
    </div>

    <!-- 搜索结果统计 -->
    <div class="result-stats" v-if="type == 'search'">
      <span>全部结果 ></span>
      <span class="keyword" v-if="searchKeyword">"{{ searchKeyword }}"</span>
      <span
        v-if="
          selectedCategory &&
          categories.find((cat) => cat.value === selectedCategory)
        "
        class="category"
      >
        "{{ categories.find((cat) => cat.value === selectedCategory).label }}"
      </span>
      <span>共{{ totalProducts }}个结果</span>
    </div>

    <!-- 商品网格 -->
    <div class="product-grid">
      <div
        class="product-card"
        v-for="(product, index) in visibleProducts"
        :key="index"
        @click="goToDetail(product.id)"
      >
        <img
          v-lazy="product.headimg"
          :alt="product.title"
          class="product-img"
          fit="cover"
        />
        <!-- <div slot="placeholder" class="image-placeholder">
            <i class="el-icon-loading"></i>
          </div> -->
        <!-- </img> -->
        <div class="product-info">
          <div class="product-name">{{ product.title }}</div>
          <div class="price-row">
            <span class="current-price">¥{{ product.price / 100 }}</span>
            <span class="original-price" v-if="product.market_price"
              >¥{{ product.market_price / 100 }}</span
            >
          </div>
          <div class="sales-volume">
            <i class="el-icon-shopping-cart"></i> 已售
            {{ product.sales_number }}
          </div>
          <el-button type="primary" size="mini" class="cart-btn">
            立即购买
          </el-button>
        </div>
      </div>
      <div class="empty-state" v-if="visibleProducts.length === 0">
        <el-empty description="暂无符合条件的商品"></el-empty>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container" v-if="totalProducts > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[12, 24, 36]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalProducts"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "ProductGridPage",
  data() {
    return {
      type: "",
      // 搜索关键词
      searchKeyword: "",
      // 筛选/排序条件
      selectedCategory: "",
      selectedSort: "default", // 默认综合排序
      showFilter: true,
      // 分页控制
      currentPage: 1,
      pageSize: 12,
      // 商品数据
      visibleProducts: [],
      totalProducts: 0,
      // 分类选项
      categories: [],
      id: "",
      keyword: "",
    };
  },
  computed: {
    ...mapGetters(["getSearchText"]),
    // 计算当前页对应的offset
    currentOffset() {
      return (this.currentPage - 1) * this.pageSize;
    },
  },
  watch: {
    // 监听搜索词变化
    getSearchText(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.searchKeyword = newVal;
        this.fetchProducts(); // 调用接口获取数据
      }
    },
  },
  created() {
    this.type = this.$route.query?.type;
    this.searchKeyword = this.getSearchText;
    this.getTagList();
  },
  // 组件销毁时移除事件监听（避免内存泄漏）
  beforeDestroy() {
    // 清空搜索词
    this.searchKeyword = "";
    // 同时更新Vuex中的搜索词状态
    this.$store.commit("setSearchText", "");
    // 重置分页和筛选条件（可选）
    this.currentPage = 1;
    this.selectedCategory = "";
    this.selectedSort = "default";
  },
  methods: {
    // 获取分类
    getTagList() {
      this.post(
        {
          pid: 683,
        },
        "/api/product/tag_list"
      ).then((res) => {
        this.categories = res.data;
        this.categories[0].id = this.VUE_APP_GLOBAL_TAGS.pc_all;
        // 获取路由中的id参数
        const routeId = this.$route.query.id || this.VUE_APP_GLOBAL_TAGS.pc_all;
        if (routeId) {
          // 存储路由id
          this.id = routeId;
          // 查找匹配的分类并选中
          const matchedCategory = this.categories.find(
            (cat) => cat.id == routeId
          );
          console.log(routeId, matchedCategory);
          if (matchedCategory) {
            this.selectedCategory = matchedCategory.name;
          }
        }
        this.fetchProducts();
      });
    },
    // 获取列表 - 使用offset和limit参数
    async fetchProducts() {
      // 构建请求参数
      const params = {
        tag_id: this.id || this.selectedCategory,
        offset: this.currentOffset,
        limit: this.pageSize,
        title: this.searchKeyword,
        ...this.parseSortParams(),
      };

      // 如果有搜索关键词，添加到请求参数中
      if (this.searchKeyword) {
        params.keyword = this.searchKeyword;
      }

      const response = await this.post(
        params,
        "/api/product/get_product_by_tag"
      );

      // 假设接口返回格式包含list和total字段
      this.visibleProducts = response.data.list || [];
      this.totalProducts = Number(response.data.total) || 0;
    },

    // 排序参数
    parseSortParams() {
      if (this.selectedSort === "default") {
        return {}; // 综合排序不需要参数
      }

      // 拆分排序类型和排序方向
      const [sortField, order] = this.selectedSort.split("_");
      // 转换为接口需要的字段名
      const sortMap = {
        sales: "sales_number",
        price: "price",
      };

      return {
        sort: sortMap[sortField],
        order: order,
      };
    },

    // 分类变更处理
    handleCategoryChange(event) {
      this.id = event;
      this.currentPage = 1; // 切换分类后重置到第一页
      this.fetchProducts();
    },

    // 排序变更处理
    handleSortChange() {
      this.currentPage = 1; // 切换排序后重置到第一页
      this.fetchProducts();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 改变每页条数时重置到第一页
      this.fetchProducts();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchProducts();
      // 滚动到页面顶部
      window.scrollTo(0, 0);
    },

    // 跳转详情页
    goToDetail(id) {
      this.$router.push(`/Detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.product-grid-page {
  padding: 20px;
  background-color: #f5f7fa;
  max-width: 1400px;
  margin: 0 auto;

  // 筛选栏样式
  .filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .search-input {
      flex: 1;
      min-width: 200px;
    }

    .filter-select {
      min-width: 140px;
    }
  }

  // 搜索结果统计样式
  .result-stats {
    margin: 0 0 15px 5px;
    color: #666;
    font-size: 14px;
    padding: 5px 0;

    .keyword,
    .category {
      color: #ff4d4f;
      font-weight: 500;
      margin: 0 5px;
    }
  }

  // 商品网格布局
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  // 商品卡片
  .product-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    position: relative;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .product-img {
      width: 100%;
      height: 200px;
      background-color: #f5f5f5;
    }

    .image-placeholder {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
    }

    .tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 3px 8px;
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      z-index: 1;
    }

    .product-info {
      padding: 15px;

      .product-name {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
        height: 40px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .price-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .current-price {
          color: #ff4d4f;
          font-weight: bold;
          font-size: 16px;
        }

        .original-price {
          color: #999;
          font-size: 12px;
          text-decoration: line-through;
          margin-left: 8px;
        }
      }

      .sales-volume {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        i {
          font-size: 12px;
          margin-right: 4px;
        }
      }

      .cart-btn {
        width: 100%;
      }
    }
  }

  // 空状态样式
  .empty-state {
    grid-column: 1 / -1;
    padding: 60px 0;
    text-align: center;
  }

  // 分页容器
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 10px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .product-grid-page {
    padding: 10px;

    .filter-bar {
      padding: 10px;
      gap: 10px;
    }

    .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }

    .product-card {
      .product-img {
        height: 140px;
      }

      .image-placeholder {
        height: 140px;
      }
    }
  }
}
</style>