<template>
	<view class="citydeliveryGoods">
		<view class="style-one" v-if="goodItem.id == 'citydelivery_goods'">
			<view class="dis-flex">
				<view class="f-36 f-w flex-box">{{ goodItem.params.title }}</view>
				<view class="col-9 f-24 flex-box t-r" style="line-height: 48upx;" v-if="goodItem.params.show_more == 1">
					<text @click="openAllGoods(false)" >更多</text>
					<text class="iconfont icon-right" style="font-size: 24upx;"></text>
				</view>
			</view>
			<view class="goods-box">
				<view class="goods-item" v-for="(item, index) in goodItem.data" @click="openGoods(item.id)">
					<image :src="item.logo" mode=""></image>
					<view style="padding: 10upx;box-sizing: border-box;width: 202upx;">
						<view class="f-28 col-3 f-w goods-title">{{ item.goods_name }}</view>
						<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view>
						<view >
							<text class="f-20 c-ff4444 f-w">¥</text>
							<text class="f-32 c-ff4444 f-w">{{ item.price }}</text>
						</view>
						<view class="shop-btn">购</view>
					</view>
				</view>
			</view>
		</view>
		<view class="style-two" @click="openAllGoods(goodItem.style.link)" v-if="goodItem.id == 'citydelivery_goods2'"
			:style="'background-image: url(' + goodItem.style.top_image + ');background-size: 100% 130px;background-repeat: no-repeat;' " >
			<view class="col-9 f-24 t-r" style="line-height: 200upx;padding: 0 10upx;">
				<view style="height: 200upx;">
					
				</view>
				<!-- <text @click="openAllGoods(goodItem.style.link)">更多</text> -->
				<!-- <text class="iconfont icon-right" style="font-size: 24upx;"></text> -->
			</view>
			<view class="dis-flex goodsTwoBox">
				<view class="goodsTwoItem" v-for="(item, index) in goodItem.data" :key="index" @click="openGoods(item.id)">
					<image :src="item.logo" mode=""></image>
					<view class="content">
						<view class="f-24 col-3 f-w goods-title">{{ item.goods_name }}</view>
						<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view>
						<view class="price-box">
							<text class="f-20 f-w c-ff4444">¥</text>
							<text class="f-28 f-w c-ff4444">{{ item.price }}</text>
							<view class="goodsBtn"><view class="shop-btn">购</view></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="style-two" v-if="goodItem.id == 'citydelivery_goods3'"
			:style="'background-image: url(' + goodItem.style.top_image + ');background-size: 100% 130px;background-repeat: no-repeat;' " >
			<view class="col-9 f-24 t-r" style="line-height: 140upx;padding: 0 10upx;">
				<text @click="openAllGoods(goodItem.style.link)">更多</text>
				<text class="iconfont icon-right" style="font-size: 24upx;"></text>
			</view>
			<view class="goodsTwoBox">
				<view class="goodsThreeItem dis-flex" v-for="(item, index) in goodItem.data" :key="index" @click="openGoods(item.id)">
					<view class="img">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="content">
						<view class="col-3 f-32 f-w m-btm20 name">
							{{item.goods_name}}
						</view>
						<view class="f-24 col-9">
							销量：{{ item.buy_num }}
						</view>
						<view class="f-36 c-ff4444">
							<text class="f-24">¥</text>
							<text>{{ item.price }}</text>
						</view>
						<view class="content-btn">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="style-four" v-if="goodItem.id == 'citydelivery_goods4'">
			<view class="four-item" @click="openAllGoods(goodItem.style.link)">
				<image :src="goodItem.style.top_image" mode="" style="width: 100%;height: 100%;border-radius: 10upx;"></image>
			</view>
			<view class="four-item" v-for="(item,index) in goodItem.data" :key="index"  @click="openGoods(item.id)">
				<image :src="item.logo" mode=""></image>
				<view style="padding: 10upx 10upx;box-sizing: border-box;width: 202upx;">
					<view class="f-28 col-3 f-w goods-title">{{ item.goods_name }}</view>
					<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view>
					<view >
						<text class="f-20 c-ff4444 f-w">¥</text>
						<text class="f-32 c-ff4444 f-w">{{ item.price }}</text>
					</view>
					<view class="shop-btn">购</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
