<template>
	<view class="container">
		<ws-search ref="search" />
		<uv-sticky bgColor="#fff" customNavHeight="0">
			<uv-tabs :list="list" @click="onTabs"></uv-tabs>
		</uv-sticky>
		<block v-if="ads.length > 0">
			<uv-gap height="16"></uv-gap>
			<view class="uv-demo-block" style="width: 688rpx; margin: auto">
				<uv-swiper :list="ads" bgColor="transparent" indicatorMode="dot" indicator circular :autoplay="false" radius="5" @click="onAds"></uv-swiper>
			</view>
		</block>
		<block v-else>
			<uni-card :border="false" :padding="'12px 4px'">
				<uv-skeleton rows="3" :loading="hideTools" :title="false"></uv-skeleton>
			</uni-card>
		</block>
		<!-- 		<uni-section title="竞赛进行时">
			<uni-list>
				<uni-list-item link title="XXXX竞赛1" />
				<uni-list-item link title="XXXX竞赛2" />
				<uni-list-item link title="XXXX竞赛3" />
			</uni-list>
		</uni-section> -->
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<!-- 暂无通知 -->
			<uni-section title="竞赛进行时">
				<uni-list>
					<uni-list-item link title="XXXX竞赛1" />
					<uni-list-item link title="XXXX竞赛2" />
					<uni-list-item link title="XXXX竞赛3" />
				</uni-list>
			</uni-section>
		</uni-card>
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<!-- 暂无通知 -->
			<uni-section title="团队动态">
				<!-- <uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架"></uv-alert> -->
				<uni-list>
					<uni-list-item link title="XXXX通知1" />
					<uni-list-item link title="XXXX通知2" />
					<uni-list-item link title="XXXX通知3" />
				</uni-list>
			</uni-section>
		</uni-card>
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<!-- 暂无课程表 -->
			<uni-section title="培训进行时">
				<uni-list>
					<uni-list-item link title="xxx培训课程表1" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
					<uni-list-item link title="xxx培训课程表2" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
					<uni-list-item link title="xxx培训课程表3" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
				</uni-list>
			</uni-section>
		</uni-card>
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<!-- 暂无课程表 -->
			<uni-section title="考试进行时">
				<uni-list>
					<uni-list-item link title="xxx考试1" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
					<uni-list-item link title="xxx考试2" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
					<uni-list-item link title="xxx考试3" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
				</uni-list>
			</uni-section>
		</uni-card>
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<!-- 1、培训一（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）
			2、培训二（同上）
			3、培训三（同上） -->
			<uni-section title="活动介绍">
				<uv-gap height="100"></uv-gap>
			</uni-section>
		</uni-card>
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<uni-section title="个人分享">
				<uv-gap height="100"></uv-gap>
			</uni-section>
		</uni-card>
		
		
	</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 {
			index: 0,
			name: '推荐',
			list: [
				{
					name: '推荐'
				},
				{
					name: '分享'
				},
				{
					name: '活动'
				},
				{
					name: '资讯'
				},
				{
					name: '亮点'
				}
			],
			items: ['关注', '推荐'],
			// 场馆列表
			merchant: [],
			// 网站参数
			fields: {},
			// 幻灯片广告
			ads: [],
			// 幻灯片链接地址
			pathList: [],
			// 项目列表
			itemList: [],
			// 小程序导航图标
			navigation: [],
			// 小程序导航图标(双排)
			doubleNavigation: [],
			isLogin: false,
			// 骨架屏
			hideTools: true,
			keyword: '',
			mp_menu_display_method: 0,
			baseList: [
				{
					name: 'photo',
					title: '李白'
				},
				{
					name: 'lock',
					title: '韩信'
				},
				{
					name: 'star',
					title: '刘备'
				},
				{
					name: 'star',
					title: '元芳'
				}
			]
		};
	},
	onLoad() {
		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) {
					console.log('ad: ', 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(), app.getItemList()]).then((res) => {
				app.merchant = res[0];
				app.itemList = res[1];
			});
		},
		getSiteInfo() {
			const app = this;
			return new Promise((resolve, reject) => {
				Api.getSiteInfo()
					.then((result) => {
						resolve(result);
					})
					.catch(reject);
			});
		},
		onTabs(e) {
			this.index = e.index;
			this.name = e.name;
		},
		leftClick() {},
		listAdList() {},
		pageGoods() {
			const app = this;
			return new Promise((resolve, reject) => {
				GoodsApi.pageGoods({})
					.then((result) => {
						resolve(result.list);
					})
					.catch(reject);
			});
		},
		getMerchantList() {
			const app = this;
			return new Promise((resolve, reject) => {
				MerchantApi.listMerchant({})
					.then((result) => {
						resolve(result);
					})
					.catch(reject);
			});
		},
		getItemList() {
			const app = this;
			return new Promise((resolve, reject) => {
				ItemApi.listItem({})
					.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}`);
		},
		onNavigation(e) {
			const { index } = e.detail;
			this.openUrl(this.navigation[index].path);
		},
		onItem(e) {
			const { index } = e.detail;
			this.openUrl(`/package/booking/merchant?type=` + this.itemList[index].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 {
	.search {
		background-color: #ffffff;
		padding: 20rpx;
	}
	.search-icon {
		width: 68rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}

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

	.web-text-center {
		text-align: center;
	}
	.menu-title {
		white-space: nowrap;
		font-size: 26rpx;
	}
	.grid-item-box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
.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 {
	width: 720rpx;
	min-height: 200rpx;
	margin: auto;
	justify-content: space-between;

	.item-bar {
		width: 145rpx;
		height: 145rpx;
		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;
	}
}

/* 单元格 */
// .web-cell {
// 	display: flex;

// 	&:not(.web-cell-align-top) {
// 		align-items: center;
// 	}

// 	&.web-cell-align-bottom {
// 		align-items: flex-end;
// 	}

// 	&>.web-cell-content {
// 		flex: 1;
// 		box-sizing: border-box;
// 	}

// 	&>*+.web-cell-content {
// 		// padding-left: @padding-sm;
// 	}

// 	.web-cell-title {
// 		// color: @heading-color;
// 		// font-size: @font-size-base + 1px;
// 	}

// 	.web-cell-desc {
// 		// color: @text-color-secondary;
// 		// font-size: @font-size-base - 1px;
// 		// margin-top: (@padding-xs / 2);
// 	}
// }
</style>
