<template>
  <view class="container">
    <!-- Search Bar (独立按钮版) -->
    <view class="header-section">
      <view class="search-bar-row">
        <view class="search-input-box">
          <up-search
              type="text"
              placeholder="搜索产品型号"
              placeholder-class="search-placeholder"
              v-model="title"
              :showAction="false"
              :animation="false"
              bgColor="#f5f5f5"
              shape="round"
              @search="handleSearch"
          />
        </view>
        <view class="custom-search-btn" @tap="handleSearch" hover-class="btn-hover">
          搜索
        </view>
      </view>

      <!-- Category Tabs (Sticky) -->
      <view class="tabs-wrapper">
        <scroll-view
            class="category-tabs"
            scroll-x
            show-scrollbar="false"
            :scroll-into-view="'tab-' + currentTab"
            scroll-with-animation
        >
          <view
              v-for="(tab, index) in tabs"
              :key="index"
              :id="'tab-' + index"
              :class="['tab-item', { active: currentTab === index }]"
              @tap="switchTab(index, tab.id)"
          >
            <text class="tab-text">{{ tab.name }}</text>
            <view class="active-dot" v-if="currentTab === index"></view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- Content Area -->
    <view class="content-area">
      <!-- Loading State (Skeleton Screen) -->
      <view class="loading-container" v-if="loading && products.length === 0">
        <!-- CSS 骨架屏结构 -->
        <view class="waterfall-container">
          <view class="waterfall-column">
            <view class="skeleton-card" v-for="i in 3" :key="'l'+i">
              <view class="skeleton-img pulse"></view>
              <view class="skeleton-text pulse"></view>
            </view>
          </view>
          <view class="waterfall-column">
            <view class="skeleton-card" v-for="i in 3" :key="'r'+i">
              <view class="skeleton-img pulse" style="height: 300rpx"></view>
              <view class="skeleton-text pulse"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- Empty State -->
      <view class="empty-container" v-else-if="products.length === 0">
        <image src="/static/images/empty.png" mode="aspectFit" class="empty-image animate-float" />
        <text class="empty-text">暂无相关产品</text>
      </view>

      <!-- Waterfall Layout -->
      <view class="waterfall-container" v-else>
        <view class="waterfall-column">
          <view
              v-for="(product, index) in leftProducts"
              :key="product.id"
              class="product-item animate-card-enter"
              :style="{ animationDelay: index * 0.1 + 's' }"
              @tap="navigateToDetail(product.id)"
          >
            <view class="img-box">
              <image
                  :src="product.cover"
                  mode="widthFix"
                  class="product-image"
                  @load="imageLoaded(index * 2)"
              />
            </view>
            <view class="info-box">
              <text class="product-code">{{ product.title }}</text>
            </view>
          </view>
        </view>

        <view class="waterfall-column">
          <view
              v-for="(product, index) in rightProducts"
              :key="product.id"
              class="product-item animate-card-enter"
              :style="{ animationDelay: (index * 0.1 + 0.05) + 's' }"
              @tap="navigateToDetail(product.id)"
          >
            <view class="img-box">
              <image
                  :src="product.cover"
                  mode="widthFix"
                  class="product-image"
                  @load="imageLoaded(index * 2 + 1)"
              />
            </view>
            <view class="info-box">
              <text class="product-code">{{ product.title }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Footer State -->
      <view class="footer-state">
        <view class="loading-more" v-if="loadingMore">
          <view class="loading-spinner"></view>
        </view>
        <view class="no-more-data" v-if="noMoreData && products.length > 0">
          <text class="divider-line"></text>
          <text>THE END</text>
          <text class="divider-line"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCategoryListByPidApi, getProductListApi } from "@/api/page/product"

