<template>
	<uv-sticky>
		<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
			<template v-slot:left>
				<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
			</template>
			<template v-slot:center>
				<text style="color:#ffffff">{{title}}</text>
			</template>
		</uv-navbar>
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search placeholder="搜索产品名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
				:show-action="false" @change="onSearch"></uv-search>
		</view>
	</uv-sticky>

	<view class="page-box">
		<view v-if="list.length > 0">
			<good-waterfall :list="list"></good-waterfall>
			<uv-load-more :status="listStatus"></uv-load-more>
		</view>
		<uv-empty text="暂无数据" v-else margin-top="50" mode="list"></uv-empty>
	</view>
</template>

<script setup>
	import goodWaterfall from './good-waterfall.vue'
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getProducts
	} from '@/api/business'
	import AddressSelect from '@/components/AddressSelect/index.vue'
	import {
		formatDateTime,
		prePage
	} from '@/utils/util'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	const main = useMainStore()
	const title = ref('产品')
	const keyword = ref('')
	const listStatus = ref('loadmore')
	const total = ref(-1)
	const page = ref(1)
	const list = ref([])


	// 页面数据
	const getProductList = async (isNextPage, pages) => {
		listStatus.value = 'loading'
		await getProducts({
			pageNo: page.value,
			pageSize: 8,
			storeName: keyword.value,
			isShow: 1
		}).then(res => {
			total.value = res.total
			if (page.value == 1) {
				list.value = res.list;
			} else {
				list.value = list.value.concat(res.list);
			}
			listStatus.value = 'loadmore'
		})
	}

	// 点击搜索
	const onSearch = () => {
		page.value = 1
		getProductList()
	}

	onReachBottom(() => {
		if (list.value.length < total.value) {
			page.value++;
			getProductList();
		} else {
			listStatus.value = 'nomore'
		}
	})

	onLoad(() => {
		getProductList()
	})
</script>

<style lang="scss" scoped>
	.page-box {
		padding: 20rpx 0 20rpx 0;
	}
</style>