<template>
  <z-paging
    ref="paging"
    v-model="prodListData"
    :default-page-size="10"
    :paging-style="{'top': '0','background': '#f2f3f7'}"
    @query="onGetProdList"
  >
    <view class="Mall4j page-tag-list">
      <!-- 优惠信息 -->
      <view
        class="coupon-msg-box"
        :class="{'pd' : !isLineProds}"
      >
        <view class="discount-msg">
          {{ tagTitle }}
        </view>
        <view
          v-if="prodListData && prodListData.length > 0"
          class="list-style"
          @tap="onChangeListStyle"
        >
          <image
            v-if="isLineProds"
            src="/static/images/list-row.png"
          />
          <image
            v-else
            src="/static/images/list-line.png"
          />
        </view>
      </view>

      <!-- 产品列表 -->
      <view
        v-if="prodListData && prodListData.length > 0"
        :class="[isLineProds ? 'line-prods' : 'prods']"
      >
        <view
          v-for="item in prodListData"
          :key="item.spuId"
          class="item"
          @tap="onToProdDetail(item.spuId)"
        >
          <view class="img">
            <!-- <image :src="item.mainImgUrl" /> -->
            <img-show :src="item.mainImgUrl" />
          </view>
          <view class="text-box">
            <view class="name">
              {{ item.spuName }}
            </view>
            <view class="sku">
              {{ item.sellingPoint }}
            </view>
            <view class="discount-box">
              <view
                v-if="item.spuActivity.discountList.length"
                class="discount"
              >
                {{ onDiscountTagText(item.spuActivity.discountList[0].discountRule) }}
              </view>
              <view
                v-if="item.spuActivity.couponList.length"
                class="coupons"
              >
                {{ onCouponTagText(item.spuActivity.couponList[0]) }}
              </view>
            </view>
            <view class="price-box">
              <view
                class="price"
              >
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(item.priceFee)[0] }}
                </view>
                <view class="symbol">
                  .{{ wxs.parsePrice(item.priceFee)[1] }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

const isLineProds = ref(true) // 列表格式，默认横排展示
const tagTitle = ref('') // 分组标题
const tagId = ref('') // 分组id
const prodListData = ref([])

onLoad((options) => {
  tagTitle.value = options.tTitle ? decodeURI(options.tTitle) : ''
  tagId.value = options.tId ? options.tId : ''
})

/**
 * 根据优惠券，获取可用的商品列表
 */
const paging = ref(null)
const onGetProdList = (pageNum, pageSize) => {
  const param = {
    url: '/mall4cloud_search/ua/search/search_page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      tagId: tagId.value,
      needActivity: 1
    }
  }
  http.request(param).then((res) => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    paging.value.complete(res.list[0].spus)
  })
}

/**
 * 满减折标签文字
 * @param {Number} discountRule 0 满钱减钱 3满件打折
 */
const onDiscountTagText = (discountRule) => {
  let result = ''
  if (discountRule === 0) {
    result = '满减钱'
  } else if (discountRule === 3) {
    result = '满件折'
  }
  return result
}

/**
 * 优惠券标签文字
 * @param {Object} couponInfo 优惠券信息
 */
const onCouponTagText = (couponInfo) => {
  let result = ''
  // couponType 1:代金券 2:折扣券 3:兑换券(目前没有)
  const couponType = couponInfo.couponType
  const cashCondition = couponInfo.cashCondition
  const reduceAmount = couponInfo.reduceAmount
  const couponDiscount = couponInfo.couponDiscount
  if (couponType === 1) {
    result = '满' + ((cashCondition / 100).toFixed(2)) + '减' + ((reduceAmount / 100).toFixed(2))
  } else if (couponType === 2) {
    result = '满' + ((cashCondition / 100).toFixed(2)) + '打' + couponDiscount + '折'
  }
  return result
}

// 切换列表样式
const onChangeListStyle = () => {
  isLineProds.value = !isLineProds.value
}

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

</script>

<style lang="scss" scoped>
@use "./tag-list.scss";
</style>