export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      pid: 0,
      currentTab: 0,
      categoryId: 0,
      title: "",
      tabs: [],
      products: [],
      loading: false,
      loadingMore: false,
      noMoreData: false,
      totalPages: 1,
    }
  },
  computed: {
    // 将产品分为左右两列，实现瀑布流布局
    leftProducts() {
      return this.products.filter((_, index) => index % 2 === 0)
    },
    rightProducts() {
      return this.products.filter((_, index) => index % 2 === 1)
    },
  },
  onLoad(options) {
    if (options && options.pid) {
      this.pid = options.pid
      this.categoryId = options.pid
      this.getCategoryList()
    } else {
      uni.showToast({
        title: "参数错误",
        icon: "none",
      })
    }
  },
  onPullDownRefresh() {
    this.refreshProductList()
  },
  onReachBottom() {
    this.loadMoreProducts()
  },
  mounted() {
    this.getProductList()
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    switchTab(index, id) {
      this.currentTab = index
      this.categoryId = id
      this.page = 1
      this.products = []
      this.noMoreData = false
      this.getProductList()
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`,
      })
    },
    getCategoryList() {
      getCategoryListByPidApi(this.pid).then((res) => {
        res.unshift({
          id: 0,
          name: "全部",
        })
        this.tabs = res
      })
    },
    handleSearch() {
      // 这里的搜索逻辑是正确的：重置分页和数据，重新请求
      this.page = 1
      this.products = []
      this.noMoreData = false
      this.getProductList()
    },
    refreshProductList() {
      this.page = 1
      this.products = []
      this.noMoreData = false
      this.getProductList()
          .then(() => {
            uni.stopPullDownRefresh()
            uni.showToast({
              title: "刷新成功",
              icon: "success",
              duration: 1500,
            })
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            uni.showToast({
              title: "刷新失败",
              icon: "none",
              duration: 1500,
            })
          })
    },
    loadMoreProducts() {
      if (this.loadingMore || this.noMoreData) return

      this.page++
      this.loadingMore = true

      getProductListApi({
        page: this.page,
        size: this.pageSize,
        title: this.title,
        category_id: this.categoryId,
      })
          .then((res) => {
            if (res.data && res.data.length > 0) {
              this.products = [...this.products, ...res.data]
              if (res.data.length < this.pageSize || this.page >= this.totalPages) {
                this.noMoreData = true
              }
            } else {
              this.noMoreData = true
            }
            this.loadingMore = false
          })
          .catch(() => {
            this.page--
            this.loadingMore = false
            uni.showToast({
              title: "加载失败",
              icon: "none",
            })
          })
    },
    getProductList() {
      this.loading = true
      return new Promise((resolve, reject) => {
        getProductListApi({
          page: this.page,
          size: this.pageSize,
          title: this.title,
          category_id: this.categoryId,
        })
            .then((res) => {
              if (this.page === 1) {
                this.products = res.data || []
              } else {
                this.products = [...this.products, ...(res.data || [])]
              }
              if (!res.data || res.data.length < this.pageSize) {
                this.noMoreData = true
              }
              if (res.last_page) {
                this.totalPages = res.last_page
              }
              this.loading = false
              resolve(res)
            })
            .catch((err) => {
              this.loading = false
              uni.showToast({
                title: "加载失败",
                icon: "none",
              })
              reject(err)
            })
      })
    },
    imageLoaded(index) {
    },
  },
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #F7F8FA;
  display: flex;
  flex-direction: column;
}

.header-section {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.02);
}

/* 独立的搜索行样式 */
.search-bar-row {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  gap: 20rpx;
}

.search-input-box {
  flex: 1;
}

.custom-search-btn {
  padding: 12rpx 30rpx;
  background: #B4854D;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 10rpx rgba(180, 133, 77, 0.3);
  transition: opacity 0.2s;
}

.btn-hover {
  opacity: 0.8;
}

.tabs-wrapper {
  border-bottom: 1rpx solid #f0f0f0;
}

.category-tabs {
  white-space: nowrap;
  padding: 0 10rpx;
  height: 90rpx;
}

.tab-item {
  display: inline-block;
  padding: 0 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  position: relative;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 400;
  transition: all 0.3s;
}

.tab-item.active .tab-text {
  color: #B4854D;
  font-size: 30rpx;
  font-weight: 600;
}

.active-dot {
  position: absolute;
  bottom: 16rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 8rpx;
  height: 8rpx;
  background-color: #B4854D;
  border-radius: 50%;
  box-shadow: 0 2rpx 4rpx rgba(180, 133, 77, 0.4);
}

/* 瀑布流布局优化 */
.waterfall-container {
  display: flex;
  padding: 24rpx;
  align-items: flex-start;
}

.waterfall-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.waterfall-column:first-child {
  padding-right: 12rpx;
}

.waterfall-column:last-child {
  padding-left: 12rpx;
}

.product-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
}

.product-image {
  width: 100%;
  height: auto;
  display: block;
}

.info-box {
  padding: 24rpx 20rpx;
}

.product-code {
  display: block;
  font-size: 28rpx;
  color: #333333;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 动画 Keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { opacity: 0.6; background: #eee; }
  50% { opacity: 1; background: #ddd; }
  100% { opacity: 0.6; background: #eee; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
  100% { transform: translateY(0); }
}

.animate-card-enter {
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 骨架屏样式 */
.skeleton-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
}

.skeleton-img {
  width: 100%;
  height: 240rpx;
  background: #eee;
}

.skeleton-text {
  height: 30rpx;
  margin: 20rpx;
  width: 60%;
  background: #eee;
  border-radius: 8rpx;
}

.pulse {
  animation: pulse 1.5s infinite ease-in-out;
}

/* 底部状态 */
.loading-more {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}

.loading-spinner {
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #ddd;
  border-top-color: #B4854D;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.no-more-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  color: #ccc;
  font-size: 22rpx;
  letter-spacing: 2rpx;
}

.divider-line {
  width: 40rpx;
  height: 2rpx;
  background: #eee;
  margin: 0 16rpx;
}

/* 空状态 */
.empty-container {
  padding-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
  opacity: 0.8;
}
</style>