<template>
	<div :style="{
			'background-color': goodsInfo.backgroundColor,
			'paddingLeft':goodsInfo.PaddingLeft+'px',
			'paddingRight':goodsInfo.PaddingRight+'px',
			'paddingTop':goodsInfo.PaddingTop+'px',
			'paddingBottom':goodsInfo.PaddingBottom+'px'
		}">
		<div v-for="(item, gli) in goodsInfo.list" :key="gli" class="good_study_one" @click="openGood(item)" :style="{
				borderRadius:goodsInfo.SearchFilletPX==0?10:goodsInfo.SearchFilletPX+'px'
			}">
			<image style="
          width: calc(100vw - 24px);
          height: 100vw;
          border-radius: 10rpx 10rpx 0 0;
        "
			 mode='aspectFill' :src="item.picUrl" />
			<div class="good-info">
				<div class="good-name" v-if="item.name">{{ item.name }}</div>
				<div>
					<view style="display:inline-block;padding: 2px 4px;border-radius: 2px;font-size: 10px;color: #FAF8F9;margin-right:5px"
					:style="{background:mainColor}" v-for="(subItem,subIndex) in item.lableNameList" :key="subIndex">
						{{subItem}}
					</view>
				</div>
			</div>
		</div>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</div>
</template>

<script>
	import auth from '@/components/auth/index.vue';
	export default {
		components: {
			auth
		},
		props: ['goodsInfo'],
		data() {
			return {
				mainColor: '',
				showSku: false,
				sku: {},
				showAuth: false,
				u: {},
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			openGood(item) {
				this.u = uni.getStorageSync('mall_UserInfo');
				if (!this.u) {
					this.u = {
						nickName: '未登录',
						avatarUrl: ''
					};
					this.showAuth = true;
				} else {
					uni.navigateTo({ url: "/pages/school/articleDetails?ID=" + item.id });
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
				// this.showAuth = false;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			}
		}
	};
</script>

<style>
	.good_study_one {
		margin: 12px;
		position: relative;
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		/* border: 1px solid rgb(226, 226, 226); */
		overflow: hidden;
	}

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

	.good_study_one .guding {
		position: relative;
	}

	.good_study_one .guding .img-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.good_study_one .good-info {
		padding: 12rpx;
		margin-top: -5px;
	}

	.good_study_one .good-info .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 13px;
	}
 
	.good_study_one .good-info .good-price-info {
		display: flex;
	}

	.good_study_one .good-info .good-price-info .price {
		color: #999999;
		font-size: 11px;
		flex: 1;
	}

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