<template>
  <layout>
    <uv-sticky customNavHeight="0">
      <uv-navbar
          :fixed="false"
          title="商品列表"
          left-arrow
          @leftClick="goBack"
      />
      <view class="search-bar">
        <uv-search
            v-model="keyword"
            shape="round"
            placeholder="搜索商品"
            show-action
            @custom="onSearch"
            @clear="onSearch"
            @search="onSearch"
            @cancel="onCancel"
        >
        </uv-search>
      </view>
    </uv-sticky>

    <blank size="15"></blank>

    <container>
      <template v-if="!listEmpty">
        <uv-grid
            :border="false"
            :col="1"
            :gutter="10"
        >
          <uv-grid-item
              v-for="(item, index) in dataList"
              :key="index"
          >
            <card class="pro-card">
              <goods
                  link
                  list
                  :data="item"
                  :storeName="item.storeName"
                  :price="item.price"
                  :stock="true"
              >
              </goods>
            </card>
          </uv-grid-item>
        </uv-grid>
      </template>
      <Empty
          v-else
          :iconSrc="emptyCollectIcon"
      >
        这里空空如也~
      </Empty>
      <!-- 加载中 -->
      <ListLoadLoading v-if="loading" />
      <!-- 加载完毕-->
      <ListLoadOver v-if="loadend" />
    </container>

  </layout>
  <ReturnTop :scroll-top="scrollTop" />

</template>

<script setup>

import { getProductList } from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import { usePage } from '@/hooks'
import { useRouter } from "@/hooks/useRouter";
import Empty from "@/components/Empty/index.vue"
import ListLoadOver from "@/components/ListLoadOver/index.vue"
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
import { emptyCollectIcon } from "@/utils/images";
import ReturnTop from "@/components/ReturnTop/index.vue"
import { useScroll } from "@/hooks/useScroll";

const {scrollTop} = useScroll()
const {getParams, goBack} = useRouter()
const {keyword, refresh, sid, couponId, dataList, loadend, loading, listEmpty} = usePage(getProductList)


onLoad((options) => {
  const params = getParams(options)
  keyword.value = params.keyword || ''
  sid.value = params.sid || ''
  couponId.value = params.couponId || ''
  refresh()
})

const onSearch = () => {
  console.log('点击搜索')
  refresh()
}

const onClickLeft = () => {

}

const onCancel = () => {

}


</script>

<style lang="scss">
.pro-card {
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  width: 100%;
}
</style>
