<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="aspectFill" :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="goodsSubName" v-if="setting&&setting.is_show_korea==1">
						卖点：<text v-if="cx.subName">{{cx.subName}}</text>
					</view>
					<view class="good-info" v-if="setting&&setting.is_show_korea==0">
						<view class="price" :style="{ color: mainColor }">￥{{cx.price}}</view>
						<view 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>
				</view>
			</u-col>
		</u-row>
		<!-- <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku> -->
		<good-sku v-if="showSku&&!u.TenantId!=27" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
		<good-sku2 v-if="showSku&&u.TenantId==27" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku2>
		<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>
	.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 {
		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>
