<template>
	<div class="hom-pro-list">
		<div class="title" v-if="false">
			<!-- #ifdef MP-WEIXIN -->
			<img class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix" />
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS -->
			<image class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix" />
			<!-- #endif -->
		</div>
		<div v-if="componentContent.arrangeType == '横向滑动' && productData.length > 2" class="product-list">
			<scroll-view ref="mySwiper" class="swiper product-list-box" scroll-x="true">
				<div class="swiper-wrap">
					<div class="product-list-item-warp" v-for="(item,index) in productData" :key="index">

						<div class="product-list-item"
							v-if="JSON.stringify(item)!=='{}' && componentContent.productStyleValue == '1'"
							@click="jumpProductDetail(item)">
							<div class="product-list-img">
								<img class="img pic-img default-img" :src="item.image"
									onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null">
							</div>
							<div class="product-list-info">
								<label class="product-name">{{ item.productName }}</label>
								<div class="flex">
									<div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
										<label class="shop-name">{{ item.shopName }}</label>
									</div>
									<label class="buy-count">已售{{ item.number ? item.number : 0 }}件</label>
								</div>
								<div class="price-warp">
									<!-- #ifdef MP-WEIXIN -->
									<img class="iconImg" v-if="item.activityType == 1"
										src="../../../static/images/groupBuyIcon.png">
									<img class="iconImg" v-if="item.activityType == 2"
										src="../../../static/images/spikeIcon.png">
									<img class="iconImg" v-if="item.activityType == 4"
										src="../../../static/images/spikeIcon.png">
									<img class="iconImg" v-if="item.activityType == 3"
										src="../../../static/images/discountListIcon.png">
									<img class="iconImg" v-if="item.activityType == 5"
										src="../../../static/images/discountListIcon.png">
									<img class="iconImg" v-if="item.activityType == 9"
										src="../../../static/images/memberCenterIcon.png">
									<img class="iconImg" v-if="item.activityType == 8"
										src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
									<!-- #endif -->
									<!-- #ifdef H5 || APP-PLUS -->
									<image class="iconImg" v-if="item.activityType == 1"
										src="../../../static/images/groupBuyIcon.png">
										<image class="iconImg" v-if="item.activityType == 2"
											src="../../../static/images/spikeIcon.png">
											<image class="iconImg" v-if="item.activityType == 4"
												src="../../../static/images/spikeIcon.png">
												<image class="iconImg" v-if="item.activityType == 3"
													src="../../../static/images/discountListIcon.png">
													<image class="iconImg" v-if="item.activityType == 5"
														src="../../../static/images/discountListIcon.png">
														<image class="iconImg" v-if="item.activityType == 9"
															src="../../../static/images/memberCenterIcon.png">
															<image class="iconImg" v-if="item.activityType == 8"
																src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
															<!-- #endif -->
																<div class="price">
																	¥ {{ item.price }}
																</div>
																<div class="original-price">
																	¥ {{ item.originalPrice }}
																</div>
								</div>
							</div>
						</div>

						<div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'">
							<div class="product-swiper-img">
								<img class="img pic-img default-img" :src="item.image"
									onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null">
							</div>
							<div class="product-swiper-info">
								<div class="product-info-content">
									<div class="product-name-row">
										<label class="product-name">{{ item.productName }}</label>
										<img class="product-star" src="../../../static/images/product/icon_star.png">

										<label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
									</div>
									<div class="product-price-row">
										<div class="price-warp">
											¥ {{ item.price }}
										</div>
										<img class="product-add" src="../../../static/images/product/icon_add.png">
									</div>

								</div>
							</div>
						</div>

						<div class="item3" v-if="componentContent.productStyleValue == '3'">
							<div class="item3_name">{{ item.productName }}</div>
							<div class="item3_image">
								<img :src="item.image" fit="contain"></img>
							</div>
							<div class="item3_btn_row">
								<div class="item3_btn">点击</div>
							</div>
						</div>

						<div class="item4" v-if="componentContent.productStyleValue == '4'">

							<div class="item4_content">
								<div class="item4_image">
									<img :src="item.image" fit="contain"></img>
								</div>
								<div class="item4_info">
									<div class="item4_name">{{ item.productName }}</div>
									<div class="item4_price">¥{{ item.price }}</div>
								</div>

								<div class="item4_arrow">
									<img src="../../../static/images/product/icon_right_arrow.png">
								</div>
							</div>

							<div class="item4_index_image" v-if="index < 3">
								<img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
								<img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
								<img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
							</div>
						</div>
						<!-- 自定义骨架屏 -->
						<div class="product-list-item ske-loading" v-if="JSON.stringify(item)==='{}'">
							<div class="product-list-img child-loading">

							</div>
							<div class="product-list-info">
								<label class="product-name child-loading"></label>
								<div class="price-warp child-loading" style="padding: 5px 0">
								</div>
								<div class="price-warp child-loading" style="padding: 5px 0">
								</div>
							</div>
						</div>
					</div>
				</div>
			</scroll-view>
			<!-- <view class="swiper-dots" v-if="productData && productData.length > 2" >
				<text class="dot" :class="index - swiperCurrent <= 1 && index - swiperCurrent >=0  && 'dot-active'"
					v-for="(dot, index) in productData.length" :key="index"></text>
			</view> -->
		</div>
		<div v-else class="product-list">
			<ProductSkeleton style="" v-if="isFirst" :loading="loading" :isFirst="isFirst" />
			<div class="product-list-box" v-else>
				<div class="product-list-item-warp" v-for="(item,index) in productData" :key="index">
					<div @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '1'"
						class="product-list-item">
						<div class="product-list-img">
							<img class="img pic-img default-img" :src="item.image"
								onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null">
						</div>
						<div class="product-list-info">
							<label class="product-name">{{ item.productName }}</label>
							<div class="flex">
								<div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
									<label class="shop-name">{{ item.shopName }}</label>
									<div class="shop-logo">
										<img :src="item.shopLogo">
									</div>
								</div>
								<label class="buy-count">已售{{ item.number ? item.number : 0 }}件</label>
							</div>
							<div class="price-warp">
								<!-- #ifdef MP-WEIXIN -->
								<img class="iconImg" v-if="item.activityType == 1"
									src="../../../static/images/groupBuyIcon.png" />
								<img class="iconImg" v-if="item.activityType == 2"
									src="../../../static/images/spikeIcon.png" />
								<img class="iconImg" v-if="item.activityType == 4"
									src="../../../static/images/spikeIcon.png" />
								<img class="iconImg" v-if="item.activityType == 3"
									src="../../../static/images/discountListIcon.png" />
								<img class="iconImg" v-if="item.activityType == 5"
									src="../../../static/images/discountListIcon.png" />
								<img class="iconImg" v-if="item.activityType == 9"
									src="../../../static/images/memberCenterIcon.png" />
								<img class="iconImg" v-if="item.activityType == 8"
									src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" />
								<!-- #endif -->
								<!-- #ifdef H5 || APP-PLUS -->
								<image class="iconImg" v-if="item.activityType == 1"
									src="../../../static/images/groupBuyIcon.png" />
								<image class="iconImg" v-if="item.activityType == 2"
									src="../../../static/images/spikeIcon.png" />
								<image class="iconImg" v-if="item.activityType == 4"
									src="../../../static/images/spikeIcon.png" />
								<image class="iconImg" v-if="item.activityType == 3"
									src="../../../static/images/discountListIcon.png" />
								<image class="iconImg" v-if="item.activityType == 5"
									src="../../../static/images/discountListIcon.png" />
								<image class="iconImg" v-if="item.activityType == 9"
									src="../../../static/images/memberCenterIcon.png" />
								<image class="iconImg" v-if="item.activityType == 8"
									src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" />
								<!-- #endif -->
								<div class="price">
									¥ {{ item.price }}
								</div>
								<div class="original-price">
									¥ {{ item.originalPrice }}
								</div>
							</div>
						</div>
					</div>

					<div class="product-swiper-item" @click="jumpProductDetail(item)"
						v-if="componentContent.productStyleValue == '2'">
						<div class="product-swiper-img">
							<img class="img pic-img default-img" :src="item.image"
								onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null">
						</div>
						<div class="product-swiper-info">
							<div class="product-info-content">
								<div class="product-name-row">
									<label class="product-name">{{ item.productName }}</label>
									<img class="product-star" src="../../../static/images/product/icon_star.png">

									<label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
								</div>
								<div class="product-price-row">
									<div class="price-warp">
										¥ {{ item.price }}
									</div>
									<img class="product-add" src="../../../static/images/product/icon_add.png">
								</div>

							</div>
						</div>
					</div>

					<div class="item3" @click="jumpProductDetail(item)"
						v-if="componentContent.productStyleValue == '3'">
						<div class="item3_name">{{ item.productName }}</div>
						<div class="item3_image">
							<img :src="item.image" fit="contain"></img>
						</div>
						<div class="item3_btn_row">
							<div class="item3_btn">点击</div>
						</div>
					</div>

					<div class="item4" @click="jumpProductDetail(item)"
						v-if="componentContent.productStyleValue == '4'">

						<div class="item4_content">
							<div class="item4_image">
								<img :src="item.image" fit="contain"></img>
							</div>
							<div class="item4_info">
								<div class="item4_name">{{ item.productName }}</div>
								<div class="item4_price">¥{{ item.price }}</div>
							</div>

							<div class="item4_arrow">
								<img src="../../../static/images/product/icon_right_arrow.png">
							</div>
						</div>

						<div class="item4_index_image" v-if="index < 3">
							<img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
							<img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
							<img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
						</div>
					</div>

				</div>
			</div>
		</div>
		<button v-show="componentContent.showMore" class="btn-more"
			@click="jumpProList(componentContent.productData)">查看全部 <span
				class="icon iconfont icon-arrow-right"></span></button>
	</div>
