<template>
  <z-paging
    ref="paging"
    v-model="couponProd"
    :refresher-enabled="false"
    :auto-scroll-to-top-when-reload="false"
    :auto-clean-list-when-reload="false"
    :paging-style="{'top': '0','background': '#f2f3f7'}"
    empty-view-text="该优惠活动下暂无商品"
    empty-view-img="/static/empty-img/coupon-empty.png"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetProdByCouponId"
  >
    <view class="Mall4j page-coupon-products">
      <!-- 搜索框 -->
      <view
        v-if="isShow"
        class="search-top"
      >
        <view class="search-box">
          <view class="icon">
            <image src="/static/images/search.png" />
          </view>
          <input
            placeholder="输入关键字搜索"
            class="input"
          >
        </view>
        <view
          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="isShow"
        class="sortbar"
      >
        <view class="item active">
          默认
        </view>
        <view class="item arrow-up">
          销量
        </view>
        <view class="item arrow-down">
          价格
        </view>
      </view>

      <!-- 优惠信息 -->
      <view
        class="coupon-msg-box"
        :class="{'pd' : !isLineProds}"
      >
        <view
          v-if="couponMsg.couponType === 1"
          class="discount-msg"
          :class="{'pd' : !isLineProds}"
        >
          优惠专享：以下商品可使用满{{ couponMsg.cashCondition }}元减{{ couponMsg.reduceAmount }}元的优惠券
        </view>
        <view
          v-if="couponMsg.couponType === 2"
          class="discount-msg"
          :class="{'pd' : !isLineProds}"
        >
          优惠专享：以下商品可使用满{{ couponMsg.cashCondition }}元打{{ couponMsg.couponDiscount }}折的优惠券
        </view>
        <view
          v-if="couponProd.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="couponProd && couponProd.length > 0"
        :class="[isLineProds ? 'line-prods' : 'prods']"
      >
        <view
          v-for="(item,index) in couponProd"
          :key="item.spuId"
          class="item"
          @tap="onToProdDetail(item.spuId)"
        >
          <view class="img">
            <image
              v-if="item.mainImgUrl"
              :src="util.addDomain(item.mainImgUrl)"
              @error="onHandlePicError(index)"
            />
            <image
              v-else
              src="../../static/images/def.png"
            />
          </view>
          <view class="text-box">
            <view class="name">
              {{ item.spuName }}
            </view>
            <view class="sku">
              {{ item.sellingPoint || '' }}
            </view>
            <view class="discount-box">
              <view
                v-if="couponMsg.couponType"
                class="discount"
              >
                {{ couponMsg.couponType === 1 ? '满减钱' : couponMsg.couponType === 2 ? '满减折' : '' }}
              </view>
              <view
                v-if="couponMsg.couponType === 1"
                class="coupons"
              >
                满{{ couponMsg.cashCondition }}元减{{ couponMsg.reduceAmount }}元
              </view>
              <view
                v-if="couponMsg.couponType === 2"
                class="coupons"
              >
                满{{ couponMsg.cashCondition }}元享{{ couponMsg.couponDiscount }}折
              </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>
import util from '@/utils/util.js'

const wxs = number()
const isShow = ref(false)
const isLineProds = ref(true) // 列表格式，默认横排展示
// 查询的参数
const couponId = ref(0)
const couponProd = ref([])
const couponMsg = ref({}) // 优惠券信息

onLoad((options) => {
  couponId.value = options.couponId || 0
  couponMsg.value = uni.getStorageSync('cloudCouponMsg') || {}
})

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

/**
 * 根据优惠券，获取可用的商品列表
 */
const paging = ref(null)
const onGetProdByCouponId = (pageNum, pageSize) => {
  uni.showLoading()
  const params = {
    url: '/mall4cloud_marketing/ma/coupon/get_spus_by_coupon_id',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      couponId: couponId.value
    }
  }
  http.request(params).then(data => {
    uni.hideLoading()
    paging.value.complete(data.list[0].spus)
  })
}

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

/**
 * 图片加载错误时更换默认图片
 */
const onHandlePicError = (index) => {
  couponProd.value[index].mainImgUrl = '../../static/images/def.png'
}

</script>

<style lang="scss" scoped>
@use "./coupon-products.scss";
</style>
