<template>
	<view class="goodList">

		<view v-for="(item, index) in list" :key="index" class="goods">
			<view  class="top" @tap="jumpDetails(item)">
				<image class="cover" lazy-load="true" :src="item.url" mode="scaleToFill"></image>
			</view>
			<!-- class padding-lr-sm -->
			<view  class="bottom "  >
				<!-- <view v-if="item.goodsName" class="text-xs good_skuSubTitle" style="color: #009125;">
					{{item.goodsName}}
				</view> -->
				<view class="goods_name text-df">
					{{item.goodsName}}
				</view>
				<!-- <view v-if="item.goodsName" class="text-sm good_skuSubTitle padding-bottom-xs" style="color: #D5A94D;">
					{{item.goodsName}}
				</view> -->
				<view>
					<!-- <text class="tag1" v-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].styleText&&item.skuItem.v2Tags[0].tagType==0">
						{{item.skuItem.v2Tags[0].styleText.text}}
					</text>
					<view class="" style="width: 82rpx; height: 30rpx;" v-else-if="item.skuItem.v2Tags&&item.skuItem.v2Tags[0].image&&item.skuItem.v2Tags[0].tagType==1">
						<image  :src="item.skuItem.v2Tags[0].image.url" class="w-100 h-100" mode="aspectFit"></image>
					</view> -->
				</view>
				<view class="goumai margin-top-xs flex justify-between align-center">
					<view class="g_left price"  v-if="item.price">
						<text class="text1  text-bold text-sm"> {{item.price}} </text>
						<text style="color: #222">/{{ item.unit}}</text>
						<!-- <text v-if="item.skuItem.dashPrice" class="text2 text-xs"> {{item.skuItem.dashPrice.text}}</text> -->

					</view>
					<view class="g_left price" v-if="!item.price">
						<text  class="text1  text-bold text-sm">客服询价 </text>

					</view>
					<view class="g_right" v-if="item.price" @tap="addCart(item)">
						<image src="/static/images/new/jiagou.png" style=" width: 24px;height: 24px;" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- <view v-if="item.type==4" class="cboardVO padding-xs"  :style="{backgroundImage:'url('+item.cboardVO.cboardBackGroundPic.url+')'}">
				<view class="padding-left-sm w-100" style="height: 20%;">
					<image :src="item.cboardVO.cboardNamePic.url" style="width: 75%;height:50%;"  mode="aspectFit"></image>
					<view class="text-white text-sm" style="height: 40%;">{{item.cboardVO.cboardDesc.text}}</view>
				</view>
				<view class="bg-white w-100 flex flex-direction justify-around padding-sm "  style="height: 80%;border-radius: 4%;" >
					<view class="flex" style="height: 30%;position: relative;" v-for="(good_item ,index) in item.cboardVO.cboardTabVO.skuItems">
						<view class="h-100" style="width: 50%;">
							<image :src="good_item.picUrl" style="width: 100%;" class="h-100" mode="aspectFit"></image>
							<image :src="'/static/images/new/tag'+index+'.png'" class="cboardVO_tag" mode="aspectFit"></image>
						</view>
						<view class="h-100 flex flex-wrap flex-direction justify-center" style="width: 50%;">
							<view class="w-100 priceColor">{{good_item.sellPrice.text}}</view>
							<view class="w-100 text-gray text-sm padding-top-xs">日售{{good_item.dailySales}}</view>
						</view>
					</view>
				</view>

			</view> -->

		</view>
		<view class="place">
		</view>
		<view class="no-more" v-if="loading">
			{{ hasMore ? '' : list.length === 0  ? '无相关数据...' : '已经到底了...' }}
		</view>
	</view>
</template>

