<template>
  <z-paging
    ref="pagingRef"
    v-model="prodPagePar"
    default-page-size="10"
    empty-view-text="暂无商品"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    :loading-more-custom-style="{'padding-bottom': '3.13rem', 'margin-top': '-40rpx'}"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="queryProdData"
    @list-change="listChange"
  >
    <view class="Mall4j shop-page">
      <view class="shop-prods">
        <!-- 头部 -->
        <shop-head
          ref="shopHeadRef"
          :shop-id="shopId"
          :is-products-page="true"
          :is-line-prods="isLineProds"
          :sort="sort"
          :search-key="searchKey"
          :nav-status="navStatus"
          @change-list-style="changeListStyle"
          @change-nav="changeNav"
          @clear-search-key="clearSearchKey"
        />

        <!-- 商品列表 -->
        <view
          class="prods-box add-bg"
          :class="{'add-bg' : !isLineProds}"
        >
          <view
            v-if="prodPage && prodPage.length > 0"
            :class="isLineProds ? 'line-prods' : 'prods'"
          >
            <!-- 横排展示 -->
            <block v-if="isLineProds">
              <view
                v-for="(prod,index) in prodPage"
                :key="index"
                class="item"
                @tap="toProdDetail(prod.spuId)"
              >
                <view class="img">
                  <img-show
                    :src="prod.mainImgUrl"
                    img-mode="aspectFit"
                  />
                </view>
                <view class="text-box">
                  <view class="name">
                    {{ prod.spuName }}
                  </view>
                  <view
                    v-if="prod.sellingPoint"
                    class="sku"
                  >
                    {{ prod.sellingPoint }}
                  </view>
                  <view
                    v-if="prod.spuActivity
                      && prod.spuActivity.discountList
                      && prod.spuActivity.discountList.length > 0
                      && prod.spuActivity.discountList[0].discountItemList.length > 0"
                    class="discount-box"
                  >
                    <view
                      v-if="prod.spuActivity.discountList[0].discountRule === 0"
                      class="discount"
                    >
                      满减钱
                    </view>
                    <view
                      v-if="prod.spuActivity.discountList[0].discountRule ===0"
                      class="coupons"
                    >
                      {{
                        '满' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].needAmount, 100, 3) +
                          '元减' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].discount, 100, 3) + '元'
                      }}
                    </view>
                    <view
                      v-if="prod.spuActivity.discountList[0].discountRule ===3"
                      class="discount"
                    >
                      满件折
                    </view>
                    <view
                      v-if="prod.spuActivity.discountList[0].discountRule ===3"
                      class="coupons"
                    >
                      {{
                        '满' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].needAmount, 100, 3) +
                          '件打' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].discount, 100, 3) + '折'
                      }}
                    </view>
                  </view>
                  <view class="price-box">
                    <view class="price">
                      <view class="symbol">
                        ￥
                      </view>
                      <view class="big">
                        {{ parsePrice(prod.priceFee)[0] }}
                      </view>
                      <view class="symbol">
                        .{{ parsePrice(prod.priceFee)[1] }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </block>

            <block v-else>
              <view
                v-for="(item,idx) in prodPageCol"
                :key="idx"
                class="col"
              >
                <view
                  v-for="(prod,index) in item"
                  :key="index"
                  class="item"
                  @tap="toProdDetail(prod.spuId)"
                >
                  <view class="img">
                    <img-show
                      :src="prod.mainImgUrl"
                      img-mode="aspectFit"
                    />
                  </view>
                  <view class="text-box">
                    <view class="name">
                      {{ prod.spuName }}
                    </view>
                    <view
                      v-if="prod.sellingPoint"
                      class="sku"
                    >
                      {{ prod.sellingPoint }}
                    </view>
                    <view
                      v-if="prod.spuActivity
                        && prod.spuActivity.discountList
                        && prod.spuActivity.discountList.length > 0
                        && prod.spuActivity.discountList[0].discountItemList.length > 0"
                      class="discount-box"
                    >
                      <view
                        v-if="prod.spuActivity.discountList[0].discountRule === 0"
                        class="discount"
                      >
                        满减钱
                      </view>
                      <view
                        v-if="prod.spuActivity.discountList[0].discountRule ===0"
                        class="coupons"
                      >
                        {{
                          '满' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].needAmount, 100, 3) +
                            '元减' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].discount, 100, 3) + '元'
                        }}
                      </view>
                      <view
                        v-if="prod.spuActivity.discountList[0].discountRule ===3"
                        class="discount"
                      >
                        满件折
                      </view>
                      <view
                        v-if="prod.spuActivity.discountList[0].discountRule ===3"
                        class="coupons"
                      >
                        {{
                          '满' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].needAmount, 100, 3) +
                            '件打' + util.accuracyCount(prod.spuActivity.discountList[0].discountItemList[0].discount, 100, 3) + '折'
                        }}
                      </view>
                    </view>
                    <view class="price-box">
                      <view class="price">
                        <view class="symbol">
                          ￥
                        </view>
                        <view class="big">
                          {{ parsePrice(prod.priceFee)[0] }}
                        </view>
                        <view class="symbol">
                          .{{ parsePrice(prod.priceFee)[1] }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 店铺tabbar -->
        <shop-tabbar
          style="position:fixed;bottom:0;width:100%;left:0;right:0;"
          :shop-id="shopId"
          current-tab="1"
        />
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import shopHead from '@/package-shop/components/shop-head/index.vue'
import util from '@/utils/util'

const isLoaded = ref(false) // 列表是否加载完毕

const prodPage = ref([]) // 商品列表
const prodPageCol = computed(() => {
  const list = [[], []]
  if (prodPage.value) {
    prodPage.value.forEach((item, index) => {
      if (index % 2 === 0) {
        list[0].push(item)
      } else {
        list[1].push(item)
      }
    })
  }
  return list
})

const shopId = ref(0)
const couponMsg = ref({})
const navStatus = ref(12)
const searchKey = ref('') // 搜索关键字
const sort = ref(12)
const couponId = ref('')
const shopSecondaryCategoryId = ref('') // 商家二级分类id
const searchCategoryName = ref('') // 商家二级分类名称
onLoad((options) => {
  // options = {...$Route.query}
  let keyword = ''
  // #ifndef MP-WEIXIN
  keyword = options.searchKey ? options.searchKey : ''
  // #endif
  // #ifdef MP-WEIXIN
  keyword = options.searchKey ? decodeURIComponent(decodeURIComponent(options.searchKey)) : ''
  // #endif
  // #ifdef APP-PLUS
  keyword = options.searchKey ? decodeURIComponent(options.searchKey) : ''
  // #endif
  searchKey.value = keyword
  const shopInfo = uni.getStorageSync('cloudShopInfo') || {}
  shopId.value = options.shopId || shopInfo.shopId
  uni.setStorageSync('cloudShopId', shopId.value)
  couponMsg.value = uni.getStorageSync('cloudCouponMsg') || {}
  navStatus.value = options.navStatus ? Number(options.navStatus) : 12
  sort.value = options.sort ? Number(options.sort) : 12
  couponId.value = options.couponId || ''
  shopSecondaryCategoryId.value = options.secondCategoryId || ''
  searchCategoryName.value = options.categoryName || ''
})

/**
 * 清空，重新请求商品列表
 */
const clearSearchKey = () => {
  searchKey.value = ''
  pagingRef.value.reload()
}

const prodPagePar = ref([])
const pagingRef = ref(null)
/**
 * 商品列表
 */
const queryProdData = (pageNum, pageSize) => {
  const url = couponId.value ? '/mall4cloud_marketing/ma/coupon/get_spus_by_coupon_id' : '/mall4cloud_search/ua/search/page'
  isLoaded.value = false
  http.request({
    url,
    method: 'GET',
    data: {
      shopId: shopId.value,
      pageNum,
      pageSize,
      sort: sort.value, // 排序：1新品,2销量倒序,3销量正序,4商品价格倒序,5商品价格正序,6评论
      keyword: searchKey.value,
      shopSecondaryCategoryId: shopSecondaryCategoryId.value,
      couponId: couponId.value, // 优惠券id
      needActivity: 1 // 是否需要活动信息 1：需要 0：不需要
    }
  }).then((res) => {
    res.list[0].spus.forEach((prod) => {
      prod.priceFee = util.accuracyCount(prod.priceFee, 100, 3)
      prod.marketPriceFee = util.accuracyCount(prod.priceFee, 100, 3)
    })
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list[0].spus)
  })
}

const listChange = (list) => {
  prodPage.value = list
}

/**
 * 改变nav
 * 排序：1-新品,2-销量倒序,3-销量正序,4-商品价格倒序,5-商品价格正序,6-评论(暂无评论)
 */
const changeNav = (nav, sortPar) => {
  sort.value = sortPar
  navStatus.value = nav
  pagingRef.value.reload()
}

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

const isLineProds = ref(true) // 列表格式，默认横排展示
// 切换列表样式
const changeListStyle = (isLineProdsPar) => {
  isLineProds.value = isLineProdsPar
}

/**
 * 价格处理
 */
const parsePrice = (value) => {
  let val = Number(value)
  if (!val) {
    val = 0
  }
  // 截取小数点后两位，并以小数点为切割点将val转化为数组
  return val.toFixed(2).split('.')
}

</script>

<style lang="scss" scoped>
@use "../shop-page";
</style>
