<template>
  <layout>
    <uv-sticky customNavHeight="0">
      <uv-navbar
          :fixed="false"
          :safeAreaInsetTop="true"
          autoBack
          title="拼团专区"
      />
    </uv-sticky>
    <view class="swiper">
      <image
          class="image"
          :src="groupBuyBg"
          mode="widthFix" />
    </view>

    <view
        class="product-box"
        v-if="!listEmpty"
    >
      <template
          v-for="(item,index) in dataList"
          :key="item.id"
      >
        <view
            class="product-item"
            :class="index === 0 && 'isFirst'">
          <goods
              link
              :hasFirst="index === 0"
              :data="item"
              :price="item.price"
              :original="true"
              :groupBuy="true"
          >
          </goods>
        </view>
      </template>
    </view>
    <Empty
        v-else
        :iconSrc="emptyCollectIcon"
    >
      这里空空如也~
    </Empty>
    <!-- 加载中 -->
    <ListLoadLoading v-if="loading" />
    <!-- 加载完毕-->
    <ListLoadOver v-if="loadend" />
  </layout>
</template>


<script setup>
import { ref } from 'vue'
import { getActivityProList } from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import ListLoadOver from "@/components/ListLoadOver/index.vue";
import ListLoadLoading from "@/components/ListLoadLoading/index.vue";
import { emptyCollectIcon, groupBuyBg } from "@/utils/images";
import Empty from "@/components/Empty/index.vue";
import { useActivity } from '@/hooks/useActivity'
import Goods from "@/components/goods/goods.vue";

const {refresh, dataList, loading, loadend, listEmpty, otherQuery} = useActivity(getActivityProList)

const activeTime = ref(0)
const times = ref([{
  time: '15:00',
  status: 0,
  countdown: ''
}, {
  time: '16:00',
  status: 1,
  countdown: 99999
}, {
  time: '17:00',
  status: 2,
  countdown: ''
}, {
  time: '18:00',
  status: 2,
  countdown: ''
}, {
  time: '19:00',
  status: 2,
  countdown: ''
}])

onLoad(async (option) => {
  otherQuery.value = {
    type: 1
  }
  await refresh()
})

const timeChange = (item) => {
  activeTime.value = item.index
}

</script>

<style lang="scss">
.swiper {
  width: 100%;

  .image {
    width: 100%;
    display: block;
  }
}

.product-box {
  margin-top: -210rpx;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;

  .product-item {
    background: #FFFFFF;
    width: calc((100% - 20rpx) / 2);
    margin-bottom: 20rpx;
    border-radius: 15rpx;

    &.isFirst {
      width: 100%;
    }
  }
}
</style>