<script>
	import { setTabBarBadge } from '@/utils/util.js'
	import {getCart, setCart ,resetCart, getCartNumber,setGoodsData,
	setCartDetails,
	 setGoodsDetails,getToken} from '@/utils/auth.js'
	export default {
		data() {
			return {
				good_data:{
					number: 1,
					imgList:[],
					selectSku:{},
					sku: [],
					skuArr: []
				},
				list: []
			}
		},
		props:{
			propsList:{
				type:Array
			},
			loading: {
				type: Boolean,
				default: false
			},
			hasMore: {
				type: Boolean,
				default: false
			},
			hasToken: {
				type: Boolean,
				default: true
			}
		},
		watch: {
		    propsList: function(newVal,oldVal){
		        this.list = newVal;  //newVal即是chartData
		    }
		 },
		methods: {
			jumpDetails(item) {
				uni.navigateTo({
					url: '/pages/views/goods/goodsDetails?id=' + item.id
				});
			},
			addCart(item) {
				if(!getToken()){
					uni.navigateTo({ //登录
						url:'/pages/login/index1'
					})
					return
				}
				if (!item.ifSale) {
					this.$toast('该商品已下架')
					return
				}
				const cartList = getCart()
				item.imgList = item.url.split(',')
				item.number = 1
				item._selectedSku = [{
					id: item.id,
					imgs: '',
					money: item.price,
					number: 1,
					tagname: item.goodsName
				}]
				item._skus = [
					{
						sku_id: item.id,
						skuname: '规格',
						child: [
							{
								id: 1,
								imgs: '',
								money: item.price,
								number: 1,
								tagname: item.goodsName
							}
						]
					}
				]
				const goodsItem = item
				let hasItem = false
				const cartHasGoodsList = cartList.map(v => {
					if (v.id === (goodsItem.id +'')) {
						hasItem = true
						v.number = v.number >= 99999 ? 99999 : v.number + 1
					}
					return v
				})
				if (!hasItem) {
					cartHasGoodsList.push(item)
				}
				resetCart(cartHasGoodsList)
				setTabBarBadge(cartHasGoodsList.length)
				this.$toast('加入购物车成功')
			},
		},
	}
</script>

<style scoped lang="scss">
	.good_skuSubTitle {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.goodList {
		position: relative;
		padding: 20rpx;
		padding-bottom:  40upx;
		column-count: 2;
		/*分为两列  用于瀑布流*/
		column-gap: 20rpx;

		background: #F8F8F8;
		overflow: hidden;
	}
	.no-more {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		// padding: 40upx;
		font-size: 28upx;
		color: #000;
		padding: 10upx;
	}
	.tag1 {
		font-size: 20rpx;
		border: 1px solid #FF5560;
		color: #FF5560;
		border-radius: 15%;
		padding: 0 4rpx;
	}
	.cboardVO{
		height: 65vw;
		background-size: 100% 100%;
	}

	.cboardVO_tag{
		width: 50rpx;height: 50rpx;position: absolute;
		left: 0;top: 0;
	}







	.loading {
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #ccc;
		font-size: 24upx;
		width: 100%;
		margin-bottom: 20upx;
	}

	.goods {
		height: 100%;
		overflow: auto;
		margin-bottom: 20upx;
		break-inside: avoid;
		/*用于瀑布流*/
		border-radius: 10upx;
		box-sizing: content-box;

		&:first-child {
			margin-top: 0;
		}
	}

	.goods .top {
	    width: 100%;
	    height: 0;
	    padding-bottom: 100%;
	    position: relative;
		overflow: hidden;
		background-color: #ffffff;
	}

	.top .cover {
		width: 100%;
		 height: 100%;
		position: absolute;
		display: flex;
		align-items: center;
	}

	.top .tags {
		width: 65upx;
		height: 65upx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bottom {
		background-color: #ffffff;
		overflow: hidden;
	}

	.goods_name {
		/* height: 66upx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: bold;
		line-height: 48rpx;
	}


	.bottom .price .text1 {
		font-size: 36upx;
		font-weight: bold;
		color: $mycolor;
	}

	.bottom .price .text2 {
		font-size: 22upx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 15upx;
	}

	.g_left {
		font-size: 24upx;
		align-items: center;
	}

	.g_left text {
		display: inline-block;
		height: 35upx;
		line-height: 35upx;
		border-radius: 10upx;
		color: $mycolor;
	}

	.g_right {
		font-size: 28upx;
		color: $mycolor;
	}
</style>
