<template>
  <z-paging
    ref="pagingRef"
    v-model="groupProdList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="该分类下，没有团购商品"
    loading-more-no-more-text="没有更多了，看看别的吧"
    :auto="false"
    @query="onGetGroupProdList"
  >
    <view class="Mall4j page-group-prods">
      <view class="banner">
        <image src="@/package-activities/static/images/group-banner.jpg" />
      </view>

      <!-- 分类 -->
      <view class="group-category">
        <scroll-view
          scroll-x
          class="category-box"
        >
          <view
            v-for="(categoryItem, categoryIndex) in primaryCategoryList"
            :key="categoryIndex"
            class="item"
            :class="{'active':selectedItem===categoryIndex}"
            @click="onSwitchCategory(categoryItem.categoryId, categoryIndex)"
          >
            {{ categoryItem.name }}
          </view>
        </scroll-view>
      </view>

      <!-- 产品列表 -->
      <view class="line-prods">
        <view
          v-for="(prodItem, prodIndex) in groupProdList"
          :key="prodIndex"
          class="item"
        >
          <view class="group-icon">
            {{ Number(prodItem.spuActivity.groupActivity.groupNumber) + '人团' }}
          </view>
          <view class="img">
            <img-show
              :src="prodItem.mainImgUrl"
              img-mode="aspectFit"
              @handle-tap="()=>onToProdDetailPage(prodItem.spuId)"
            />
          </view>
          <view class="text-box">
            <view class="name">
              {{ prodItem.spuName }}
            </view>
            <view class="price-box">
              <view class="price">
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(prodItem.spuActivity.groupActivity.price)[0] + '.' + wxs.parsePrice(prodItem.spuActivity.groupActivity.price)[1] }}
                </view>
              </view>
              <view
                v-if="prodItem.priceFee>prodItem.spuActivity.groupActivity.price"
                class="old-price"
              >
                {{ '￥' + wxs.parsePrice(prodItem.priceFee)[0] + '.' + wxs.parsePrice(prodItem.priceFee)[1] }}
              </view>
            </view>
            <view class="btn-box">
              <view class="sold">
                {{ Number(prodItem.spuActivity.groupActivity.groupOrderCount) + '人已拼' }}
              </view>
              <view
                class="btn"
                @tap="onToProdDetailPage(prodItem.spuId)"
              >
                去拼团
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

onLoad(() => {
  onGetPlatformCategoryList()
})

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

// 获取平台一级分类
const primaryCategoryList = ref([]) // 一级分类列表
let selectedCategoryId = '' // 选中的分类id
const onGetPlatformCategoryList = () => {
  http.request({
    url: '/mall4cloud_product/ua/category/category_list',
    method: 'GET',
    data: {
      shopId: 0,
      parentId: 0
    }
  }).then(res => {
    primaryCategoryList.value = res
    selectedCategoryId = res[0].categoryId
    pagingRef.value.reload()
  })
}

// 获取团购商品列表
const pagingRef = ref(null)
const groupProdList = ref([]) // 团购商品列表
const onGetGroupProdList = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 1, // 0:普通商品 1:拼团商品 2:积分商品
      primaryCategoryId: selectedCategoryId,
      needActivity: 1
    }
  }).then(res => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list[0].spus)
  })
}

// 切换分类
const selectedItem = ref(0) // 默认选中第一项分类
const onSwitchCategory = (categoryId, index) => {
  if (selectedItem.value === index) {
    return
  }
  selectedCategoryId = categoryId
  selectedItem.value = index
  pagingRef.value.reload()
}

// 跳转到商品详情页
const onToProdDetailPage = (spuId) => {
  uni.navigateTo({
    url: `/pages/detail/detail?spuId=${spuId}`
  })
}

</script>

<style lang="scss" scoped>
@use "./group-prods.scss";
</style>
