<template>
	<view class="waterfall">
		<!-- 商城导航图标 -->
		<block v-if="navigation.length > 0">
			<div class="user-oreder web-cell">
				<block v-for="(item, index) in goodsCategoryList" :key="index">
					<div class="web-cell-content web-text-center" @click="onCategory(item)">
						<image :src="item.image" style="width: 30px; height: 30px" mode="widthFix"></image>
						<text>{{ item.title }}</text>
					</div>
				</block>
			</div>
		</block>
		<block v-else>
			<uni-card :border="false" :padding="'12px 4px'">
				<view class="web-cell" style="justify-content: center; align-items: center">
					<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
				</view>
			</uni-card>
		</block>
		<block v-if="!hideTools">
			<view class="waterfall">
				<uv-waterfall ref="waterfall" v-model="goodsList" :add-time="10" :left-gap="leftGap" :right-gap="rightGap" :column-gap="columnGap" @changeList="changeList">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
								<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="navTo(item)">
									<image :src="item.image ? JSON.parse(item.image)[0] : []" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title" @click="navTo(item)">
										<text class="value">{{ item.goodsName }}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="web-text-danger">￥{{ item.price }}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
								<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="navTo(item)">
									<image :src="item.image ? JSON.parse(item.image)[0] : []" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title" @click="navTo(item)">
										<text class="value">{{ item.goodsName }}</text>
									</view>
									<view class="waterfall-item__ft__desc uv-line-2">
										<text class="web-text-danger">￥{{ item.price }}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</view>
		</block>
		<block v-else>
			<view class="skeleton" style="display: flex">
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
				</uni-card>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
				</uni-card>
			</view>
			<view class="skeleton" style="display: flex">
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
				</uni-card>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
				</uni-card>
			</view>
		</block>
	</view>
</template>
<script>
import * as GoodsApi from '@/api/shop/goods';
import * as GoodsCategoryApi from '@/api/shop/goodsCategory';
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useTenantStore } from '@/store/modules/tenant';

const tenantStore = useTenantStore();

export default {
	data() {
		return {
			goodsList: [], // 瀑布流全部数据
			list1: [], // 瀑布流第一列数据
			list2: [], // 瀑布流第二列数据
			goodsCategoryList: [], // 商品分类
			leftGap: 10,
			rightGap: 10,
			columnGap: 10,
			// 小程序导航图标
			navigation: [],
			// 骨架屏
			hideTools: true,
			// 商品分类
			categoryId: undefined
		};
	},
	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() {
		// const {
		// 	data
		// } = await this.getData();
		// this.list = data;

		// 获取服务租户信息包
		const info = await tenantStore.fetchTenantInfo();

		// 解析小程序导航图标
		if (info.mpMenus) {
			const arr1 = info.mpMenus.filter((d) => d.type == 3);
			console.log('info.mpMenus: ', arr1);
			if (arr1) {
				this.navigation = arr1;
			}
		}
		// 请求数据
		this.reload();
	},
	methods: {
		async reload() {
			const app = this;

			// 获取服务租户信息包
			const info = await tenantStore.fetchTenantInfo();

			// 登录状态
			if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
				app.isLogin = true;
			}

			// 解析小程序导航图标
			if (info.mpMenus) {
				const arr1 = info.mpMenus.filter((d) => d.type == 3);
				console.log('info.mpMenus: ', arr1);
				if (arr1) {
					app.navigation = arr1;
				}
			}
			// 请求数据
			Promise.all([app.pageGoods(), app.getGoodsCategory()]).then((res) => {
				app.goodsList = res[0];
				app.goodsCategoryList = res[1];
				app.hideTools = false;
			});
		},
		pageGoods() {
			const app = this;
			const { categoryId } = this;
			return new Promise((resolve, reject) => {
				GoodsApi.pageGoods({ parentId: categoryId })
					.then((result) => {
						resolve(result.list);
					})
					.catch(reject);
			});
		},
		getGoodsCategory() {
			const app = this;
			return new Promise((resolve, reject) => {
				GoodsCategoryApi.pageGoodsCategory({ parentId: 0 })
					.then((result) => {
						resolve(result.list);
					})
					.catch(reject);
			});
		},
		navTo(item) {
			uni.navigateTo({
				url: '/package/goods/detail?id=' + item.goodsId
			});
		},
		onCategory(item) {
			this.categoryId = item.categoryId;
			this.goodsList = [];
			this.list1 = [];
			this.list2 = [];
			this.reload();
		},
		// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
		changeList(e) {
			console.log('e: ', e);
			this[e.name].push(e.value);
		},
		// 模拟的后端数据
		getData() {
			return new Promise((resolve) => {
				const imgs = [
					{
						url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',
						width: 100,
						height: 110
					},
					{
						url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',
						width: 200,
						height: 220
					},
					{
						url: 'https://via.placeholder.com/300x340.png/5ac725/fff',
						width: 300,
						height: 340
					},
					{
						url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',
						width: 400,
						height: 400
					},
					{
						url: 'https://via.placeholder.com/500x510.png/909399/fff',
						width: 500,
						height: 510
					},
					{
						url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',
						width: 600,
						height: 606
					},
					{
						url: 'https://via.placeholder.com/310x422.png/f1a532/fff',
						width: 310,
						height: 422
					},
					{
						url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',
						width: 320,
						height: 430
					},
					{
						url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',
						width: 330,
						height: 424
					},
					{
						url: 'https://via.placeholder.com/340x435.png/5ac725/fff',
						width: 340,
						height: 435
					},
					{
						url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',
						width: 350,
						height: 440
					},
					{
						url: 'https://via.placeholder.com/380x470.png/909399/fff',
						width: 380,
						height: 470
					}
				];
				let list = [];
				const doFn = (i) => {
					const randomIndex = Math.floor(Math.random() * 10);
					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 < 20; i++) {
						list.push(doFn(i));
					}
					resolve({
						data: list
					});
				}, 200);
			});
		}
	}
};
</script>
<style>
page {
	/* background: url('https://oss.wsdns.cn/20240505/eaa18a0271fa42aa8395bd5eb874808a.png') no-repeat; */
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f0f2f5;
	width: 750rpx;
	overflow-x: hidden;
}
</style>
<style scoped lang="scss">
$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

.waterfall-item {
	overflow: hidden;
	margin-top: 10px;
	border-radius: 6px;

	&__image {
		background-color: #fff;
	}
}

.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;
	}
}

.user-oreder {
	width: 720rpx;
	margin: 20rpx auto 8rpx auto;
	padding: 28rpx 0;
	border-radius: 16rpx;
	background: #fff;

	.web-cell-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.web-text-center {
		text-align: center;
	}
}
</style>
