<template>
	<div
		:style="{
			'background-color': goodsInfo.backgroundColor,
			'background-image': goodsInfo.backgroundPicUrl,
			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
		}"
	>
		<div
			v-for="(item, gli) in goodList"
			:key="gli"
			class="good-one"
			@click="openGood(item)"
			:style="{
				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
			}"
		>
			<div class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></div>
			<image
				style="width: calc(100vw - 24px); height: 50vw;border-top-left-radius: 10px; border-top-right-radius: 10px;"
				:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
				:src="item.picUrl"
				v-if="goodsInfo.goodsCoverProportion == '3-2'"
			/>
			<image
				style="
				  width: calc(100vw - 24px);
				  height: 100vw;
				  border-radius: 10rpx 10rpx 0 0;
				  border-top-left-radius: 10px; border-top-right-radius: 10px;
				"
				v-if="goodsInfo.goodsCoverProportion == '1-1'"
				:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
				:src="item.picUrl"
			/>
			<div class="good-info">
				<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
				<view class="good-sub-name" v-if="item.subname">{{item.subname}}</view>
				<div class="good-price-info">
					<span class="price">
						<span style="font-size: 28rpx;font-weight: 500;margin-right: 2rpx;">￥</span>
						{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
						<!-- <span style='text-decoration: line-through;margin-left: 10px;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
					</span>
					<span class="buy" v-if="goodsInfo.showBuyBtn">
						<u-icon name="cart-o" size="40" style="color:#ff4544" v-if="goodsInfo.buyBtn == 'cart'" />
						<u-icon name="add-o" size="40" style="color:#ff4544" v-else-if="goodsInfo.buyBtn == 'add'" />
						<u-button
							type="primary"
							size="mini"
							:ripple="true"
							:color="goodsInfo.buttonColor"
							
							:custom-style="{
								'backgroundColor':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ?'#FFF' : 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>
					</span>
				</div>
			</div>
		</div>
		<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>
	</div>
</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: {}
		};
	},
	created() {
		this.mainColor = this.$uiConfig.mainColor;
	},
	methods: {
		openGood(item) {
			//线路
			if (item.goodType == 4) {
				var url="/pages/jiuzhai/jz_LineDetail?tcid=" + item.id + '&configId=' + item.subid;
				console.log("url1",url)
				uni.navigateTo({
					url:url
				});
			}
			//酒店
			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-one {
  margin: 12px;
  position: relative;
  border: 1rpx solid transparent;
  border-radius: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px 1px #D2D2D2;
}
.good-one .tips {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
.good-one .guding {
	position: relative;
}
.good-one .guding .img-box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.good-one .good-info {
	padding: 12rpx;
	padding-bottom: 0;
	margin-top: -5px;
}
.good-one .good-info .good-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 10px;
	font-size:32rpx;
	font-weight: bold;
}
.good-one .good-info .good-sub-name{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color:#999999;
	margin-bottom: 10px;
}
.good-one .good-info .good-price-info {
	display: flex;
}
.good-one .good-info .good-price-info .price {
	color: #ff4544;
	font-size: 16px;
	font-weight: 600;
	flex: 1;
}
.good-one .good-info .good-price-info .buy {
	/* width: 24px; */
	text-align: right;
}
</style>
