<template>
  <z-paging
    ref="pagingRef"
    v-model="prodList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="没有找到对应商品，看看别的吧"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetProdList"
  >
    <view class="Mall4j page-new-prods">
      <view class="banner">
        <image src="@/package-activities/static/images/banner.png" />
      </view>
      <!-- 新品分类 -->
      <view class="new-category">
        <scroll-view
          scroll-x
          class="category-box"
        >
          <view
            class="item"
            :class="{active:selectedItem===-1}"
            @tap="onSwitchItem(-1)"
          >
            全部新品
          </view>
          <block
            v-for="(categoryItem, categoryIndex) in primaryCategoryList"
            :key="categoryIndex"
          >
            <view
              class="item"
              :class="{active:selectedItem===categoryIndex}"
              @tap="onSwitchItem(categoryIndex, categoryItem.categoryId)"
            >
              {{ categoryItem.name }}
            </view>
          </block>
        </scroll-view>
      </view>

      <!-- 产品列表 -->
      <view class="prods">
        <block
          v-for="(prodItem, prodIndex) in prodList"
          :key="prodIndex"
        >
          <view
            class="item"
            @tap="onToProdDetailPage(prodItem.spuId)"
          >
            <view class="img">
              <img-show
                :src="prodItem.mainImgUrl"
                img-mode="aspectFit"
              />
            </view>
            <view class="text-box">
              <view class="name">
                {{ prodItem.spuName }}
              </view>
              <view
                v-if="prodItem.sellingPoint"
                class="sku"
              >
                {{ prodItem.sellingPoint }}
              </view>
              <view class="price-box">
                <view class="price">
                  <view class="symbol">
                    ￥
                  </view>
                  <view class="big">
                    {{ wxs.parsePrice(prodItem.priceFee)[0] }}
                  </view>
                  <view class="symbol">
                    .{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </z-paging>
</template>
<script setup>
const wxs = number()

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

// 获取平台一级分类列表
const primaryCategoryList = ref([]) // 分类列表
const onGetPlatformCategoryList = () => {
  http.request({
    url: '/mall4cloud_product/ua/category/category_list',
    method: 'GET',
    data: {
      shopId: 0,
      parentId: 0
    }
  }).then(data => {
    primaryCategoryList.value = data.filter(item => item.status === 1)
  })
}

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

// 修改选中项
const selectedItem = ref(-1) // 选中项
const onSwitchItem = (index, categoryId) => {
  if (index === selectedItem.value) {
    return
  }
  if (index === -1) {
    selectedCategoryId = ''
  } else {
    selectedCategoryId = categoryId
  }
  selectedItem.value = index
  pagingRef.value.reload()
}

// 跳转到商品详情页
const onToProdDetailPage = (id) => {
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + id
  })
}
</script>

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