<template>
  <scroll-view class="category-content" :style="{ height: scrollHeight + 'px' }" scroll-y enable-back-to-top @scrolltolower="loadMore">
    <view v-if="childlist.length > 0" class="sub-menu">
      <view v-for="item in childlist" :key="item.id" class="sub-item" @tap="goSubCategory(item.id, item.name)">
        <image :src="item.image" mode="aspectFill" class="sub-img" lazy-load />
        <text class="sub-name">{{ item.name }}</text>
      </view>
    </view>
    <view class="recommend-title">
      <view class="recommend-line"></view>
      <view class="recommend-text">
        <text class="recommend-icon">★</text>
        <text class="recommend-label">{{ $t('mall.category.recommend') }}</text>
      </view>
      <view class="recommend-line"></view>
    </view>
    <mall-product :dataList="goodsList" :dataStyle="dataStyle" />
    <view class="load-more" v-if="goodsList.length > 0">
      <text v-if="loading">{{ $t('common.loading') }}</text>
      <text v-else-if="currentPage >= lastPage">{{ $t('common.noMore') }}</text>
    </view>
    <view class="empty" v-if="!goodsList.length && !loading">
      <text>{{ $t('mall.category.empty') }}</text>
    </view>
  </scroll-view>
</template>

<script>
import { pullMallCategoryGoods } from '@/features/mall/mall-gateway'
export default {
  name: 'mall-category-content',
  props: {
    cid: { type: Number, default: 0 },
    childlist: { type: Array, default: function () { return [] } },
    scrollHeight: { type: Number, default: 600 },
    isActive: { type: Boolean, default: false },
    dataStyle: { type: String, default: 'col-2-20' }
  },
  data: function () {
    return {
      goodsList: [],
      currentPage: 1,
      lastPage: 1,
      loading: false,
      loaded: false
    }
  },
  watch: {
    isActive: {
      handler: function (val) {
        if (val && !this.loaded) { this.loadData() }
      },
      immediate: true
    }
  },
  methods: {
    loadData: function () {
      var self = this
      self.loading = true
      pullMallCategoryGoods({ id: self.cid, page: self.currentPage }).then(function (res) {
        self.goodsList = res.goods
        self.currentPage = res.currentPage
        self.lastPage = res.lastPage
        self.loaded = true
      }).catch(function (e) {
        console.error('加载分类商品失败:', e)
      }).finally(function () {
        self.loading = false
      })
    },
    loadMore: function () {
      if (this.loading || this.currentPage >= this.lastPage) return
      this.currentPage++
      this.loading = true
      var self = this
      pullMallCategoryGoods({ id: self.cid, page: self.currentPage }).then(function (res) {
        self.goodsList = self.goodsList.concat(res.goods)
        self.currentPage = res.currentPage
        self.lastPage = res.lastPage
      }).catch(function (e) {
        console.error('加载更多失败:', e)
      }).finally(function () {
        self.loading = false
      })
    },
    goSubCategory: function (id, name) {
      var data = JSON.stringify({ category_id: id, category_name: name })
      uni.navigateTo({ url: '/pages/product/list?data=' + encodeURIComponent(data) })
    }
  }
}
</script>

<style lang="scss" scoped>
.category-content { background: #f5f5f5; }
.sub-menu { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 16rpx; background: #fff; padding: 24rpx; margin: 16rpx; border-radius: 16rpx; }
.sub-item { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sub-img { width: 100rpx; height: 100rpx; border-radius: 8rpx; }
.sub-name { font-size: 22rpx; color: #666; margin-top: 8rpx; }
.recommend-title { display: flex; align-items: center; justify-content: center; padding: 30rpx 0 10rpx; }
.recommend-line { width: 60rpx; height: 2rpx; background: #ddd; }
.recommend-text { display: flex; align-items: center; margin: 0 40rpx; }
.recommend-icon { font-size: 36rpx; color: #f37b1d; margin-right: 8rpx; }
.recommend-label { font-size: 26rpx; color: #999; font-weight: bold; }
.load-more { text-align: center; padding: 20rpx 0; font-size: 24rpx; color: #999; }
.empty { text-align: center; padding: 100rpx 0; color: #999; }
</style>