<template>
	<view class="goods-list">
		<view class="goods-item" v-for="item in list" :key="item.id">
			<view class="goods-imgs"  @click="toDetail(item)">
				<view v-if="item.inventoryQty == 0&&item.state == 1" class="goods-staus">已售罄</view>
				<view v-if="item.state == 0" class="goods-staus">已下架</view>
				<u-lazy-load 
				img-mode="scaleToFill" 
				:height="imgHeight" 
				:image="item.homeImage+'?x-oss-process=image/resize,m_pad,h_252,w_325,color_ffffff'" 
				:loading-img="loadingImg" 
				:error-img="errorImg">
				</u-lazy-load>
			</view>
			<view class="name ellipsis-two" @click="toDetail(item)">{{item.name}}</view>
			<view class="price">
				<view>
					<text>{{item.sellGold}}</text>
					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
				</view>
				<view @click="addCart(item)" v-if="item.inventoryQty > 0">
					<u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgHeight: {
				type: Number,
				default: 250
			},
			goldLimit: {
				type: [Number,String],
				default: 0
			},
			list:{
				type: Array,
				default: function(){
					return []
				}
			}
		},
		data() {
			return {
				loadingImg: '/static/loading.gif',
				errorImg: '/static/imgError.png',
				timer: null,
				finger: {x:0,y:0},
				linePos: null,
			}
		},
		methods: {
			// 判断当前商品库存是否够
			hasZgKucun(data){
				let list = this.$store.state.vuex_cartList
				let row = list.find(item=> item.goodsTypeNo == data.goodsTypeNo)
				if(row){
					let good = row.shoppingCartGoodsList.find(item => item.goodsNo == data.goodsNo)
					return !good ? true : good.buyQty < data.inventoryQty
				}else{
					return true
				}
			},
			// 加入购物车
			addCart(item) {
				console.log('addCart0')
				if(this.hasZgKucun(item)){
					this.$bindClick(function(){
						console.log('addCart1')
						uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:1,time:new Date().getTime()})
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此商品库存不足'
					})
				}
			},
			// 商品详情
			toDetail(item){
				uni.navigateTo({
					url:"/pages/goods/goodsDetail?id="+item.id + "&goldLimit="+this.goldLimit
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.goods-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20upx;
	.goods-item{
		background: #FFFFFF;
		width: 48%;
		margin-bottom: 5upx;
		.goods-imgs{
			position: relative;
			border-radius: 28upx 28upx 0 0;
			overflow: hidden;
			.goods-staus{
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 100;
				border-radius: 15rpx 15rpx 0 0;
				background: rgba($color: #000000, $alpha: 0.4);
				text-align: center;
				line-height: 250rpx;
				left: 0;
				top: 0;
				color: #eee;
				font-size: 30upx;
				font-weight: bold;
			}
		}
		.name{
			padding: 10upx 0;
			font-weight: bold;
			font-size: 30rpx;
		}
		.price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 0;
			text{
				color: #d42a26;
				font-size: 36upx;
				margin-right: 6upx;
				font-weight: bold;
			}
			>view{
				&:first-child{
					font-size: 22upx;
					display: flex;
					align-items: center;
				}
				&:last-child{
					&:active{
						opacity: 0.5;
					}
				}
			}
		}
	}
}

</style>
