<template>
	<view class="content">
		<view class="info">该类商品需购满{{goldLimit}}乐豆才能下单哦！</view>
		<view v-if="goodsList.length">
			<uni-coods :list="goodsList"></uni-coods>
			<view class="loadmore"><u-loadmore @loadmore="loadmore" :status="status" /></view>
		</view>
		<!-- 购物车 -->
		<uni-cart-fix></uni-cart-fix>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from '@/api/goods.js'
	export default {
		data() {
			return {
				clsId: '',
				goldLimit:0,
				pageNo: 1,
				pageSize: 10,
				goodsList:[],
				status: 'loadmore',
				count: 0
			};
		},
		onLoad(opts) {
			console.log(opts)
			this.clsId = opts.goodsTypeNo
			this.goldLimit = opts.goldLimit
			this.getGoods()
		},
		methods: {
			// 查询商品
			getGoods(item,index){
				getGoodsList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					goodsTypeNo:this.clsId,
				}).then(res => {
					console.log(res,'goodsList')
					if(res.status == 200){
						this.count = res.data.count
						if(this.pageNo == 1){
							this.goodsList = res.data.list
							if(res.data.list.length == this.count){
								this.status = 'nomore'
							}else{
								this.status = 'loadmore'
							}
						}else{
							this.goodsList = this.goodsList.concat(res.data.list)
							this.goodsList.splice()
							this.status = 'loadmore'
						}
					}
				})
			},
			loadmore(){
				if(this.count <= this.goodsList.length) {
					this.status = 'nomore'
				}else{
					this.status = 'loading'
					this.pageNo = ++ this.pageNo
					this.getGoods()
				}
			}
		},
		onReachBottom() {
			this.loadmore()
		}
	}
</script>

<style lang="scss">
   .content {
	   width: 100%;
		.goods{
			padding: 20upx 0;
		}
		.goods-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20upx 20upx 0;
			background: #FFFFFF;
			>view{
				margin-bottom: 20upx;
			}
		}
		.info{
			text-align: center;
			color: #DD524D;
			margin-bottom: 20upx;
		}
		.loadmore{
			padding: 20upx 0;
		}
	}
</style>
