<template>
  <view class="container">
    <view>
      <!-- 使用v-for循环渲染商品列表 -->
      <block v-for="(item, index) in prodList" :key="index">
        <!-- 将每个商品项传递给production组件 -->
        <production :item="item" />
      </block>
      <!-- 如果没有商品数据，则显示“暂无数据”的提示信息 -->
      <view v-if="!prodList.length" class="empty">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script setup>
  // 定义响应式变量
  const sts = ref(0) // 商品状态标识符
  const title = ref('') // 页面标题
  const current = ref(1) // 当前页码
  const size = ref(10) // 每页显示的商品数量
  const pages = ref(0) // 总页数
  const tagid = ref(0) // 标签ID

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    // 初始化分页参数
    current.value = 1
    pages.value = 0
    // 设置sts和title值
    sts.value = options.sts
    title.value = options.title ? options.title : ''

    // 如果存在tagid选项，则设置标签ID
    if (options.tagid) {
      tagid.value = options.tagid
    }

    // 根据sts和tagid设置页面导航栏标题
    if (sts.value == 0) {
      switch (options.tagid) {
        case '1':
          uni.setNavigationBarTitle({ title: '每日上新' })
          break
        case '2':
          uni.setNavigationBarTitle({ title: '商城热卖' })
          break
        case '3':
          uni.setNavigationBarTitle({ title: '更多宝贝' })
          break
      }
    } else {
      switch (sts.value) {
        case 1:
          uni.setNavigationBarTitle({ title: '新品推荐' })
          break
        case 2:
          uni.setNavigationBarTitle({ title: '限时特惠' })
          break
        case 3:
          uni.setNavigationBarTitle({ title: '每日疯抢' })
          break
        case 4:
          uni.setNavigationBarTitle({ title: '优惠券活动商品' })
          break
        case 5:
          uni.setNavigationBarTitle({ title: '我的收藏商品' })
          break
        default:
          uni.setNavigationBarTitle({ title: title.value })
      }
    }

    // 加载商品数据
    loadProdData(options)
  })

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    // 如果当前页小于总页数，则增加页码并加载更多数据
    if (current.value < pages.value) {
      current.value++
      loadProdData()
    }
  })

  /**
   * 加载商品数据
   */
  const loadProdData = (options) => {
    const stsParam = sts.value

    // 根据stsParam的值调用不同的商品获取方法
    if (stsParam == 0) {
      // 分组标签商品列表
      getTagProd()
    } else if (stsParam == 1) {
      // 新品推荐
      const url = '/prod/lastedProdPage'
      getActProd(url)
    } else if (stsParam == 2) {
      // 限时特惠
      const url = '/prod/discountProdList'
      getActProd(url)
    } else if (stsParam == 3) {
      // 每日疯抢
      const url = '/prod/moreBuyProdList'
      getActProd(url)
    } else if (stsParam == 4) {
      // 优惠券商品列表
      getProdByCouponId(options.tagid)
    } else if (stsParam == 5) {
      // 收藏商品列表
      getCollectionProd()
    }
  }

  // 响应式变量用于存储商品列表
  const prodList = ref([])

  /**
   * 获取活动商品列表
   */
  const getActProd = (url) => {
    // 显示加载指示器
    uni.showLoading()

    // 发送HTTP请求获取商品数据
    http.request({
      url,
      method: 'GET',
      data: {
        current: current.value,
        size: size.value
      }
    }).then(({ data }) => {
      let list
      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
      if (data.current === 1) {
        list = data.records
      } else {
        list = prodList.value.concat(data.records)
      }
      // 更新商品列表和总页数
      prodList.value = list
      pages.value = data.pages
      // 隐藏加载指示器
      uni.hideLoading()
    })
  }

  /**
   * 获取我的收藏商品
   */
  const getCollectionProd = () => {
    // 显示加载指示器
    uni.showLoading()

    // 发送HTTP请求获取收藏商品数据
    http.request({
      url: '/p/user/collection/prods',
      method: 'GET',
      data: {
        current: current.value,
        size: size.value
      }
    }).then(({ data }) => {
      let list
      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
      if (data.current == 1) {
        list = data.records
      } else {
        list = prodList.value.concat(data.records)
      }
      // 更新商品列表和总页数
      prodList.value = list
      pages.value = data.pages
      // 隐藏加载指示器
      uni.hideLoading()
    })
  }

  /**
   * 获取标签商品列表
   */
  const getTagProd = () => {
    // 显示加载指示器
    uni.showLoading()

    // 发送HTTP请求获取标签商品数据
    http.request({
      url: '/prod/prodListByTagId',
      method: 'GET',
      data: {
        tagId: tagid.value,
        current: current.value,
        size: size.value
      }
    }).then(({ data }) => {
      let list
      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
      if (data.current === 1) {
        list = data.records
      } else {
        list = prodList.value.concat(data.records)
      }
      // 更新商品列表和总页数
      prodList.value = list
      pages.value = data.pages
      // 隐藏加载指示器
      uni.hideLoading()
    })
  }

  /**
   * 获取优惠券商品列表
   */
  const getProdByCouponId = (id) => {
    // 显示加载指示器
    uni.showLoading()

    // 发送HTTP请求获取优惠券商品数据
    http.request({
      url: '/coupon/prodListByCouponId',
      method: 'GET',
      data: {
        couponId: id,
        current: current.value,
        size: size.value
      }
    }).then(({ data }) => {
      let list
      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
      if (data.current === 1) {
        list = data.records
      } else {
        list = prodList.value.concat(data.records)
      }
      // 更新商品列表和总页数
      prodList.value = list
      pages.value = data.pages
      // 隐藏加载指示器
      uni.hideLoading()
    })
  }
</script>

<style scoped lang="scss">
  @use './prod-classify.scss'; /* 引入外部样式文件 */
</style>
