<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 v-if="item.inventoryQty > 0 && item.state == 1 ">
					<!-- <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image> -->
					<u-button size="mini" type="error" :custom-style="customStyle" @click="addCart(item)">
						+
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addGoodsToCart
	} from '@/api/shoppingCart.js'
	export default {
		props: {
			imgHeight: {
				type: Number,
				default: 250
			},
			goldLimit: {
				type: [Number,String],
				default: 0
			},
			list:{
				type: Array,
				default: function(){
					return []
				}
			}
		},
		data() {
			return {
				customStyle:{
					color: '#fff',
					borderRadius: '150rpx',
					border: 0,
					width: '50rpx',
					height: '50rpx',
					lineHeight: '50rpx',
					fontSize: '25px'
				},
				loadingImg: '/static/loading.gif',
				errorImg: '/static/imgError.png',
				timer: null,
				finger: {x:0,y:0},
				linePos: null,
			}
		},
		methods: {
			// 添加购物车
			addGoodToCart(item){
				uni.showLoading({
					mask: true,
					title: "正在加入购物车..."
				})
				addGoodsToCart(item).then(res => {
					if(res.status == 200){
						// 刷新购物车数量
						if(!item.hasCunzai){
							this.$store.state.vuex_cartNums = this.$store.state.vuex_cartNums + 1
						}
						setTimeout(()=>{
							uni.showToast({
								icon: 'none',
								title:'添加成功'
							})
							// 刷新购物车数据
							uni.$emit('getCartList')
						},50)
					}
				})
			},
			// 判断当前商品是否已存在购物车中
			hasCunzai(data){
				let list = this.$store.state.vuex_cartList
				let row = list.find(item=> item.goodsTypeNo == data.goodsTypeNo)
				return row
			},
			// 加入购物车
			addCart(item) {
				this.addGoodToCart({goodsNo:item.goodsNo,buyQty:1,hasCunzai:false})
			},
			// 商品详情
			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: 20upx;
		.goods-imgs{
			position: relative;
			border-radius: 28upx 28upx 0 0;
			border: 1px solid #eee;
			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;
			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>
