<template>
	<view class="container">
		<view class="card-body">
			<block v-if="merchant.length > 0">
				<uni-grid :column="3" borderColor="transparent" :highlight="true" @change="change">
					<uni-grid-item v-for="(item, index) in merchant" :index="index" :key="index">
						<view class="merchant-card" style="display: flex; flex-direction: column">
							<image :src="item.image" mode="widthFix" class="merchant-image" />
							<text class="merchant-name">{{ item.merchantName }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</block>
			<block v-else>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
					<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
					<uv-gap height="16"></uv-gap>
				</uni-card>
			</block>
		</view>
	</view>
	<!-- 登录组件 -->
	<ws-login ref="login" :logo="logo" @done="reload" />
</template>

<script>
import * as GoodsApi from '@/api/shop/goods';
import * as Api from '@/api/layout';
import * as MerchantApi from '@/api/shop/merchant';
import * as MpMenuApi from '@/api/cms/mp-menu/index';
import * as ItemApi from '@/api/booking/item';
import { useTenantStore } from '@/store/modules/tenant';
import { openUrl } from '@/utils/common';
const tenantStore = useTenantStore();

export default {
	data() {
		return {
			itemType: null,
			items: ['关注', '推荐'],
			// 场馆列表
			merchant: [],
			// 网站参数
			fields: {},
			// 幻灯片广告
			ads: [],
			// 幻灯片链接地址
			pathList: [],
			// 项目列表
			itemList: [],
			// 小程序导航图标
			navigation: [],
			// 小程序导航图标(双排)
			doubleNavigation: [],
			isLogin: false,
			// 骨架屏
			hideTools: true,
			mp_menu_display_method: 0
		};
	},
	onLoad(o) {
		this.itemType = o.type
		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.fields) {
				info.fields.map((d) => {
					const key = d.name;
					app.fields[key] = d.value;

					if (d.name == 'h5_url') {
						// 缓存H5地址
						uni.setStorageSync(d.name, d.value);
					}

					if (d.name == 'mp_menu_display_method') {
						app.mp_menu_display_method = d.value;
					}
				});
			}
			// 解析幻灯片数据
			if (info.ads) {
				const ad = info.ads.filter((d) => d.adType == '幻灯片');
				if (ad) {
					const adsList = JSON.parse(ad[0].images);
					adsList.map((d) => {
						app.ads.push(d.url);
					});
					app.pathList = JSON.parse(ad[0].path);
				}
				app.hideTools = false;
			}
			// 解析小程序名称
			if (info.websiteName) {
				uni.setNavigationBarTitle({
					title: info.websiteName
				});
			}
			// 解析网站logo
			if (info.websiteLogo) {
				uni.setStorageSync('app_logo', info.websiteLogo);
				app.logo = info.websiteLogo;
			}
			// 解析小程序导航图标
			if (info.mpMenus) {
				const arr = info.mpMenus.filter((d) => d.type == 2 && d.rows == 0);
				const arr1 = info.mpMenus.filter((d) => d.type == 2 && d.rows == 1);
				const arr2 = info.mpMenus.filter((d) => d.type == 2 && d.rows == 2);
				app.navigation = [];
				app.doubleNavigation = [];

				if (arr1) {
					app.doubleNavigation.push(arr);
					app.doubleNavigation.push(arr1);
				} else {
					app.doubleNavigation.push(arr);
				}
				//
				if (arr) {
					app.navigation = arr;
				}
			}
			// 请求数据
			Promise.all([app.getMerchantList()]).then((res) => {
				app.merchant = res[0];
			});
		},
		getSiteInfo() {
			const app = this;
			return new Promise((resolve, reject) => {
				Api.getSiteInfo()
					.then((result) => {
						resolve(result);
					})
					.catch(reject);
			});
		},
		getMerchantList() {
			const app = this
			const { itemType } = this
			return new Promise((resolve, reject) => {
				MerchantApi.listMerchant({itemType})
					.then((result) => {
						resolve(result);
					})
					.catch(reject);
			});
		},
		change(e) {
			const { index } = e.detail;
			const id = this.merchant[index].merchantId;
			this.openUrl(`/package/booking/index?id=${id}`);
		},
		onAds(index) {
			const { pathList } = this;
			this.openUrl(pathList[index]);
		},
		openUrl(url) {
			if (!this.isLogin) {
				this.$refs.login.open('bottom');
				return false;
			} else {
				uni.navigateTo({
					url
				});
			}
		}
	}
};
</script>
<style>
page {
	/* background: url('https://oss.wsdns.cn/20240502/75fc744657544a38a32f83a825688286.png') no-repeat; */
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f0f2f5;
	width: 750rpx;
	overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.container {
}

.segmented {
	display: block;
	justify-content: space-around;
	text-align: center;
	width: 200rpx;
	margin: auto;
	color: #ffffff;

	.item {
		color: #666;
		font-size: 26rpx;
		padding: 0 12rpx;
	}

	.active {
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
	}
}

.user-oreder {
	display: flex;
	padding: 16px 0;

	.scroll-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 25rpx;

		.scrool-item-text {
			white-space: nowrap;
		}
	}

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

	.web-text-center {
		text-align: center;
	}
}
.menu-list {
	display: flex;
	padding: 16px 0;
	flex-wrap: wrap;

	.scroll-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 25rpx;

		.scrool-item-text {
			white-space: nowrap;
		}
	}

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

	.web-text-center {
		text-align: center;
	}
	.menu-title {
		white-space: nowrap;
		font-size: 26rpx;
	}
}
.card-title {
	width: 700rpx;
	margin: 12rpx auto;
	font-size: 34rpx;
	font-weight: 500;
	margin-top: 32rpx;
}

.merchant-card-title {
	width: 700rpx;
	margin: 12rpx auto;
	font-size: 40rpx;
	font-weight: 500;
	margin-top: 32rpx;
}

.card-body {
	width: 740rpx;
	margin: auto;

	.merchant-card {
		margin: 12rpx auto;
		background: #ffffff;
		border-radius: 10rpx;
		border-color: slategrey;
		border-radius: 16rpx;

		.merchant-image {
			width: 200rpx;
			border-radius: 16rpx 16rpx 0 0;
			height: 140rpx !important;
		}

		.merchant-name {
			padding: 10rpx;
			font-weight: 500;
			font-size: 26rpx;
			text-align: center;
		}

		.merchant-desc {
			width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.item-list {
	display: flex;
	flex-wrap: wrap;
	width: 720rpx;
	margin: auto;

	.item-bar {
		width: 138rpx;
		height: 138rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 10rpx;
		font-size: 26rpx;
	}
}

@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}

.navigation {
	padding: 0 30rpx 0 30rpx;
}

.scroll-list {
	@include flex(column);

	&__item {
		margin-right: 20px;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: $uni-text-color-placeholder;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__line {
		@include flex;
		margin-top: 10px;

		&__item {
			margin-right: 30px;
			text-align: center;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&__image {
				width: 61px;
				height: 48px;
			}

			&__text {
				margin-top: 5px;
				color: $uni-text-color-placeholder;
				font-size: 12px;
				text-align: center;
			}

			&--no-margin-right {
				margin-right: 0;
			}
		}
	}

	&__line__item__text {
		white-space: nowrap;
	}
}

</style>
