<template>
  <z-paging
    ref="pagingRef"
    v-model="discountList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="暂时没有活动哦"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetDiscountList"
  >
    <view class="Mall4j page-discount-list">
      <view class="top">
        <image src="/static/images/bannerBg.png" />
      </view>
      <!-- 促销活动 -->
      <view
        v-if="discountList.length"
        class="d-shops"
      >
        <block
          v-for="(discountItem, discountIndex) in discountList"
          :key="discountIndex"
        >
          <view
            v-if="endTimeList[discountIndex]?.flag"
            class="item"
            @tap="onToDiscountDet(discountItem.discountId)"
          >
            <view class="bg">
              <image :src="util.addDomain(discountItem.mobilePic)" />
            </view>
            <view class="text-box">
              <view class="discount-name">
                {{ discountItem.discountName }}
              </view>
              <view
                v-if="discountItem.shopName"
                class="shop-name"
              >
                <view class="text">
                  {{ discountItem.shopName }}
                </view>
                <view class="arrow">
                  <image src="@/package-activities/static/images/discount-arrow.png" />
                </view>
              </view>
              <view class="time-box">
                <view class="icon">
                  <image src="@/package-activities/static/images/time-icon.png" />
                </view>
                <view class="text">
                  仅剩
                </view>
                <view
                  v-if="endTimeList[discountIndex].day"
                  class="much"
                >
                  <view class="number">
                    {{ endTimeList[discountIndex].day }}
                  </view>
                  <view class="day">
                    天
                  </view>
                </view>
                <view
                  v-else
                  class="little"
                >
                  <view class="number">
                    {{ endTimeList[discountIndex].hour }}
                  </view>
                  <view class="colon">
                    :
                  </view>
                  <view class="number">
                    {{ endTimeList[discountIndex].min }}
                  </view>
                  <view class="colon">
                    :
                  </view>
                  <view class="number">
                    {{ endTimeList[discountIndex].second }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import util from '@/utils/util.js'
onShow(() => {
  onCountTime()
})

onHide(() => {
  clearTimeout(timer)
})

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

// 获取促销活动列表
const discountList = ref([])
const pagingRef = ref(null)
const endTimeList = ref([]) // 结束时间倒计时列表
const onGetDiscountList = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_marketing/ua/discount/list',
    method: 'GET',
    data: {
      pageNum,
      pageSize
    }
  }).then(res => {
    const tempDiscountList = [...discountList.value, ...res.list]
    const tempEndTimeList = []
    tempDiscountList.forEach(item => {
      tempEndTimeList.push({
        endTime: item.endTime
      })
    })
    endTimeList.value = tempEndTimeList
    onCountTime()
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}
// 倒计时
let timer = ''
const onCountTime = () => {
  endTimeList.value.forEach(item => {
    // 获取当前时间
    const date = new Date()
    const now = date.getTime() // 设置截止时间
    const end = util.dateToTimestamp(item.endTime) // 时间差
    const leftTime = end - now // 定义变量 d,h,m,s保存倒计时的时间
    if (leftTime >= 0) {
      // 天
      item.day = Math.floor(leftTime / 1000 / 60 / 60 / 24) // 时
      const h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
      item.hour = h < 10 ? '0' + h : h // 分
      const m = Math.floor(leftTime / 1000 / 60 % 60)
      item.min = m < 10 ? '0' + m : m // 秒
      const s = Math.floor(leftTime / 1000 % 60)
      item.second = s < 10 ? '0' + s : s
      item.flag = true
    } else {
      item.day = 0
      item.hour = '00'
      item.min = '00'
      item.second = '00'
      item.flag = false
    }
  })
  timer = setTimeout(onCountTime, 1000)
}

// 跳转活动详情
const onToDiscountDet = (discountId) => {
  uni.navigateTo({
    url: '/package-activities/pages/discount-detail/discount-detail?discountId=' + discountId
  })
}

</script>

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