<template>
	<view class="bg bg-padding">
		<CustomTabBar :currentTab="2" />
		
		<view class="top-image" :style="{'height':height+'px'}">
			<image :src="homeUi.dbtp" mode="heightFix" class="topImg"></image>
		</view>
		
		
		<!-- 搜索框 -->
		<view class="search-box" @click="gotoPath('/subPackages/search/index')" v-if="!SHFlag">
			<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/index/search.png" mode=""></image>
			搜一搜您想要的
			<view class="search-btn">搜索</view>
		</view>
		
		<!-- 顶部轮播 -->
		<swiper class="top-banner" :circular="true" :interval="6000" style="margin-top: 27rpx;"
			:duration="800" :indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0">
			<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoBannerDetail(item)">
				<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
			</swiper-item>
		</swiper>
		
		<!-- 金刚区 -->
		<view class="nav-box">
			<view v-for="(item,index) in navList" :key="index" class="nav-item" @click="gotoHomeDetail(item)">
				<image :src="item.icon" mode=""></image>
				{{item.menu_name}}
			</view>
		</view>
		
		<!-- 小轮播 -->
		<swiper class="small-banner" :circular="true" :interval="6000" style="margin-top: 27rpx;"
			:duration="800" :indicator-dots="false" :autoplay="true" v-if="smallBanner && smallBanner.length > 0">
			<swiper-item v-for="(item, index) in smallBanner" :key="index" @click.stop="gotoBannerDetail(item)">
				<image class="small-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
			</swiper-item>
		</swiper>
		
		<!-- 推荐广告 -->
		<view class="flex-between" style="margin-top: 36rpx;" v-if="recommendNav.length>0&&!SHFlag">
			<view class="country-box">
				<image class="img1" :src="xcsh.img1.image" @click.stop="gotoPath('/subPackages/food/cafe')" mode="aspectFill"></image>
				<view class="flex-between" style="padding-top: 10rpx;">
				<image v-for="(item,i) in xcsh.img2" :key="i" class="img2" 
				:src="item.image" @click="gotoPath(item.path)" mode="aspectFill"></image>
				</view>
			</view>
			<view class="recommend-box">
				<view v-for="(item,index) in recommendNav" :key="index" @click="gotoHomeDetail(item)">
					<image :src="item.icon" mode="" class="recommend-item"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 模块 -->
		<view class="module-box" v-if="!SHFlag">
			<view v-for="(item,index) in moduleList" :key="index" @click="gotoHomeDetail(item)">
				<image :src="item.icon" mode="widthFix" class="module-item"></image>
			</view>
		</view>
		
		<!-- 热门推荐 -->
		<image :src="homeUi.rmtjbttp" mode="heightFix" class="rmtj-img" v-if="!SHFlag"></image>
		<!-- <view class="hot-box">
			<view v-for="(num,nums) in 2" :key="nums">
				<view v-for="(item,index) in hotList" :key="index" v-if="index % 2 == nums" class="hot-item" @click="gotoDetailByType(item)">
					<image :src="item.headimg" mode="aspectFill"></image>
					<view class="hot-content">
						<view class="title">{{item.title}}</view>
						<view class="price">￥{{item.price / 100}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="new-hot-box hot-box" v-if="!SHFlag">
			<image class="hot-adv" v-if="hotAdv" :src="hotAdv.head_img" mode="aspectFill" @click.stop="gotoBannerDetail(hotAdv)"></image>
			<view v-for="(item,index) in hotList" :key="index" class="hot-item" @click="gotoDetailByType(item)">
				<image :src="item.headimg" mode="aspectFill"></image>
				<view class="hot-content">
					<view class="title text-overflowRows">{{item.title}}</view>
					<view class="price">￥{{item.price / 100}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				height: 0,
				statusBarHeight: 0,
				homeUi: {},
				navList: [],
				topBanner: [],
				smallBanner: [],
				recommendNav: [],
				moduleList: [],
				hotList: [],
				finished: false,
				hotAdv: null,
				CKMap: null,
				// 乡村生活
				xcsh: {
					img1: {
						image: "https://static.ticket.sz-trip.com/uploads/20250814/306961c1869208fb80f15c3e1566dfdf.png"
					},
					img2: [
						{
							image: "https://static.ticket.sz-trip.com/uploads/20250814/bf1b1cb267299a59285e32035684798b.png",
							path: "/subPackages/letter/index?type=yxdw&imgId=2380"
						},
						{
							image: "https://static.ticket.sz-trip.com/uploads/20250814/f74a19e9de6ee0165a0d45919e753034.png",
							path: '/subPackages/letter/index?type=whck&imgId=2379'
						}
					]
				},
				
				SHFlag: true,
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.initSHFlag()
		},
		// 离开当前页面时获取定位
		onHide() {
			// this.getLocation()
		},
		onReady() {
			this.initRectInfo()
			this.sendRequest()
			this.getHeadImg(2378).then(res => {this.CKMap = res})
		},
		methods: {
			initSHFlag () {
				let _this = this
				// 先查一遍
				try {
					_this.SHFlag = uni.getStorageSync('SHFlag')?true: false
				} catch (e) {
					_this.SHFlag = false
				}
				console.log(_this.SHFlag)
				setTimeout(()=>{
					try {
						_this.SHFlag = uni.getStorageSync('SHFlag')?true: false
					} catch (e) {
						_this.SHFlag = false
					}
					console.log(_this.SHFlag)
				},500)
			},
			
			initRectInfo () {
				const sysInfo = uni.getSystemInfoSync()
				this.statusBarHeight = sysInfo.statusBarHeight
				// 默认高度
				this.height = sysInfo.statusBarHeight + 40
			},
			// 首页UI配置跳转
			gotoHomeDetail(item) {
				
				
				if(item.jump_type == 'page') {
					// 内页
					// 4外部小程序 5外部链接 6内页
					switch (item.page_type){
						case 4:
							// #ifdef MP-WEIXIN
							uni.navigateToMiniProgram({
								shortLink: item.page
							})
							// #endif
							break;
						case 4:
							this.gotoWebUrl(item.page)
							break;
						case 6:
							this.gotoPath(item.page)
							break;
						default:
							break;
					}
				}else if(item.jump_type == 'link') {
					// 链接
					this.gotoWebUrl(item.url)
				}
			},
			// 广告跳转
			gotoBannerDetail(item) {
				
				
				if (this.SHFlag) { return }
				// 1产品详情 2功能模块 3外部链接 4外部小程序
				switch (item.jump_type){
					case 1:
						this.gotoDetailByType(item.product_model)
						break;
					case 2:
						this.gotoPath(item.front_model.inside)
						break;
					case 3:
						this.gotoWebUrl(item.tdata.url)
						break;
					case 4: 
						// #ifdef MP-WEIXIN
						uni.navigateToMiniProgram({
							shortLink: item.tdata.url
						})
						// #endif
						break;
					default:
						break;
				}
			},
			sendRequest() {
				// 获取首页UI配置
				let type_id = ''
				// #ifdef MP-WEIXIN
				type_id = 3
				// #endif
				
				// #ifdef H5
				type_id = 5
				// #endif
				this.Post({
					type_id: type_id
				},'/api/adv/get_home_ui').then(res => {
					console.log(res.data)
					// 标题图片
					for (let item of res.data.content) {
					    this.homeUi[item.id] = item.image
					}
					
					// 金刚区
					this.navList = res.data.nav_menu
					
					// 推荐广告
					this.recommendNav = res.data.recommend_data
					
					// 下面板块
					this.moduleList = res.data.func_data
				})
				
				// 头部banner
				this.Post({
				    type_id: 5,
				    position: 0,
				},"/api/adv/getAdv").then(res => {
				    if (res) {
				        this.topBanner = res.data
				    }
				});
				
				// 小banner
				this.Post({
				    type_id: 5,
				    position: 1,
				},"/api/adv/getAdv").then(res => {
				    if (res) {
				        this.smallBanner = res.data
				    }
				});
				
				this.getHotList()
			},
			getHotList() {
				this.Post({
					// tag_id: 648,
					offset: this.hotList.length,
					limit: 5,
					order: "sales_number"
				},'/api/product/get_product_by_type').then(res => {
					this.hotList = [...this.hotList, ...res.data.list]
					
					if(res.data.list.length < 5) this.finished = true
				})
				// 广告
				if (!this.hotAdv) {
					this.Post({
					    type_id: 5,
					    position: 6,
					},"/api/adv/getAdv").then(res => {
					    if (res) {
							if (Array.isArray(res.data) && res.data.length>0)
					        this.hotAdv = res.data[0]
					    }
					});
				}
			},
			
			openCKMap () {
				
				uni.previewImage({
					urls: [this.CKMap]
				})
			},
			
			
		},
		onReachBottom() {
			setTimeout(() => {
				if(!this.finished) this.getHotList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		// background: #CDE29E;
		background: linear-gradient(to bottom, #CDE29E 0%, #EDF5DC 360px, #EDF5DC 100%);
		padding: 0 26rpx 145rpx;
	}
	
	image {
		display: block;
	}
	.top-image{
		width: 100%;
		display: flex;
		align-items: flex-end;
		.topImg {
			height: 81.33rpx;
			margin-left: 30rpx;
		}
	}
	
	
	.search-box {
		height: 67rpx;
		background: rgba(255, 255, 255, .66);
		border-radius: 33rpx;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #808080;
		
		image {
			width: 30.67rpx;
			height: 30.67rpx;
			margin: 0 19rpx 0 27rpx;
		}
		.search-btn{
			width: 107rpx;
			height: 53rpx;
			background: rgba(106, 138, 39, 0.66);
			border-radius: 27rpx;
			text-align: center;
			line-height: 53rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-left: auto;
			margin-right: 7rpx;
		}
	}
	
	.top-banner {
		width: 100%;
		height: 353rpx;
		border-radius: 20rpx;
	}
	
	.nav-box {
		margin-top: 45rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 23rpx;
		
		
		.nav-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: 23rpx;
			
			image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 15rpx;
			}
		}
		
		.nav-item:nth-child(n+6) {
			margin-top: 36rpx;
		}
	}
	
	.small-banner {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.country-box{
		width: 343.33rpx;
		height: 451.33rpx;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20250813/542650d396ff373150917432ac6204e5.png");
		background-size: 100% 100%;
		padding: 101rpx 13rpx 0;
		flex-shrink: 0;
		.img1{
			width: 100%;
			height: 173.33rpx;
		}
		.img2{
			width: 153.33rpx;
			height: 153.33rpx;
		}
	}
	
	.recommend-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: column;
		width: 343.33rpx;
		height: 451.33rpx;
		
		.recommend-item {
			width: 336.67rpx;
			height: 220rpx;
		}
	}
	
	.module-box {
		margin-top: 40rpx;
		
		.module-item {
			margin-bottom: 20rpx;
			width: 100%;
		}
	}
	
	.rmtj-img {
		margin-top: 73rpx;
		height: 41.33rpx;
	}
	
	.hot-box {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		&.new-hot-box{
			flex-wrap: wrap;
			.hot-adv{
				width: 340rpx;
				height: 490rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 16rpx;
			}
		}
		
		.hot-item {
			width: 340rpx;
			height: 490rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 16rpx;
			
			image {
				width: 340rpx;
				height: 340rpx;
			}
			
			.hot-content {
				height: 150rpx;
				padding: 6rpx 13rpx 10rpx 13rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
				
				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #E62525;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>
