<template>
	<view class="goods-list">
		<view class="goods-item" v-for="item in list" :key="item.id" @click="toDetail">
			<view class="goods-imgs">
				<view v-if="item.status == 1" class="goods-staus">已售罄</view>
				<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="item.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
			</view>
			<view class="name ellipsis-two">{{item.name}}</view>
			<view class="price">
				<view>
					<text>{{item.price}}</text>
					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
				</view>
				<view @click.stop="addCart" v-if="item.status == 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
			},
			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: {
			// 加入购物车
			addCart(e) {
				// 请求接口
				this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1 
			},
			// 商品详情
			toDetail(item){
				uni.navigateTo({
					url:"/pages/goods/goodsDetail?id="+item.id
				})
			}
		},
	}
</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 20upx 0;
			font-weight: bold;
		}
		.price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 20upx;
			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>
