<template>
	<view v-if="template">
		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
			:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true" bgColor="#fcc74e">
			<view class="container">
				<!-- 顶部 -->
				<view class="top">
					<!-- 顶部-地址&搜索 -->
					<view class="locTop">
						<view class="locTop-left">
							<image style="width: 34rpx;height: 34rpx;"
								src="https://jiangxiaoxian.0rui.cn/locationTop.png" mode=""></image>
							<view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 26rpx;">全国
							</view>
						</view>
						<view class="locTop-right">
							<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
								<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
									bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="search" @focus="toPage()"/>
							</uni-section>
							<!-- <uni-search-bar></uni-search-bar> @confirm="search"-->
						</view>
					</view>

					<!-- 顶部-三个内容跳转 -->
					<view class="navTop">
						<view class="navTop-left">
							<view class="title" style="">食堂招租</view>
							<view class="intro" style="color: #f42b2b;margin-top: 20rpx;">味揽商机 食载未来</view>
						</view>
						<view class="navTop-right">
							<view class="navRight1">
								<view class="title" style="">平台学院</view>
								<view class="intro" style="color: #05b0b0;margin-top: 20rpx;">学知赋能成长</view>
							</view>
							<view class="navRight2">
								<view class="title" style="">原料商城</view>
								<view class="intro" style="color: #f58f3d;margin-top: 20rpx;">优材好料直供</view>
							</view>
						</view>
					</view>

				</view>
				<!-- 轮播图 -->
				<view class="swiper-box">
					<view class="swiper_s">
						<swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11"
							indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent"
							@animationfinish="swiperChange">
							<!-- v-for="(item, index) in swiperList" :key="index" @click="openSwiper(item)"-->
							<swiper-item style="margin: 0 auto;">
								<view style="position: relative;width: 100%;height: 100%;">
									<!--<view class="fnon_tit"></view>
									 <view class="text">{{ item.title ? item.title : '' }}</view> 
									 @click="click(item.url)" 跳转活动链接 -->
									<image class="swiper-image" src="/static/swiper.png" mode="scaleToFill" />
								</view>
							</swiper-item>
							<swiper-item style="margin: 0 auto;">
								<view style="position: relative;width: 100%;height: 100%">
									<!--<view class="fnon_tit"></view>
									 <view class="text">{{ item.title ? item.title : '' }}</view> 
									 @click="click(item.url)" 跳转活动链接 -->
									<image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" />
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 推荐列表 -->
				<view class="recommend-box">
					<!-- 推荐标题 -->
					<view class="recom-titleBox">
						<view style="font-size: 38rpx;line-height: 38rpx;font-weight: 800;color: #333333;">平台推荐</view>
						<view class="title-more">
							<view style="font-size: 26rpx;line-height: 26rpx;font-weight: 400;color: #999999;">查看更多
							</view>
							<image style="width: 28rpx;height: 28rpx;margin-left: 20rpx;"
								src="https://jiangxiaoxian.0rui.cn/nextMore.png" mode=""></image>
						</view>
					</view>
					<view class="rrecommList">
						<view class="reListItem">
							<!-- 左侧图片 -->
							<view class="listItem-images">
								<image style="width: 77rpx;height: 36rpx;z-index: 100;position: relative;top: 34rpx;left: 0rpx;"
									src="https://jiangxiaoxian.0rui.cn/hot.png"></image>
								<image class="iamges-mainImg" src="https://jiangxiaoxian.0rui.cn/model.png"></image>
							</view>
							<!-- 右侧内容 -->
							<view class="listItem-contents">
								<view class="title2" style="margin-bottom: 20rpx;">食堂餐厅外包]洛阳某本科食堂新装修</view>
								<view class="">标签</view>
								<view class="cons-third">
									<view style="display: flex;">
										<image style="width: 24rpx;height: 24rpx;"
											src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
										<view class="title3" style="margin-left: 10rpx;">河南省洛阳市</view>
									</view>
									<view class="title3">2025-07-24</view>
									<view style="display: flex;">
										<image style="width: 23rpx;height: 15rpx;"
											src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
										<view class="title3" style="margin-left: 10rpx;">河南省洛阳市</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>


		</s-layout>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';

	// 隐藏原生tabBar
	uni.hideTabBar({
		fail: () => {},
	});

	const template = computed(() => sheep.$store('app').template?.home);

	onLoad((options) => {
		// #ifdef MP
		// 小程序识别二维码
		if (options.scene) {
			const sceneParams = decodeURIComponent(options.scene).split('=');
			options[sceneParams[0]] = sceneParams[1];
		}
		// #endif

		// 预览模板
		if (options.templateId) {
			sheep.$store('app').init(options.templateId);
		}

		// 解析分享信息
		if (options.spm) {
			$share.decryptSpm(options.spm);
		}

		// 进入指定页面(完整页面路径)
		if (options.page) {
			sheep.$router.go(decodeURIComponent(options.page));
		}
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		sheep.$store('app').init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
	
	
	function toPage() {
		uni.navigateTo({
			url:'/packageA/search/index'
		})
	}
</script>

<style lang="scss" scoped>
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.title {
		color: #3d3d3d;
		font-size: 34rpx;
		font-weight: 800;
		line-height: 34rpx;
	}

	.intro {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 24rpx;
	}
	
	.title2 {
		color: #3d3d3d;
		font-size: 30rpx;
		font-weight: 800;
		line-height: 42rpx;
	}

	.title3 {
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		line-height: 22rpx;
	}

	.container {
		min-height: 90vh;
		width: 100%;
		background-color: #f7f7f7;
		// display: grid;
		// background-color: linear-gradient(to bottom, #fcc74e 0%, #f7f7f7 50%);
		// background-size: 100% 100%;

		.top {
			height: 500rpx;
			background-image: url('https://jiangxiaoxian.0rui.cn/topBack.png');
			background-size: 100%;
			padding: 30rpx 30rpx 30rpx 30rpx;
			display: grid;

			.locTop {
				width: 100%;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				// align-items: center;

				.locTop-left {
					width: 276rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.locTop-right {
					width: 406rpx;
					height: 70rpx;

				}
			}

			.navTop {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				// align-items: center;

				.navTop-left {
					width: 270rpx;
					height: 350rpx;
					background-image: url('https://jiangxiaoxian.0rui.cn/rent.png');
					background-size: 100%;
					border-radius: 18rpx;
					padding: 40rpx 30rpx 0rpx 30rpx;

				}

				.navTop-right {
					display: grid;
					justify-content: center;
					align-items: center;
					width: 330rpx;

					.navRight1 {
						width: 270rpx;
						height: 140rpx;
						background-image: url('https://jiangxiaoxian.0rui.cn/school.png');
						background-size: 100%;
						border-radius: 18rpx;
						padding: 40rpx 30rpx 0rpx 30rpx;
					}

					.navRight2 {
						margin-top: 30rpx;
						width: 270rpx;
						height: 140rpx;
						background-image: url('https://jiangxiaoxian.0rui.cn/shoppingMall.png');
						background-size: 100%;
						border-radius: 18rpx;
						padding: 40rpx 30rpx 0rpx 30rpx;
					}
				}
			}


		}

		.swiper-box {
			width: 690rpx;
			padding: 0 30rpx;
			// display: grid;
			// justify-content: center;
			height: 280rpx;
			position: relative;

			.swiper_s {
				width: 100%;
				height: 100%;
				// display: grid;
				// justify-content: center;

				.swiper-image {
					width: 100%;
					height: 100%;
					border-radius: 36rpx;
					object-fit: contain;
				}
			}

		}

		.recommend-box {
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

			.recom-titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 690rpx;

				.title-more {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.rrecommList {
				margin-top: 30rpx;
				// padding: 30rpx;

				.reListItem {
					background-color: #ffffff;
					width: 630rpx;
					height: 190rpx;
					padding: 30rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-radius: 18rpx;

					.listItem-images {
						display: grid;
						justify-content: flex-start;

						.iamges-mainImg {
							width: 190rpx;
							height: 190rpx;
							position: relative;
							right: 0rpx;
							bottom: 18rpx;
							z-index: 1;

						}
					}
					
					.listItem-contents {
						margin-left: 20rpx;
						
						.cons-third {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-around;
						}
					}
				}

			}

		}


	}
</style>