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

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

    <container>
      <uv-grid
        :border="false"
        :col="2"
        :gutter="10"
      >
        <uv-grid-item
          v-for="(item, index) in dataList"
          :key="index"
        >
          <card style="margin-bottom: 10px;">
            <goods
              link
              card
              fill
              :data="item"
              :storeName="item.storeName"
              :price="item.price"
              :stock="item.stock"
            >
            </goods>
          </card>
        </uv-grid-item>
      </uv-grid>
    </container>
  </layout>
</template>

<script setup>

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

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

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

const onSearch = () => {
  console.log("--> % keyword:\n", keyword.value)
  refresh()
}

const onClickLeft = () => {

}

const onCancel = () => {

}


</script>

<style lang="less">
</style>