</template>

<script>
	import {
		commonMixin
	} from '../mixin'
	import ProductSkeleton from "@/components/basics/components/ProductSkeleton";
	export default {
		mixins: [commonMixin],
		components: {
			ProductSkeleton
		},
		data() {
			return {
				swiperCurrent: 0,
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hom-pro-list {
		padding: 20rpx 13rpx;

		.title {
			text-align: center;
			margin-bottom: 20rpx;

			.title-img {
				width: 211rpx;
			}
		}

		/**多行多列**/
		.product-list {
			position: relative;

			.product-list-box {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;

				&.swiper {
					height: 470upx;
				}
			}

			.swiper-wrap{
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding-left: 20upx;
				padding-right: 20upx;
			}

			&.product-swiper .product-list-box {
				padding-left: 0;
			}

			.product-list-item-warp {
				margin: 0 0 0upx 0;

				.product-list-item {
					width: 348rpx;
					padding: 0 7rpx;
					box-sizing: content-box;

					.product-list-img {
						width: 348rpx;
						height: 348rpx;
						background-color: white;
						border-radius: 10rpx 10rpx 0 0;

						.img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					.product-list-info {
						background-color: #FFFFFF;
						//box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
						border-radius: 0 0 10rpx 10rpx;
						padding: 20rpx;

						label {
							font-weight: normal;
						}

						.product-name {
							font-size: 28rpx;
							color: #333;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 18rpx;
							line-height: 40rpx;
						}

						.flex {
							display: flex;
							align-items: center;
						}

						.shop-box {
							background-color: #333333;
							border-radius: 0rpx 20rpx 20rpx 0rpx;
							line-height: 40rpx;
							display: flex;
							align-items: center;
							height: 40rpx;
							margin-right: 10rpx;

							.shop-name {
								font-size: 20rpx;
								color: #FFEBC4;
								padding: 0 8rpx 0 12rpx;
							}

							.shop-logo {
								border: 2rpx solid #707070;
								border-radius: 50%;
								overflow: hidden;
								float: right;

								img {
									width: 34rpx;
									height: 34rpx;
									display: block;
								}
							}
						}

						.buy-count {
							color: #C5AA7B;
							font-size: 20rpx;
							border: 2rpx solid #E4E5E6;
							line-height: 40rpx;
							padding: 0 5rpx;
						}

						.price-warp {
							display: flex;
							align-items: baseline;
							line-height: 56rpx;

							.iconImg {
								width: 58rpx;
								height: 36rpx;
								margin-right: 10rpx;
							}

							.price {
								color: #C83732;
								font-size: 40rpx;
								margin-right: 20rpx;
							}

							.original-price {
								font-size: 24rpx;
								color: #ccc;
								text-decoration: line-through;
							}
						}
					}

				}


				.product-swiper-item {
					height: 320px;
					width: 242px !important;
					position: relative;
					margin-left: 10px;
					margin-right: 10px;


					.product-swiper-img {
						width: 210px;
						height: 220px;
						margin-left: auto;
						margin-right: auto;
						background: #F6F6F8;
						border: 2px solid #FFFFFF;
						border-radius: 16px;
						position: relative;
						padding: 20px;
						z-index: 2;
						box-sizing: border-box;

						.img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					.product-swiper-info {
						width: 242px;
						height: 210px;
						position: absolute;
						top: 110px;
						background: #FDFDFD;
						box-shadow: 0px 16px 24px 0px #F6F6F6;
						border-radius: 16px;
						text-align: center;

						.product-info-content {
							margin-top: 125px;

							.product-name-row {
								width: 100%;
								height: 22px;
								line-height: 22px;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-content: center;
								justify-content: flex-start;
								align-items: center;

								.product-name {
									width: 100%;
									height: auto;
									font-size: 16px;
									font-family: Source Han Sans CN;
									font-weight: bold;
									color: #252744;
									display: block;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									line-height: 28upx;
									margin-left: 24upx;
									text-align: left;
								}

								.product-star {
									width: 22px;
									height: 22px;
								}

								.product-star-text {
									width: auto;
									height: 28upx;
									line-height: 28upx;
									font-size: 14px;
									font-family: Source Han Sans CN;
									font-weight: bold;
									color: #A5A5AD;
									margin-right: 20upx;
									margin-left: 5upx;
								}
							}

							.product-sku-row {
								width: 100%;
								height: 28upx;
								line-height: 28upx;
								margin-top: 15upx;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-content: center;
								justify-content: flex-start;
								align-items: center;

								.product-sku-name {
									font-size: 24px;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #90919C;
									margin-left: 30upx;
								}
							}

							.product-price-row {
								width: 100%;
								height: 50upx;
								line-height: 50upx;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-content: center;
								justify-content: space-between;
								align-items: center;
								margin-top: 10upx;

								.price-warp {
									display: flex;
									align-items: center;
									line-height: 28upx;
									margin-left: 24upx;
									justify-content: flex-start;
									width: auto;
									flex-direction: row;
									flex-wrap: nowrap;
									font-size: 14px;
									font-family: Source Han Sans CN;
									font-weight: bold;
									color: #252744;
								}

								.product-add {
									width: 50px;
									height: 50px;
									margin-right: 24px;
								}
							}


						}
					}
				}

				.item3 {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-content: center;
					justify-content: center;
					align-items: center;
					background: #F6F6F8;
					box-shadow: 0upx 12upx 24upx 0upx #EDEDED;
					border-radius: 24upx;
					border: 1upx solid #FFFFFF;
					width: 280upx;
					height: 430upx;
					margin: 10upx 20upx;

					.item3_name {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24upx;
						color: #252744;
						margin-top: 15upx;
					}

					.item3_image {
						margin: 15upx;
						width: 100%;

						padding: 10upx;
						box-sizing:border-box;

						img {
							width: 100%;
						}
					}

					.item3_btn_row {
						margin-bottom: 15upx;

						.item3_btn {
							background: #252744;
							border-radius: 24rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							padding-left: 30upx;
							padding-right: 30upx;
							padding-top: 8upx;
							padding-bottom: 10upx;
						}
					}
				}

				.item4 {
					width: 680upx;
					height: 210upx;
					margin: 10upx 20upx;
					background: #FDFDFD;
					box-shadow: 0upx 24upx 60upx 0upx #E5E5E5;
					border-radius: 16upx;
					position: relative;

					.item4_index_image {
						width: 50upx;
						height: 50upx;
						position: absolute;
						left: 26upx;
						z-index: 100;

						img {
							width: 100%;
						}
					}

					.item4_content {
						width: 100%;
						height: 100%;
						position: absolute;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-content: center;
						justify-content: space-between;
						align-items: center;

						.item4_image {
							width: 164upx;
							height: 164upx;
							background: #F6F6F7;
							border-radius: 8upx;
							margin: 24upx;

							img {
								width: 100%;
							}
						}

						.item4_info {
							height: 100%;
							padding-top: 46upx;
							padding-bottom: 46upx;
							flex: 1;
							display: flex;
							flex-direction: column;
							flex-wrap: nowrap;
							align-content: center;
							justify-content: space-between;
							align-items: flex-start;
							box-sizing:border-box;

							.item4_name {
								font-family: Microsoft YaHei;
								font-weight: bold;
								font-size: 28upx;
								color: #252744;
							}

							.item4_price {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28upx;
								color: #252744;
							}
						}

						.item4_arrow {
							width: 20upx;
							height: 20upx;
							margin: 24upx;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

				}
			}



			//::v-deep .swiper-pagination-bullet{
			//  display: none;
			//}
		}
	}

	//::v-deep .uni-swiper-dots{
	//  display: flex;
	//  justify-content: center;
	//  padding: 10rpx 0;
	//  .uni-swiper-dot{
	//    width: 10rpx;
	//    height: 10rpx;
	//    background: #333333;
	//    opacity: 0.3;
	//    border-radius: 5rpx;
	//    margin: 0 5rpx;
	//    &-active{
	//      width: 20rpx;
	//      height: 10rpx;
	//      opacity: 1;
	//    }
	//  }
	//}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 15rpx;
		z-index: 66;

		.dot {
			width: 10rpx;
			height: 10rpx;
			background: #333333;
			opacity: 0.3;
			border-radius: 5rpx;
			margin: 0 10rpx;
		}

		.dot-active {
			width: 20rpx;
			opacity: 1;
		}
	}

	//.pagination{
	//  display: flex;
	//  justify-content: center;
	//  padding: 20rpx 0;
	//  ::v-deep .swiper-pagination-bullet{
	//    width: 10rpx;
	//    height: 10rpx;
	//    background: #333333;
	//    opacity: 0.3;
	//    border-radius: 5rpx;
	//    margin: 0 5rpx;
	//  }
	//  ::v-deep .swiper-pagination-bullet-active{
	//    width: 20rpx;
	//    height: 10rpx;
	//    opacity: 1;
	//  }
	//}

	.btn-more {
		width: 170rpx;
		height: 54rpx;
		line-height: 54rpx;
		border: 2rpx solid #C5AA7B;
		color: #C5AA7B;
		font-size: 24rpx;
		background-color: transparent;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;
	}
</style>
