<template>
	<div class="hom-pro-list">
		<!-- <div style="position: fixed;right:0;bottom: 200rpx;z-index: 10;" @click="kefu">
			<img class="title-img" src="../../../static/images/product/kefu.png" alt="客服" mode="aspectFit"
				style="height: 80rpx;" />
		</div> -->
		
		<div style="background-color: #fff;padding: 20rpx 20rpx;">
			<div style="display: flex;padding: 10rpx;flex-wrap: wrap;">
				<div @click="goList"><img src="../../../static/images/product/zxtz.png" alt="" style="width: 60rpx;height: 60rpx;"/></div>
				<div style="display: flex;width: 90%;height: 30rpx;flex-wrap: wrap;position: relative;" class="tongzhi"> 
					<div style="width: 100%;display: flex;flex-wrap: wrap;margin-bottom: 5rpx;" @click="gonggao(item)" v-for="(item,index) in gongList">
								<div style="padding: 2rpx 10rpx;color: #18B663;border: 1px solid #18B663; width: 40rpx;border-radius: 10rpx;font-size: 20rpx;margin: 0 14rpx 0 30rpx;">通知</div>
				 <div style="width:80%;font-size: 24rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: #424242;">
					 {{item.announcementTitle}}
				 </div>
				 </div>
				 </div>
			</div>
		</div>
		<div style="width: 100%; overflow-x: auto;margin-top:10px; ">
			<div class="title">
				<!-- #ifdef MP-WEIXIN -->
				<img class="title-img" src="../../../static/images/product/img-title1.png" alt="热门商品" mode="aspectFit"
					style="height: 32rpx;" />
				<div style="color: #9E9E9E; font-size: 12px;" @click="more">
					查看更多 >
				</div>
				<!-- #endif -->
				<image class="title-img" src="../../../static/images/product/img-title1.png" alt="热门商品" mode="aspectFit"
					style="height: 32rpx;" />
				<div style="color: #9E9E9E; font-size: 12px;" @click="more">
					查看更多 >
				</div>

			</div>

			<scroll-view @right="right" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="scroll-list" style="flex-direction: row;">
					<view class="scroll-list__goods-item" v-for="(item, index) in list" :key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click="goodsDateils(item.shopId,item.productId,item.skuId)">
						<image class="scroll-list__goods-item__image" :src="$baseURL+item.image"></image>
						<view class="scroll-list__goods-item__title">{{item.productName}}</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<span class="scroll-list__goods-item__text" >
							<text style="color: #C44A51;margin-right: 10px;">￥{{ item.price }} </text>
							<!-- <text style="color: #ccc;text-decoration: line-through;">¥ {{ item.originalPrice }}</text> -->
							</span>
							
							<text style="color: #B9B9B9;"
								class="scroll-list__goods-item__text">{{ item.users }}人购买</text>
						</view>

					</view>
					<!--  <view class="scroll-list__show-more">
					                <text class="scroll-list__show-more__text">查看更多</text>
					                <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					            </view> -->
				</view>
			</scroll-view>

		</div>
		<div class="title">
			<!-- #ifdef MP-WEIXIN -->
			<img class="title-img" src="../../../static/images/product/img-title2.png" alt="特价专区" mode="aspectFit"
				style="height: 32rpx;" />
			<div style="color: #9E9E9E; font-size: 12px;" @click="more">
				查看更多 >
			</div>
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS -->
			<image class="title-img" src="../../../static/images/product/img-title2.png" alt="特价专区" mode="aspectFit"
				style="height: 32rpx;" />
			<div style="color: #9E9E9E; font-size: 12px;" @click="more">
				查看更多 >
			</div>
			<!-- #endif -->
		</div>
		<div v-if="componentContent.arrangeType == '横向滑动' && productData.length > 2" class="product-list">
			<swiper ref="mySwiper" class="swiper product-list-box" :circular="true" :indicator-dots="false"
				:autoplay="true" :display-multiple-items="2" @change="swiperChange">
				<swiper-item class="product-list-item-warp" v-for="(item,index) in productData" :key="index">
					<div class="product-list-item" v-if="JSON.stringify(item)!=='{}'" @click="jumpProductDetail(item)">
						<div class="product-list-img">
							<img class="img pic-img default-img" :src="$baseURL+item.image">
						</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="$baseURL+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://jy.scjysm.asia:18086/cdwlMall/questionnaire/file/static/images/zhekou.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://jy.scjysm.asia:18086/cdwlMall/questionnaire/file/static/images/zhekou.png">
														<!-- #endif -->
															<div class="price">
																¥ {{ item.price }}
																
															</div>
															<div class="original-price">
																¥ {{ item.originalPrice }}
															</div>
							</div>
						</div>
					</div>
					<!-- 自定义骨架屏 -->
					<div class="product-list-item ske-loading" v-else>
						<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>
				</swiper-item>
			</swiper>
			<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">
			<div class="product-list-box">
				<div class="product-list-item-warp" v-for="(item,index) in productData" :key="index">
					<div @click="jumpProductDetail(item)" class="product-list-item" v-if="JSON.stringify(item)!=='{}'">
						<div class="product-list-img">
							<img class="img pic-img default-img" :src="$baseURL+item.image">
						</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="$baseURL+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://jy.scjysm.asia:18086/cdwlMall/questionnaire/file/static/images/zhekou.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://jy.scjysm.asia:18086/cdwlMall/questionnaire/file/static/images/zhekou.png" />
								<!-- #endif -->
								<div class="price">
									¥ {{ item.price }}
									
								</div>
								<div class="original-price">
									¥ {{ item.originalPrice }}
								</div>
							</div>
						</div>
					</div>
					<!-- 自定义骨架屏 -->
					<div class="product-list-item ske-loading" v-else>
						<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>
		</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 uView from 'uview-ui'
	const API = require('../../../../../config/api')
	const NET = require('../../../../../utils/request')
	export default {
		mixins: [commonMixin],
		data() {
			return {
				swiperCurrent: 0,
				gongList:[],
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		mounted() {
		this.gettong()
		},
		methods: {
			gettong(){
				let pagesize = {
					pageNumber: 2,
					pageSize: 2
				}
				NET.request2(API.cereAnnouncement, pagesize, 'POST').then(res => {
					this.gongList = res.data.content.slice(-2)
				})
				NET.request1(API.popularProductSearch).then(res => {
					this.list = res.data.list
					
				})
			},
			//商品详情
			goodsDateils(shopId,productId,skuId){
			  uni.navigateTo({
			    url: '/pages_category_page1/goodsModule/goodsDetails?shopId='+shopId + '&productId='+productId +'&skuId='+skuId
			  })
			},
			gonggao(item){
				const items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages_category_page1/procedure/procedure?item=${items}`
				})
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			more(){
				uni.navigateTo({
					url: '/pages_category_page1/goodsModule/goodsList'
				})
			},
			kefu(){
				uni.navigateTo({
					url: '/pages_category_page1/customer/chatBox'
				})
			},
			goList(){
				uni.navigateTo({
					url: `/pages_category_page1/procedure/procedureList`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 横向轮播 */
	.scroll-list {
		/* @include flex(column); */
		display: flex;
		padding: 0 0rpx 40rpx 10rpx;
 white-space: nowrap;
		&__goods-item {
			margin-right: 20rpx;
			width: 40%;
			&__image {
				// margin-left: 10%;
				width: 150px;
				height: 150px;
				border-radius: 10rpx;
			}

			&__title {
				font-size: 24rpx;
				padding-left: 4rpx;
				    display: block;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 1;
				// -webkit-box-orient: vertical;
			}

			&__text {
				font-size: 10px;
				margin-top: 5px;
				font-weight: 500;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			/* @include flex(column); */
			display: flex;
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #C44A51;
				line-height: 16px;
			}
		}
	}


	.hom-pro-list {
		background-color: #fff;
		padding: 20rpx 13rpx;

		.title {
			text-align: center;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx 20rpx 20rpx;

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

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

			&-box {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;

				&.swiper {
					height: 620rpx;
				}
			}

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

			&-item-warp {
				margin: 0 0 20rpx 0;
			}

			&-item {
				width: 348rpx;
				padding: 0 7rpx;
				box-sizing: content-box;
			}

			&-img {
				width: 348rpx;
				height: 348rpx;
				background-color: #f5f5f5;
				border-radius: 10rpx 10rpx 0 0;

				.img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					border-radius: 20rpx;
				}
			}

			&-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: #39be7a;
					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 #fff;
						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;
					}
				}
			}

			//::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;
	//    }
	//  }
	//}
	.tongzhi::before{
		 content: '';
		 position: absolute;
		 top: 16rpx;
		 left: 14rpx;
		 width: 3rpx;
		 height: 30rpx;
		 background-color: #E2E2E2;
	}
	.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>