<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="showSkuHandler(cx)">
					<view class="good-img">
						<image mode="aspectFill" :src="getImgs(cx.imgCover)" style="width: 100%; height: 100%;border-top-left-radius: 10px;
							border-top-right-radius: 10px;">
						</image>
					</view>
					<view class="good-name">
						{{cx.title}}
					</view>
					<!-- <view class="goodsSubName">
						<text v-if="cx.productRecommend">{{cx.productRecommend}}</text>
					</view> -->
					<view class="good-info">
						<view class="price">
							{{$utils.getretailer()==true? cx.b2BPrice:cx.b2CPrice}}
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import goodSku from "../goods/goodsku";
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			goodSku,
			auth,
		},
		props: ["list"],
		data() {
			return {
				g: [],
				showSku: false,
				showAuth: false,
				u: {},
				sku: {},
				mainColor: "",
				setting: {},
				isShowKorea: 0, //是否显示韩国的 0显示 1不显示
				CityId:0
			};
		},
		mounted() {
			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) {
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_LineDetail?tcid=" + g.tcid + '&configId=' + g.configId + '&cityId=' + this.CityId
				});
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			//获取第一张图
			getImgs(imgObj) {
				if(imgObj){
					let imgArr = JSON.parse(imgObj);
					if (imgArr && imgArr.length > 0) {
						return imgArr[0].Url
					}
				}
			}
		},
	};
</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;
		font-weight: bold;
	}

	.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;
		text-align: right;
	}

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

	.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: 11px;
		margin: 0 10px 5px 10px;
		height:17px;
		color:#999999;
	}
</style>
