<template>
	<view style="padding:0 15px;width:100%;" :style="{
			'background-color': goodsInfo.backgroundColor,
			'background-image': goodsInfo.backgroundPicUrl,
			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
		}">
		<view class="good-seven" v-for="(item, gli) in goodList" :key="gli" @click="openGood(item)" :style="{
				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
			}">
			<view class="tips" v-if="goodsInfo.showGoodsTag">
				<image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" />
			</view>
			<view class="img-box">
				<template v-if="item.imglist&&item.imglist.length==1">
					<image class="img-0" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
					<image class="img-1" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
					<image class="img-2" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
				</template>
				<template v-if="item.imglist&&item.imglist.length==2">
					<image class="img-0" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
					<image class="img-1" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[1]" />
					<image class="img-2" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
				</template>
				<template v-if="item.imglist&&item.imglist.length>=3">
					<image class="img-0" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[0]" />
					<image class="img-1" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[1]" />
					<image class="img-2" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.imglist[2]" />
				</template>
			</view>
			<view class="good-info">
				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }} </view>
				<view class="sencond-title" v-if="item.subname">{{item.subname}}</view>
				<view class="good-price-info">
					<view style="display:none;">
						<u-rate :current="item.courseScore!=null &&item.courseScore>0?item.courseScore:'5'" :active-color="mainColor"
						 inactive-color="#DDDDDD" active-icon="star" inactive-icon="star-o" size="34" :disabled="true"></u-rate>
						<text class="good-rb-text">{{item.courseScore!=null &&item.courseScore>0?item.courseScore.toFixed(1):'5.0'}}分</text>
					</view>
					<view class="price" :style="{ color: mainColor }" v-if="item.price>0 && goodsInfo.showGoodsPrice">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
						<span style='text-decoration: line-through;margin-left: 3px;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span>
					</view>
					<view class="price" v-else-if="goodsInfo.showGoodsPrice" style="font-size:13px;color:#999999">免费</view>
					<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
						<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
						<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
						<u-button type="primary" size="mini" :ripple="true" :color="goodsInfo.buttonColor" :custom-style="
								`backgroundColor:${goodsInfo.buttonColor},color:${goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'}`
							"
						 :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4" :shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
						 v-else>
							{{ goodsInfo.buyBtnText }}
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></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: ['goodList', 'goodsInfo'],
		data() {
			return {
				mainColor: '',
				activeKey: 0,
				showSku: false,
				sku: {},
				showAuth: false,
				u: {},
				IsEducation: 1
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
					.IsEducation : 0) :
				0;
		},
		methods: {
			openGood(item) {
				//线路
				if (item.goodType == 4) {
					uni.navigateTo({
						url: "/pages/jiuzhai/jz_LineDetail?tcid=" + item.id + '&configId=' + item.subid
					});
				}
				//酒店
				else if (item.goodType == 1) {
					uni.navigateTo({
						url: "/pages/hotel/detail?id=" + item.id
					});
				}
				//餐食
				else if (item.goodType == 2) {
					uni.navigateTo({
						url: '/pages/restaurant/detail?id=' + item.id
					});
				}
				//景点
				else if (item.goodType == 3) {
					uni.navigateTo({
						url: '/pages/ticketCoupons/detail?id=' + 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');
				// this.showAuth = false;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			}
		}
	};
</script>

<style>
	.good-seven {
		position: relative;
		margin-bottom: 14px;
		display: flex;
		/* height: 102px; */
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 0 1px 1px 0;
		overflow: hidden;
		padding-bottom: 14px;
		border-bottom: 1px solid #e2e2e2;
	}

	.good-seven:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.good-seven .tips {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.good-seven .img-box {
		width: 266rpx;
		height: 260rpx;
		overflow: hidden;
		position: relative;
		border-radius: 20rpx;
	}

	.good-seven .img-box .img-0 {
		width: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		height: 260rpx;
		z-index: 3;
	}

	.good-seven .img-box .img-1 {
		width: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		left: 40rpx;
		top: 20rpx;
		height: 220rpx;
		opacity: 0.6;
		z-index: 2;
	}

	.good-seven .img-box .img-2 {
		width: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		left: 66rpx;
		top: 40rpx;
		height: 180rpx;
		opacity: 0.3;
		z-index: 1;
	}

	.good-seven .good-info {
		padding-left: 12px;
		flex: 1;
		width: 1rpx;
		border: 10rpx;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		/* width:20%; */
	}

	.good-seven .good-info .good-name {
		font-size: 30rpx;
		max-height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #111;
	}

	.good-seven .good-info .good-price-info {
		display: flex;
		justify-items: center;
		justify-content: space-between;
		align-items: flex-end;
		height: 10px;
		flex: 1;
		padding-bottom: 10rpx;
	}

	.good-seven .good-info .sencond-title {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 32rpx;
		margin-top: 5px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.good-seven .good-rb-text {
		font-size: 32rpx;
		color: #999999;
		margin-left: 2px;
	}

	.good-seven .good-info .good-price-info .price {
		color: #ff4544;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.good-seven .good-info .good-price-info .buy {
		width: 24px;
		text-align: right;
	}
</style>
