<template>
	<view
		style="width:100%;"
		:style="{
			'background-color': goodsInfo.backgroundColor,
			'background-image': goodsInfo.backgroundPicUrl,
			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
			'padding-top':goodsInfo.PaddingTop+'px',
			'padding-right':goodsInfo.PaddingRight+'px',
			'padding-bottom':goodsInfo.PaddingBottom+'px',
			'padding-left':goodsInfo.PaddingLeft+'px',
		}"
	>
		<view
			class="good-four"
			v-for="(item, gli) in goodList"
			:key="gli"
			@click="openGood(item)"
			:style="{
				
				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
			}"
		>
			<view class="img-box"><image style="width: 100%; height: 100%;border-radius: 4px;" mode="aspectFill" :src="item.picUrl" /></view>
			<view class="good-info"  v-if="imgModel==false">
				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
				<view class="good-price-info" v-if="goodsInfo.showsubtitle">
					<span class="price" >{{ item.subtitle }}</span>
				</view>
			</view>
		</view>
		
		<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: {
		
		auth
	},
	props: ['goodList', 'goodsInfo'],
	data() {
		return {
			mainColor: '',
			activeKey: 0,
			showAuth: false,
			u: {},
			imgModel:false
		};
	},
	created() {
		this.mainColor = this.$uiConfig.mainColor;
		if(this.goodsInfo.showGoodsName==false && this.goodsInfo.showsubtitle ==false){
			this.imgModel=true
		}
	},
	methods: {
		openGood(item) {
			
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
			}
		},
		reloadUserinfo() {
			this.u = uni.getStorageSync('mall_UserInfo');
			// this.showAuth = false;
		},
		//关闭登录窗口
		gbAuth() {
			this.showAuth = false;
		}
	}
};
</script>

<style>
.good-four {
	position: relative;
	/* margin-bottom: 14px; */
	display: flex;
	height: 90px;
	border: 1rpx solid transparent;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 0 1px 1px 0;
	overflow: hidden;
	padding: 10px 0;
}
.good-four .tips {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
.good-four .img-box {
	width: 125px;
	height: 70px;
}
.good-four .good-info {
	padding: 5px 0 5px 10px;
	flex: 1;
	width: 1rpx;
	border: 10rpx;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	/* width:20%; */
}
.good-four .good-info .good-name {
	font-size: 13px;
	height: 34px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.good-four .good-info .good-price-info {
	display: flex;
	justify-items: center;
	align-items: flex-end;
	height: 22px;
	flex: 1;
	padding-bottom: 10rpx;
}
.good-four .good-info .good-price-info .price {
	color: #999999;
	flex: 1;
	font-size: 11px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.good-four .good-info .good-price-info .buy {
	width: 24px;
	text-align: right;
}
</style>
