<template>
	<view class="waterfall">
		<uv-waterfall ref="waterfall" v-model="state.list" :add-time="10" :left-gap="state.leftGap"
			:right-gap="state.rightGap" :column-gap="state.columnGap" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in state.list1" :key="item.id" class="waterfall-item" @click="to(item)">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="info">
							<view class="title">名称：{{ item.storeName }}</view>
							<!-- <view class="price">价格：<text class="num">{{ item.price }}</text></view> -->
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in state.list2" :key="item.id" class="waterfall-item" @click="to(item)">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="info">
							<view class="title">名称：{{ item.storeName }}</view>
							<!-- <view class="price">价格：<text class="num">{{ item.price }}</text></view> -->
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed,
		getCurrentInstance,
		onMounted
	} from 'vue';

	const state = reactive({
		list: [], // 瀑布流全部数据
		list1: [], // 瀑布流第一列数据
		list2: [], // 瀑布流第二列数据
		leftGap: 12,
		rightGap: 12,
		columnGap: 10,
	})

	const waterfall = ref()

	const props = defineProps({
		list: {
			type: Array
		}
	});

	const imageStyle = computed(() => {
		return item => {
			const v = uni.upx2px(750) - state.leftGap - state.rightGap - state.columnGap;
			const w = v / 2;
			const rate = w / item.w;
			const h = rate * item.h;
			return {
				width: '100%',
				height: h + 'px'
			}
		}
	})

	const changeList = (e) => {
		state[e.name].push(e.value);
	}

	const to = (item) => {
		uni.navigateTo({
			url: `/pages/components/pages/product/detail?id=${item.id}`
		})
	}

	// #ifdef MP-WEIXIN
	watch(
		() => props,
		(newVal) => {
			state.list = props.list
		}, {
			deep: true,
			immediate: true
		}
	);
	// #endif
</script>

<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		border-radius: 6px;
		background-color: #fff;
		margin-bottom: 18rpx;
	}

	.info {
		padding: 14rpx 16rpx 24rpx 16rpx;

		.title {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			font-size: 30rpx;
			color: #333;
		}

		.price {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			margin-top: 8rpx;

			.num {
				color: #ff4c4c !important;
			}
		}
	}
</style>