<template>
	<view class="goods-item">
		<view class="goods-imgs">
			<view v-if="data.status == 1" class="goods-staus">已售罄</view>
			<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
		</view>
		<view class="name">{{data.name}}</view>
		<view class="price">
			<view><text>{{data.price}}</text>乐豆</view>
			<view><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgHeight: {
				type: Number,
				default: 250
			},
			data:{
				type: Object,
				default: function(){
					return {}
				}
			}
		},
		data() {
			return {
				loadingImg: '/static/loading.gif',
				errorImg: '/static/imgError.png'
			}
		}
	}
</script>

<style lang="scss">
.goods-item{
	background: #FFFFFF;
	box-shadow: 1px 1px 3px #eee;
	width: 48%;
	margin-bottom: 35upx;
	border-radius: 10upx;
	.goods-imgs{
		position: relative;
		.goods-staus{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			z-index: 10000;
			border-radius: 100%;
			background: rgba($color: #000000, $alpha: 0.5);
			text-align: center;
			line-height: 120rpx;
			left: 50%;
			top: 50%;
			margin-top: -60rpx;
			margin-left: -60rpx;
			color: #eee;
		}
	}
	.name{
		padding: 10upx 20upx 0;
	}
	.price{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15upx 20upx;
		text{
			color: red;
			font-size: 36upx;
			margin-right: 6upx;
		}
		>view{
			&:first-child{
				font-size: 22upx;
			}
		}
	}
}
</style>