export default {
	data() {
		return {};
	},
	props: {
		goodItem: {
			type: Object,
			default: {}
		}
	},
	methods: {
		openGoods(id) {
			App.navigationTo({
				url: `pages/subPages2/businessCenter/foodIntroduced/foodIntroduced?id=${id}`
			});
		},
		openAllGoods(url) {
			// debugger
			if (url) {
				App.navigationTo({
					url:url
				});
			}else{
				App.navigationTo({
					url: `pages/subPages2/businessCenter/businessCenter`
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.style-one {
	.goods-box {
		display: flex;
		padding-top: 30upx;
		overflow: auto;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-item {
			border: 1upx solid #eeeeee;
			background-color: #ffffff;
			width: 400upx;
			border-radius: 10upx;
			// height: 100upx;
			flex: 0 0 30%;
			// margin-right: 20upx;
			position: relative;
			margin-bottom: 20upx;
			image {
				width: 200upx;
				height: 200upx;
				border-radius: 10upx;
			}

			.goods-title {
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				overflow: hidden;
			}
			.shop-btn {
				width: 50upx;
				height: 50upx;
				border-radius: 10upx;
				background-color: #ff4444;
				color: #ffffff;
				font-size: 30upx;
				font-weight: 700;
				text-align: center;
				line-height: 50upx;
				position: absolute;
				right: 10upx;
				bottom: 10upx;
			}
		}
	}

	.goods-box::after {
		content: '';
		flex: 0 0 32%; /* 或者flex: 1 */
	}
}
.style-four{
	display: flex;
	overflow: auto hidden;
	.four-item{
		flex: 0 0 31.5%;
		height: 380upx;
		border-radius: 10upx;
		margin-right: 20upx;
		position: relative;
		background-color: #FFFFFF;
		image{
			width: 100%;
			height: 216upx;
			border-radius: 10upx;
		}
		.goods-title {
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
			overflow: hidden;
		}
		.shop-btn {
			width: 50upx;
			height: 50upx;
			border-radius: 10upx;
			background-color: #ff4444;
			color: #ffffff;
			font-size: 30upx;
			font-weight: 700;
			text-align: center;
			line-height: 50upx;
			position: absolute;
			right: 10upx;
			bottom: 10upx;
		}
	}
}
.style-two {
	width: 100%;
	min-height: 100px;
	.goodsTwoBox {
		overflow: auto;
		padding: 0 20upx 20upx;
		.goodsTwoItem {
			flex: 0 0 182upx;
			background-color: #ffffff;
			border: 1upx solid #eeeeee;
			border-radius: 10upx;
			margin-right: 20upx;
			box-sizing: 10upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 150upx;
				box-sizing: 10upx;
			}
			.content {
				padding: 0 10upx;
				box-sizing: border-box;
			}
			.goods-title {
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				overflow: hidden;
			}
			.price-box {
				background: #fff2f2;
				margin: 0 0upx;
				height: 42upx;
				line-height: 34upx;
				position: relative;
				margin-bottom: 10upx;
				padding-left: 10upx;
				.goodsBtn {
					position: absolute;
					width: 66upx;
					height: 66upx;
					border-radius: 50%;
					background-color: #ffffff;
					right: -10upx;
					top: -10upx;
				}
				.shop-btn {
					position: absolute;
					left: 30upx;
					top: 6upx;
					transform: translate(-50%);
					height: 46upx;
					width: 46upx;
					border-radius: 50%;
					background-color: #ff4444;
					line-height: 46upx;
					font-size: 26upx;
					text-align: center;
					color: #ffffff;
					font-weight: 600;
				}
			}
		}
		.goodsThreeItem{
			padding: 20upx;
			border: 1upx solid #EEEEEE;
			background-color: #FFFFFF;
			border-radius: 10upx;
			margin-bottom: 20upx;
			.img{
				flex: 0.38;
				image{
					width: 100%;
					height: 230upx;
					border-radius: 10upx;
				}
			}
			.content{
				flex: 0.62;
				padding-left: 20upx;
				.name{
					font-size: 30upx;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					overflow: hidden;
				}
				.content-btn{
					width: 140upx;
					height: 50upx;
					line-height: 50upx;
					border-radius: 10upx;
					background-color: #FF4444;
					color: #FFFFFF;
					font-size: 26upx;
					font-weight: 400;
					text-align: center;
					// margin-top: 34upx;
				}
			}
		}
	}
}
</style>
