<template>
	<view class="drawCommodity">
		<view class="title" v-if="goodItem.plugin != 'store'">
			<image v-if="goodItem.storelogo" :src="goodItem.storelogo" mode=""></image>
			<view class="title-text dis-flex">
				<view class="t-c">
					{{goodItem.storename}}
				</view>
				<view class="t-r flex-box" style="font-weight: 500;font-size: 22upx;color: #ff4444;">
					{{goodItem.distance}}
				</view>
			</view>
		</view>
		<view class="commodityDetails">
			<view class="detailsImg">
				<image :src="goodItem.thumb" mode=""></image>
				<view class="tags">
					{{goodItem.pluginName}}
				</view>
			</view>
			<view>
				<view class="productName" :style="{marginBottom:goodItem.plugin == 'store'?'20rpx':'60rpx'}">
					<view class="t-l name">
						{{goodItem.name}}
					</view>
					
				</view>
				<view class="t-r" style="font-weight: 500;font-size: 24upx;color: #ff4444;"  v-if="goodItem.plugin == 'store'">
					{{goodItem.distance}}
				</view>
				<view class="shopingNum">
					<!-- {{goodItem.gid}}人购买 -->
				</view>
				<view class="priceButton">
					<view class="dis-flex" style="width: 100%;" v-if="goodItem.plugin != 'store'">
						<view class="flex-box col-f4" >
							<text class="f-24" v-if="goodItem.price">¥</text>
							<text class="f-36 f-w" v-if="goodItem.price">{{goodItem.price}}</text>
						</view>
						<view class="shopingButton" @click="goGoods">
							购买获得抽奖码
						</view>
					</view>
					<view class="dis-flex" style="width: 100%;justify-content: flex-end;" v-else>
							<view class="t-r flex-box" style="font-weight: 500;font-size: 24upx;color: #ff4444;width: 200upx;"  v-if="goodItem.plugin == 'store'">
								<!-- {{goodItem.distance}} -->
							</view>
						<view class="storeButton" style="background-color: #F1C426;" v-if="goodItem.payurl" @click="goGoodpay">
							买单
						</view>
						<view class="storeButton" style="margin-right: 0;" @click="goGoodStore" v-if="goodItem.deliveurl">
							商城
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goGoodStore(){
				let _this = this;
				App.navigationTo({
					url: 'pages/subPages2/businessCenter/foodList/foodList?id=' + _this.goodItem.gid  + '&storeid=' + _this.goodItem.gid 
				});
			},
			goGoodpay(){
				let _this = this;
				let mid = uni.getStorageSync('userinfo').mid;
				App.navigationTo({
					url: 'pages/subPages2/newBuyOrder/buyOrder?sid=' + _this.goodItem.gid + '&mid=' + mid
				});
			},
			goGoods(){
				let _this = this;
				App.navigationTo({
					url: _this.goodItem.url
				});
			},
		},
		props:{
			goodItem: {
				type: Object,
				default: {}
			},
		}
	}
</script>

<style scoped lang="scss">
	.drawCommodity{
		margin-bottom: 20upx;
		position: relative;
		padding: 20upx;
		background-color: #F8F8F8;
		border-radius: 20upx;
		.title{
			display: flex;
			margin-bottom: 20upx;
			image{
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
			}
			.title-text{
				flex: 1;
				height: 40upx;
				line-height: 40upx;
				font-size: 24upx;
				font-weight: bold;
				margin-left: 10upx;
			}
		}
		.commodityDetails{
			// position: relative;
			display: flex;
			// margin-top: 20upx;
			.detailsImg{
				position: relative;
				image{
					width: 180upx;
					height: 180upx;
					border-radius: 10upx;
					margin-right: 20upx;
				}
				.tags{
					width: 70upx;
					height: 34upx;
					line-height: 34upx;
					text-align: center;
					font-size: 24upx;
					color: #E3A815;
					background: linear-gradient(130deg, #FEDB58 0%, #FBC84A 100%);
					opacity: 1;
					border-radius: 10upx 0upx 10upx 0upx;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
			
			.productName{
				
				font-size: 28upx;
				font-weight: bold;
				// overflow:hidden;
				// text-overflow:ellipsis;
				// -o-text-overflow:ellipsis;
				// white-space:nowrap;
				margin-bottom: 60upx;
				.name{
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					overflow: hidden;
					// width: 270upx;
					height: 72upx;
				}
			}
			.shopingNum{
				font-size: 24upx;
				color: #999999;
				margin-bottom: 10upx;
			}
			.priceButton{
				width:380upx;
				display: flex;
				.shopingButton{
					width: 200upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					color: #FFFFFF;
					font-size: 24upx;
					background-color: #FF4444;
					border-radius: 10upx;
				}
				.storeButton{
					// max-width: 120upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					color: #FFFFFF;
					font-size: 24upx;
					background-color: #FF4444;
					border-radius: 10upx;
					flex: 1;
					margin: 0upx 10upx;
				}
			}
		}
	}
</style>
