<script setup>
	/**
	 * 客服聊天界面商品列表
	 */
	import {
		reactive,
		defineExpose,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'

	import {
		onLoad
	} from "@dcloudio/uni-app"

	// 参数
	const listPrototype = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0,
		merId: '',
		data: [],
	})

	onLoad(option => {
		getList(option)
	})

	/**
	 * 点击列表项
	 * @param {Object} item 列表项
	 */
	function handleItem(item) {
		// 
		uni.navigateTo({
			url: util.setUrl('/pages/shop/commodity/index', {
				productId: item.id
			})
		})
	}

	// 重载列表
	function refreshList() {
		listPrototype.pageNum = 1
		listPrototype.total = 0
		getList()
	}

	// 加载更多列表
	function getMoreList() {
		console.log('getMoreList', listPrototype)
		if (listPrototype.total <= listPrototype.data.length) return
		listPrototype.pageNum++
		getList()
	}

	// 获取商品
	function getList(option) {
		let param = {
			pageSize: listPrototype.pageSize,
			pageNum: listPrototype.pageNum,
			merId: option.merId
		}
		api.shop.getShopProductList(param).then(rs => {
			if (rs.code == 200) {
				if (listPrototype.pageNum == 1) listPrototype.data.length = []
				listPrototype.data.push(...rs.rows)
				listPrototype.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(rs => {
			uni.stopPullDownRefresh()
		})
	}

	// 发送商品给客服
	function sendProduct(item) {
		console.log('发送商品', item);
	}

	defineExpose({
		getList,
		listPrototype,
		refreshList,
		getMoreList,
	})
</script>

<template>
	<view class="list">
		<view class="product line df ptb20 plr20" v-for="(item, index) in listPrototype.data" :key="index"
			@click="handleItem(item)">

			<view class="poster wh160">
				<image class="wh160 br10" :src="item.sliderImage.split(',')[0]" mode="aspectFill" />
			</view>

			<view class="info df fdc jcsb f1 ml20">
				<view class="name t2hd c333 f28">{{ item.name }}</view>

				<view class="other rows">
					<view class="col c333">
						<text class="f20">￥</text>
						<text class="f30">{{ item.price }}</text>
						<text class="count ml20 fs0 c999 f24">销量：{{ item.sales }}</text>
					</view>
					<view @click.stop="sendProduct(item)" class="btn ti warmHollow plr20">去咨询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss"></style>