<template>
	<view class="u-good-list">
		<u-row gutter="20">
			<u-col span="6" v-for="(cx, ci) in g" :key="ci">
				<view class="good" @click="clickHandler(cx)">
					<view class="good-img">
						<image mode="scaleToFill" :src="cx.cover_pic" style="width: 100%; height: 100%;">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/plugins-out.png" v-if="cx.totalStock==0&&setting.is_show_korea&&setting.is_show_korea==0"
							 style="width: 100%; height: 100%;position: absolute;left:0;top:0;background: #000;opacity: 0.6;" />
						</image>
					</view>
					<view class="good-name" v-if="setting.is_show_goods_name==1">
						<view v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''" class="Logo"
						 :style="{color: cx.marketingLogo.wordsColor,
						background:cx.marketingLogo.wordsBack ,}">{{cx.marketingLogo.words}}</view>
						<image v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''" mode="heightFix"
						 :src="cx.marketingLogo.ico" style=" height: 12px;margin-right: 5px" />

						<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;height: 32rpx;font-size: 20rpx;margin-right: 5rpx;"
						 v-if="cx.freeShippingFullMoneyPinkage>0 || cx.freeShippingFullNumPinkage>0">
							{{cx.freeShippingFullMoneyPinkage>0 && cx.freeShippingFullNumPinkage==0?cx.freeShippingFullMoneyPinkage+'元包邮':''}}
							{{cx.freeShippingFullMoneyPinkage==0 && cx.freeShippingFullNumPinkage>0?cx.freeShippingFullNumPinkage+'件包邮':''}}
						</view>
						{{ cx.name }}
					</view>
					<!-- 新增时间次数 -->
					<view class="good-name2" v-if="cx.edudata.ClassTime&&u.TenantId==27" style="height: auto;">
						{{cx.edudata.ClassTime}}
					</view>
					<view class="good-name2" v-if="cx.edudata.ClassNum&&u.TenantId==27" style="height: auto;">
						{{cx.edudata.ClassNum}}次
					</view>
					<view v-if="u.TenantId==27" class="Teachers">
						<view class="portrait-box">
							<image v-if="cx.edudata.TeacherIcon" class="portrait" mode="aspectFit" :src="cx.edudata.TeacherIcon"  />
							   <view v-if="cx.edudata.TeacherName" class="sell2">{{cx.edudata.TeacherName}}</view>
						</view>
						<view class="goodsSubName" v-if="setting&&setting.is_show_korea==1">
							卖点：<text v-if="cx.subName">{{cx.subName}}</text>
						</view>
						<view class="good-info2" v-if="setting&&setting.is_show_korea==0">
							<view class="price2" :style="{ color: mainColor }">￥{{cx.price}}</view>
							<!-- <view v-if="u.TenantId!=27" class="sell">{{ cx.sales }}</view> -->
							<view v-if="setting.is_show_cart==1" class="cart2" @click.stop="showSkuHandler(cx)">
								<u-icon name="cart-o" size="40" :color="mainColor" />
							</view>
						</view>
					</view>
					<!-- 新增时间次数 -->
					<template v-if="u.TenantId!=27">
						<view class="good-info" v-if="setting&&setting.is_show_korea==0">
							<view class="price" :style="{ color: mainColor }">￥{{cx.price}}</view>
							<view v-if="u.TenantId!=27" class="sell">{{ cx.sales }}</view>
							<view v-if="setting.is_show_cart==1" class="cart" @click.stop="showSkuHandler(cx)">
								<u-icon name="cart-o" size="40" :color="mainColor" />
							</view>
						</view>
					</template>
				</view>
			</u-col>
		</u-row>
		<!-- <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku> -->
		<template v-if="u&&u.TenantId==27">
		            <good-sku2 v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku2>
		        </template>
		        <template v-else>
		            <good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
		        </template>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import goodSku from "../goods/goodsku";
	import goodSku2 from "../goods/goodsku2";
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			goodSku,
			goodSku2,
			auth,
		},
		props: ["list"],
		data() {
			return {
				g: [],
				showSku: false,
				showAuth: false,
				u: {},
				sku: {},
				mainColor: "",
				setting: {},
				isShowKorea: 0, //是否显示韩国的 0显示 1不显示
			};
		},
		mounted() {
			this.u = uni.getStorageSync("mall_UserInfo");
			this.g = this.list;
			this.mainColor = this.$uiConfig.mainColor;
			this.initConfig();
		},
		watch: {
			list: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					this.g = newVal;
				},
			},
		},
		methods: {
			initConfig() {
				this.setting = uni.getStorageSync("basedata").mall.setting;
			},
			clickHandler(item) {
				console.log("GoodsId", item);
				if (item.goodsclassify == 3) {
					uni.navigateTo({
						url: "/pages/reserve/goodsDetails?GoodsId=" + item.id
					});
				} else {
					uni.navigateTo({
						url: "/pages/goods/goods?GoodsId=" + item.id
					});
				}

			},
			showSkuHandler(g) {
				this.sku = g;
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
				} else {
					this.showSku = true;
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
		},
	};
</script>

<style>
	.Teachers{
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
		margin-bottom: 14rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
 .cart2 {
		width: 40rpx;
		text-align: right;
	}
	.price2 {
		font-size: 14px;
		color: #ff4544;
		/* flex: 1; */
		margin-right: 20rpx;
	}
	.good-info2{
		display: flex;
		    /* margin: 7px 10px; */
		    margin-top: 0;
		    align-items: flex-end;
			align-items: center;
		    /* padding-bottom: 5px; */
		  /*  max-width: 88rpx; */
	}
	.portrait-box{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.portrait{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.sell2{
		font-size: 12px;
		color: gray;
	}
	.good-name2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 13px;
		margin: 7px 10px;
	}
	.u-good-list .good {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.u-good-list .good .good-img {
		width: calc(50vw - 15px);
		height: calc(50vw - 15px);
		display: block;
		position: relative;
	}

	.u-good-list .good .good-img .shipping {
		width: 100%;
		height: 30px;
		font-size: 11px;
		color: #ffffff;
		padding: 0 10px;

		background-image: linear-gradient(to bottom,
			rgb(0, 0, 0, 0),
			rgb(0, 0, 0, 1));
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 30px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.u-good-list .good .good-name {
		max-height: 37px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 13px;
		margin: 7px 10px;
	}

	.u-good-list .good .good-info {
		display: flex;
		margin: 7px 10px;
		margin-top: 0;
		align-items: flex-end;
		padding-bottom: 5px;
	}

	.u-good-list .good .good-info .price {
		font-size: 14px;
		color: #ff4544;
		flex: 1;
	}

	.u-good-list .good .good-info .sell {
		font-size: 11px;
		color: gray;
		flex: 1;
	}

	.u-good-list .good .good-info .cart {
		width: 40rpx;
		text-align: right;
	}

	.u-good-list .Logo {
		padding: 1px 5px;
		display: inline-block;
		font-size: 22rpx;
		margin-right: 5rpx;
		border-radius: 4px;
	}
	.u-good-list .goodsSubName{
		text-overflow: ellipsis;
		white-space: nowrap; 
	    overflow: hidden;
		font-size: 13px;
		margin: -7px 10px 10px 10px;
		height:17px;
	}
</style>
