<template>
	<div
		style="padding: 12px; padding-bottom: 0;"
		:style="{
			'background-color': goodsInfo.backgroundColor,
			'background-image': goodsInfo.backgroundPicUrl,
			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
		}"
	>
		<u-row gutter="24">
			<u-col span="4" v-for="(item, gli) in goodList" :key="gli">
				<div
					class="good-three"
					@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>
					<div class="img-box">
						<div class="img-show">
							<image
								style="
                  width: 100%;
                  height: 100%;
                  border-radius: 10rpx 10rpx 0 0;
                "
								:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
								:src="item.picUrl"
							/>
						</div>
					</div>
					<div class="good-info">
						<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
						<div class="good-price-info">
							<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</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>
						</div>
					</div>
				</div>
			</u-col>
		</u-row>
		<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>
	</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) {
			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-three {
	position: relative;
	margin-bottom: 12px;
	border: 1rpx solid transparent;
	border-radius: 10rpx;
	overflow: hidden;
	padding-bottom: 5px;
}
.good-three .tips {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
.good-three .img-box {
	width: 100%;
	height: 0;
	padding-top: 100%;
	position: relative;
}
.good-three .img-box .img-show {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.good-three .guding {
	position: relative;
}
.good-three .guding .img-box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.good-three .good-info {
	padding: 6rpx;
	margin-top: -5px;
	padding-bottom: 0;
}
.good-three .good-info .good-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 3px 0;
	font-size: 13px;
	word-break: break-all;
	height: 37px;
}
.good-three .good-info .good-price-info {
	display: flex;
	justify-items: center;
	align-items: center;
}
.good-three .good-info .good-price-info .price {
	color: #ff4544;
	flex: 1;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.good-three .good-info .good-price-info .buy {
	width: 24px;
	text-align: right;
}
</style>
