<template>
	<view class="container">
		<block v-if="tabType==='goods'">
			<view class="storeGoods-content">
				<view class="scrollView">
					<view class="goods-list">
						<view class="goods-item dis-flex m-btm50" v-for="(goodsItem,index) in goodsData" :key="index" @click="naviGoods(goodsItem.id,goodsItem.type)">
							<view class="goods-item-left m-right30" :style="{'background-image':'url('+(goodsItem.logo || goodsItem.thumb)+')'}"></view>
							<view class="goods-item-right dis-flex flex-dir-column flex-x-between">
								<!-- 团购 -->
								<block v-if="goodsItem.type==='2'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-1-icon t-c col-f m-right10">团购</text>
										{{goodsItem.goods_name}}
									</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.price}}</view>
											<view class="goodsOldPrice-1 f-24 col-9" style="text-decoration:line-through;" v-if="TextSubstitution.flag074 != 1">¥{{goodsItem.oldprice}}</view>
											<view class="dis-flex flex-y-center member-coupon-view" v-else-if="goodsItem.discount_price != 0 && TextSubstitution.flag074 == 1">
												<view class="member-price-label f-22" >{{goodsItem.levelarmy == 1?'拥军价格':'会员价格'}}</view>
												<!-- <view class="member-price-label f-22" v-else>{{goodsDetail.levelname}}</view> -->
												<view class="f-22 col-f onelist-hidden b-0 coupon-price-2">立减<text class="member-coupon-price">{{goodsItem.discount_price}}</text>元</view>
											</view>
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">{{languageStatus!=1?'购买':'구매'}}</view>
									</view>
								</block>
								<!-- 拼团 -->
								<block v-if="goodsItem.type==='3'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<view class="goodstype-2-icon flex-x-between flex-y-center m-right10">
											<view class="goodstype-2-labelIcon iconfont icon-friend"></view>
											<view class="f-24 goodstype-2-peoplenum">{{goodsItem.peoplenum}}人团</view>
										</view>
										{{goodsItem.goods_name}}
									</view>
									<view class="col-9 f-24">已拼{{goodsItem.buy_num}}件</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.price}}</view>
											<view class="goodsOldPrice-1 f-24 col-9" style="text-decoration:line-through;">¥{{goodsItem.oldprice}}</view>
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">去拼团</view>
									</view>
								</block>
								<!-- 卡券 -->
								<block v-if="goodsItem.type==='5'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-3-icon t-c p-r b-f f-24 m-right10">卡券</text>
										{{goodsItem.goods_name}}
									</view>
									<view class="goodsPrice-1">
										<view class="goodsNowPrice-1 f-36 m-right10" v-if="goodsItem.is_charge != '0'"><text class="f-24">¥</text>{{goodsItem.price}}</view>
										<view class="goodsNowPrice-1 f-36 m-right10" v-else><text class="f-28">免费</text></view>
									</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="goods3-progress p-r m-right10">
												<view class="already-progress" :style="'width:'+Number(goodsItem.buy_percentage)+'%'"></view>
											</view>
											<view class="f-24 col-3" v-if="goodsItem.is_charge != '0'">已售{{goodsItem.buy_percentage}}%</view>
											<view class="f-24 col-3" v-else>已领{{goodsItem.buy_percentage}}%</view>
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f" v-if="goodsItem.is_charge != '0'">{{languageStatus!=1?'购买':'구매'}}</view>
										<view class="goods-1-buybtn f-24 t-c col-f" v-else>领取</view>
									</view>
								</block>
								<!-- 抢购 -->
								<block v-if="goodsItem.type==='1'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-1-icon t-c col-f m-right10"><text class="iconfont icon-hotfill hotfill-icon"></text>抢购</text>
										{{goodsItem.goods_name}}
									</view>
									<view class="goodsPrice-1 dis-flex">
										<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.price}}</view>
										<view class="dis-flex flex-y-center member-coupon-view" v-if="TextSubstitution.flag074 == 1 && goodsItem.discount_price != 0">
											<view class="member-price-label f-22" >{{goodsItem.levelarmy == 1?'拥军价格':'会员价格'}}</view>
											<!-- <view class="member-price-label f-22" v-else>{{goodsDetail.levelname}}</view> -->
											<view class="f-22 col-f onelist-hidden b-0 coupon-price-2">立减<text class="member-coupon-price">{{goodsItem.discount_price}}</text>元</view>
										</view>
									</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="goods3-progress p-r m-right10">
												<view class="already-progress" :style="'width:'+Number(goodsItem.buy_percentage)+'%'"></view>
											</view>
											<view class="f-24 col-3">已售{{goodsItem.buy_percentage}}%</view>
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">{{languageStatus!=1?'购买':'구매'}}</view>
									</view>
								</block>
								<!-- 砍价 -->
								<block v-if="goodsItem.type==='7'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-1-icon t-c col-f m-right10"><text class="new_iconfont icon-kanjia hotfill-icon"></text>砍价</text>
										{{goodsItem.goods_name}}
									</view>
									<view class="col-9 f-24">{{goodsItem.buy_num}}人砍价成功</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.price}}</view>
											<view class="goodsOldPrice-1 f-24 col-9" style="text-decoration:line-through;">¥{{goodsItem.oldprice}}</view>
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">去砍价</view>
									</view>
								</block>
								<!-- 活动 -->
								<block v-if="goodsItem.type==='9'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-1-icon t-c col-f m-right10">活动</text>
										{{goodsItem.goods_name}}
									</view>
									<view class="col-9 f-24" v-if="goodsItem.buy_num">{{goodsItem.buy_num}}人报名成功</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center" v-if="goodsItem.minprice && goodsItem.maxprice">
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.minprice}} ~ </view>
											<view class="goodsNowPrice-1 f-36 m-right10">¥{{goodsItem.maxprice}}</view>
										</view>
										<view class="dis-flex flex-y-center" v-else>
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.price}} </view>
											<!-- <view class="goodsNowPrice-1 f-36 m-right10">¥{{goodsItem.maxprice}}</view> -->
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">去报名</view>
									</view>
								</block>
								<block v-if="goodsItem.type=='10'">
									<view class="goods-title twolist-hidden f-26 col-3">
										<text class="goodstype-1-icon t-c col-f m-right10">家政</text>
										{{goodsItem.title}}
									</view>
									<view class="col-9 f-24" v-if="goodsItem.salenum">{{goodsItem.salenum}}人下单成功</view>
									<view class="goodsPrice-1 dis-flex flex-x-between flex-y-center">
										<!-- <view class="dis-flex flex-y-center" v-if="goodsItem.minprice && goodsItem.maxprice">
											<view class="goodsNowPrice-1 f-36 m-right10"><text class="f-24">¥</text>{{goodsItem.minprice}} ~ </view>
											<view class="goodsNowPrice-1 f-36 m-right10">¥{{goodsItem.maxprice}}</view>
										</view> -->
										<view class="dis-flex flex-y-center">
											<view class="goodsNowPrice-1 f-30 m-right10" ><text class="f-24"></text>{{goodsItem.price}} </view>
											<!-- <view class="goodsNowPrice-1 f-36 m-right10" v-else><text class="f-24">¥</text>{{goodsItem.price}} </view> -->
											<!-- <view class="goodsNowPrice-1 f-36 m-right10">¥{{goodsItem.maxprice}}</view> -->
										</view>
										<view class="goods-1-buybtn f-24 t-c col-f">去下单</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	// #ifdef H5
	import wxApi from "@/common/js/wxApi.js"
	// #endif
	export default {
		data() {
			return {
				goodsData: [],
				totalPage: null,
				slide_Top: 0, // 滚动距离
				current_page: 1, // 当前页数
				loading: false,
				TextSubstitution:{}
			}
		},
		props: {
			storeId: {
				type: String,
				default: function() {
					return ""
				}
			},
			tabType: {
				type: String,
				default: function() {
					return ""
				}
			}
		},
		methods: {
			getStoreGoods(page = 1, isPage = false) {
				let _this = this,
					requestData = {
						sid: _this.storeId,
						page,
					};
				if(!_this.storeId)	return
				App._post_form('&p=store&do=getStoreDetailGoods', requestData, res => {
					let goodsData = res.data;
					if (isPage) {
						if (goodsData.list.length > 0) {
							_this["goodsData"].push(...goodsData.list);
						} else {
							_this.loading = true;
						}
					} else {
						_this.setData({
							goodsData: res.data.list,
							totalPage: res.data.total
						})
						// _this.loading = ShopData.list.length === 0 || _this.current_page === ShopData.page_total;
					}
					_this.$emit('goodsListlength',_this.goodsData.length);
				}, false, () => {
					uni.hideLoading()
				})
			},
			/**
			 * 滑动高度 
			 */
			scrolly(e) {
				this.slide_Top = e.detail.scrollTop;
			},
			//加载更多
			ReachBottom() {
				console.info('ReachBottomGoods')
				let _this = this;
				if (_this.current_page >= _this.totalPage) {
					// _this.loading = true;
					return false;
				}
				_this.getStoreGoods(++_this.current_page, true);
			},
			tabbarShow() {
				let _this = this;
				uni.showLoading()
				_this.slide_Top = 0;
				_this.current_page = 1;
				_this.getStoreGoods();
			},
			naviGoods(goods_id, goodsType) {
				let _this = this,
					navData = {
						id:goods_id,
						type:goodsType
					};
					if(goodsType != '9' && goodsType != '10'){
						App.navigationTo({
							url:'pages/subPages/goods/index?'+ App.urlEncode(navData)
						});
					}else if(goodsType == '10'){
						// debugger
						App.navigationTo({
							url:`pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=${navData.id}`
						});
					}else{
						
						App.navigationTo({
							url:'pages/subPages2/coursegoods/coursegoods?'+ App.urlEncode(navData)
						});
					}
				
			}
		},
		onLoad(e) {
		},
		mounted() {
			this.TextSubstitution = uni.getStorageSync('TextSubstitution');
		},
		computed: {

		},
		components: {

		},
		watch:{
			storeId(newValue,oldValue){
				this.getStoreGoods()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeGoods-content {
		.scrollView {
			.goods-list {
				.goods-item {
					.goods-item-left {
						width: 160upx;
						height: 160upx;
						background-size: 160upx 160upx;
						background-repeat: no-repeat;
						border-radius: 10upx;
						flex-shrink: 0;
					}

					.goods-item-right {
						flex: 1;

						.goods-title {
							height: 2.6em;
							line-height: 1.3em;
						}

						.goodstype-1-icon {
							width: 52upx;
							height: 30upx;
							line-height: 30upx;
							background: rgba(255, 68, 68, 1);
							border-radius: 4upx;
							font-size: 24upx;
							padding: 0 8upx;

							.hotfill-icon {
								font-size: 24upx;
								color: #FFFFFF;
							}
						}

						.goodstype-2-icon {
							display: inline-flex;
							border: 1px solid #FF4444;
							color: #FF4444;
							border-radius: 10upx;

							.goodstype-2-labelIcon {
								color: #FFFFFF;
								background-color: #FF4444;
								font-size: 24upx;
								padding: 0 6upx;
							}

							.goodstype-2-peoplenum {
								padding: 0upx 6upx;
							}
						}

						.goodstype-3-icon {
							display: inline-block;
							color: #FF4444;
							border: 1px solid #FF4444;
							border-radius: 10upx;
							padding: 0 8upx;
						}

						.goodstype-3-icon::before {
							content: " ";
							position: absolute;
							left: -8upx;
							top: 50%;
							transform: translateY(-50%);
							width: 10upx;
							height: 12upx;
							border-radius: 50%;
							background-color: #FFFFFF;
							border-right: 1px solid #ff4444;
						}

						.goodstype-3-icon::after {
							content: " ";
							position: absolute;
							right: -8upx;
							top: 50%;
							transform: translateY(-50%);
							width: 10upx;
							height: 10upx;
							border-radius: 50%;
							background-color: #FFFFFF;
							border-left: 1px solid #ff4444;
						}
						
						.goodsPrice-1 {
							.goods3-progress {
								width: 140upx;
								height: 18upx;
								border: 1px solid rgba(255, 68, 68, 1);
								border-radius: 10upx;

								.already-progress {
									position: absolute;
									left: 0;
									right: 0;
									top: 0;
									bottom: 0;
									background: linear-gradient(90deg, rgba(242, 64, 64, 1) 0%, rgba(239, 27, 27, 1) 100%);
									opacity: 0.7;
									border-radius: 9px 0px 0px 9px;
								}
							}

							.goodsNowPrice-1 {
								color: #FF4444;

								&>text {
									color: #FF4444;
								}
							}

							.goodsOldPrice-1 {
								text-decoration: line-through;
							}

							.goods-1-buybtn {
								width: 98upx;
								height: 50upx;
								line-height: 50upx;
								background: rgba(255, 68, 68, 1);
								border-radius: 10upx;
							}
						}
					}
				}
			}
		}
	}
	.member-coupon-view {
		position: relative;
		margin-left: 12upx;
		// top: -6rpx;
	}
	.member-price-label {
		color: #333333;
		height: 0;
		line-height: 30upx;
		border-width: 0upx 10upx 30upx 0;
		border-style: none solid solid;
		border-color: transparent #000 #efd68f;
		position: relative;
		left: 10upx;
		padding-left: 6upx;
		border-radius: 4upx 0 0 4upx;
		margin-left: -10upx;
	}
	.coupon-price-2 {
		padding: 0 10upx;
		height: 30upx;
		line-height: 30upx;
		border-radius: 0 4upx 4upx 0;
	}
</style>
