<template>
	<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="container">
		<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>
			<!-- <uv-icon name="/static/images/screen.png" :size="26" @click="openSearch"></uv-icon> -->
		</view>
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"  @scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="list.length > 0">
						<uv-checkbox-group>
							<view class="client" v-for="(item, index) in list" :key="index">							
								<view class="item">
									<view class="content flex-1">
										<image :src="item.image" style="width: 200rpx;height: 200rpx;"></image>
									</view>
									<view class="right ">
										<view class="title">名称：{{item.storeName}}</view>
										<view class="title">库存：{{item.stock}}</view>
										<view class="decimal">价格：{{item.price}}</view>
										<view class="decimal">添加时间: {{formatDateTime(item.createTime)}}</view>
									</view>
								</view>
							</view>
						</uv-checkbox-group>
						<uv-load-more :status="listStatus" ></uv-load-more>
					</block>
					<uv-empty text="暂无数据" v-else  margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {
  ref,
  unref,
  computed
} from 'vue'
import { onLoad,onShow,onReady } 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 selected = ref(false)
const priceShow = ref(false)
const oldScrollTop = ref(0)
const scrollTop = ref(-1)
const list = ref([])
const selectList = ref([])
const pH = ref(0)
const dx = ref(0)
const scrollHeight = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')
const status = ref('')


onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top
			}).exec()
		}
	})
})

onLoad((e) => {
})

onShow(()=>{
	getProductList()
})


// 页面数据
const getProductList = async(isNextPage,pages) => {
	await getProducts({
		pageNo: page.value,
		pageSize: pageSize.value,
		storeName:keyword.value,
		isShow: 1
	}).then(res => {
		if(res) {
			res.list.forEach((item,index)=>{
				//item.create_time = this.timeFormats(item.create_time)
				item.checked = false
				// 设置默认数据
				item.nums = 1
				item.remarks = ''
				selectList.value.forEach((i,index) => {
					if(i.id == item.id) {
						item.checked = true
					}
				})
			})
			if (res.list.length < 10) {
				listStatus.value = 'nomore'
			}
			if(res.list.length == 0) {
				lastPage.value = true
			} 
			// 第二页开始
			if(isNextPage) {
				list.value = list.value.concat(res.list)
				return 
			}
			list.value = res.list
		}
	})
}
// scroll 滚动记录
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop
}


// 滚动到底部
const reachBottom = () => {
	if(lastPage.value || listStatus.value == 'loading') return ;
	this.listStatus = 'loading'
	setTimeout(() => {
		if(lastPage.value) return ;
		getProductList(true,++page.value)
		if(list.value.length >= 10) {
			listStatus.value = 'loadmore'
		}else {
			listStatus.value = 'loading'	
		}	
	}, 1200)
}
// 点击搜索
const onSearch = () => {
	page.value = 1
	getProductList()
}


</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7;
	min-height: 100vh;
}
.page-box {
	padding: 20rpx 20rpx 160rpx;
}
.client {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.item {
		display: flex;
		align-items: center;
		margin: 20rpx 0 0;
		.content {
			font-size: 28rpx;
			.title {
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
			}
		}
		.right {
			color: #777;
			margin-left: 10rpx;
			.title {
				line-height: 50rpx;
			}
			.decimal {
				margin: 10rpx 0;
			}
			.number {
				//color: $uv-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;
		.client_time {
			color: #777;
			font-size: 26rpx;
		}
		.btn {
			line-height: 60rpx;
			width: 160rpx;
			border-radius: 5px;
			font-size: 26rpx;
			text-align: center;
			color: $uv-info-dark;
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}


</style>
