<template>
  <layout>
    <uv-sticky customNavHeight="0">
      <uv-navbar
        :fixed="false"
        :safeAreaInsetTop="true"
        autoBack
        title="新品首发"
      />
    </uv-sticky>
    <view class="swiper">

      <swiper
        class="swiper"
        circular
        indicator-dots
        autoplay
      >
        <swiper-item>
          <view class="swiper-item">
            <image
              class="image"
              src="@/static/images/banner.png"
              mode="widthFix"
            />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image
              class="image"
              src="@/static/images/banner.png"
              mode="widthFix"
            />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image
              class="image"
              src="@/static/images/banner.png"
              mode="widthFix"
            />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <blank size="15"></blank>
    <container min>
      <uv-grid
        :border="false"
        :column-num="2"
        :gutter="10"
      >
        <uv-grid-item v-for="(item, index) in dataList">
          <card>
            <goods
              link
              list
              :data="item"
              :storeName="item.storeName"
              :price="item.price"
              :stock="item.stock"
            >
            </goods>
          </card>

        </uv-grid-item>

      </uv-grid>
    </container>
    <blank size="15"></blank>

  </layout>
</template>


<script setup>

import { ref } from 'vue'
import { getProductList } from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import { usePage } from '@/hooks'

const { news, refresh, dataList } = usePage(getProductList)

onLoad((option) => {
  news.value = '1'
  console.log("--> % onLoad % option:\n", option)
  refresh()
})


const onClickLeft = () => {

}

const onCancel = () => {

}


</script>

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

  .image {
    width: 100%;
    display: block;
  }
}
</style>
