<template>
	<view class="waterfall">
		<uv-waterfall ref="waterfall"
		class="mt10"
			v-model="list"
			:add-time="10"
			:left-gap="leftGap"
			:right-gap="rightGap"
			:column-gap="columnGap"
			@changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<!-- <view >
						<uv-swiper
						    imgMode="widthFix"
							:list="listSwiper" 
							:autoplay="false" 
							height="240"
							width="120"
							style="border-radius: 0;"
							>
							
						</uv-swiper>
					</view> -->
					<view v-for="(item, index) in list1"
						@click.stop="godetail(item)"
						:key="item.id"
						class="waterfall-item ">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="p4">
							<view class="w500 m2">
								{{
									item.name
								}}
								<!-- 华为P60 香芋紫 1TB -->
							</view>
							<view class="flex">
								<view class="baoyou">包邮</view>
								<!-- <view class="youhuiquan">优惠券</view> -->
							</view>
							<view class="flex justify-between  items-baseline">
								<rkPrice new-color="#000" newPriceSlotText="" :price="{
									newPrice:item.price,
									oldPrice:item.price
								}" ></rkPrice>
								<view class="w500 t5 f10">{{item.ficti}}人购买</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list2"
						:key="item.id"
						@click.stop="godetail(item)"
						class="waterfall-item">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="p4">
							<view class="w500 m2">
								{{
									item.name
								}}
								<!-- 华为P60 香芋紫 1TB -->
							</view>
							<view class="flex">
								<view class="baoyou">包邮</view>
								<!-- <view class="youhuiquan">优惠券</view> -->
							</view>
							<view class="flex justify-between  items-baseline">
								<rkPrice new-color="#000" newPriceSlotText="" :price="{
									newPrice:item.price,
									oldPrice:item.price
								}" ></rkPrice>
								<view class="w500 t5 f10">{{item.ficti}}人购买</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class='loadingicon acea-row row-center-wrapper' :hidden='loading==false'>
				<text class='loading iconfont icon-jiazai'></text>
			</view>
			<view class="mores-txt flex" v-if="goodScroll">
				<text>我是有底线的</text>
			</view>
		</uv-waterfall>
		<uv-load-more :status="loadStatus"></uv-load-more>
	</view>
	
</template>
<script>

	import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import rkPrice from '@/components/rk-price.vue'
	export default {
		components:{
			rkPrice
		},
		data() {
			return {
				tabClick: 0, //导航栏被点击
				tabTitle:[
				{
					name:'热门推荐',
					dec:'超值低价',
					titleColor:'#F80B0B',
					decbg:['#FF6E46','#FF3B38']
				},
				{
					name:'电子数码',
					dec:'新品发售',
					titleColor:'#F80B0B',
					decbg:['#FF6E46','#FF3B38']
				},
				{
					name:'酒水冲饮',
					dec:'质优价廉',
					titleColor:'#F80B0B',
					decbg:['#FF6E46','#FF3B38']
				},
				{
					name:'日用百货',
					dec:'清仓特价',
					titleColor:'#F80B0B',
					decbg:['#FF6E46','#FF3B38']
				},
				{
					name:'美妆特价',
					dec:'超值低价',
					titleColor:'#F80B0B',
					decbg:['#FF6E46','#FF3B38']
				},
				],
				loadStatus:'loadmore',
				params: { //精品推荐分页
					page: 1,
					limit: 10,
					cid: 0
				},
				listSwiper:[
				],
				list: [],// 瀑布流全部数据
				list1: [],// 瀑布流第一列数据
				list2: [],// 瀑布流第二列数据
				leftGap: 20,
				rightGap: 20,
				columnGap: 10
			}
		},
		computed: {
			imageStyle(item) {
				return item=>{
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v/2;
					const rate = w / item.w;
					const h = rate* item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad() {
			await this.get_host_product();
		},
		async mounted() {
			 await this.get_host_product();
		},
		methods: {
			longClick(index, id, fid) {
				this.tabClick = index //设置导航点击了哪一个
			},
			godetail(item){
				goShopDetail(item.id);
			},
			get_host_product: function() {
				if (this.goodScroll) return;
				this.loading = true
				this.loadStatus = 'loading';
				this.params.cid = 0;
				getProductHot(
					this.params
				).then((res) => {
					this.$set(this.params, 'page', this.params.page + 1);
					this.goodScroll = this.params.page > res.data.totalPage;
					this.list = this.list.concat(res.data.list || []);
					this.$emit('noCommodity', this.list.length);
					this.loading = false
					this.loadStatus = 'loadmore';
				}).catch(err => {
					this.loading = false
					this.loadStatus = 'loadmore';
				});
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e){
				console.log(e,'111')
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData() {
				return new Promise((resolve)=>{
					const imgs = [
					
					];
					let list = [];
					const doFn = (i)=>{
						const randomIndex = Math.floor(Math.random() * 2);
						return {
							id: guid(),
							allowEdit: i==0,
							image: imgs[randomIndex].url,
							w: imgs[randomIndex].width,
							h: imgs[randomIndex].height,
							title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架`: `(${this.list.length + i +1})uv-ui支持多平台`,
							desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` : 
							`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
						}
					};
					// 模拟异步
					setTimeout(() => {
						for (let i = 0; i < 3; i++) {
							list.push(doFn(i));
						}
						resolve({data:list});
					}, 200)
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f1f1f1;
	}
</style>
<style scoped lang="scss">
	.navTabBox {
		width: 100%;
		padding-bottom: 10px;
		color: rgba(255, 255, 255, 1);
		position: relative;
		padding: 0 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		z-index: 9;
	
		&.isFixed {
			z-index: 10;
			position: fixed;
			left: 0;
			width: 100%;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
		}
	
		.click {
			// color: white;
		}
	
		.longTab {
			width: 94%;
	
			.longItem {
				//height: 72rpx;
				display: inline-block;
				// line-height: 52rpx;
				text-align: center;
				font-size: 28rpx;
				color: #000;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-right: 42rpx;
	
				&.click {
					font-weight: bold;
					font-size: 30rpx;
					color: #fff;
					font-weight: bold;
				}
	
				.name {
					height: 48rpx;
				}
			}
	
			.underlineBox {
				height: 3px;
				transition: .5s;
	
				.underline {
					width: 33rpx;
					height: 4rpx;
					background-color: #fff;
				}
			}
		}
	
		.category {
			height: 66rpx;
			line-height: 46rpx;
			z-index: 3;
	
			// padding: 0 15rpx 0 25rpx;
			.iconfont {
				font-size: 24rpx;
			}
		}
	}
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	.baoyou{
		background: linear-gradient( 164deg, #FF784C 0%, #FF4C56 100%); border-radius: 1px;
		color:#fff;
		font-size: 18rpx;
		margin: 10rpx;
		padding: 4rpx 6rpx;
		font-weight: 500;
	}
	.waterfall-item {
		background: #fff;
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}
	.waterfall-item__image{
		background-color: #fff;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}
	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;
		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}
		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}
		&__btn {
			padding: 10px 0;
		}
	}
</style>