<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">
				<image class="img-0" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
				<image class="img-1" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
				<image class="img-2" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
			</view>
			<view class="good-info">
				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
				<view class="sencond-title">这里的小文字介绍一点特色一类...</view>
				<view class="good-price-info">
					<view>
					  <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(this.IsEducation==1){
				uni.navigateTo({ url: '/pages/school/courseInfo?GoodsId='+item.id });
			}else{
				uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+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;
	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;
}
.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>
