<template>
	<view class="bg bg-padding">
		<CustomTabBar :currentTab="2" />
		
		<image :src="homeUi.dbtp" mode="heightFix" class="topImg"></image>
		
		<!-- 搜索框 -->
		<view class="search-box" @click="gotoPath('/subPackages/search/index')">
			<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/index/search.png" mode=""></image>
			搜一搜您想要的
		</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="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 class="module-box">
			<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"></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="widthFix"></image>
					<view class="hot-content">
						<view class="title">{{item.title}}</view>
						<view class="price">￥{{item.price / 100}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				homeUi: {},
				navList: [],
				topBanner: [],
				smallBanner: [],
				recommendNav: [],
				moduleList: [],
				hotList: [],
				finished: false
			}
		},
		onLoad() {

		},
		onReady() {
			this.sendRequest()
		},
		methods: {
			// 首页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) {
				// 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: 4
				},'/api/product/get_product_by_tag').then(res => {
					this.hotList = [...this.hotList, ...res.data.list]
					
					if(res.data.list.length < 4) this.finished = true
				})
			}
		},
		onReachBottom() {
			setTimeout(() => {
				if(!this.finished) this.getHotList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background: #CDE29E;
		padding: 145rpx 26rpx;
	}
	
	image {
		display: block;
	}
	
	.topImg {
		height: 114.67rpx;
		margin-left: 30rpx;
	}
	
	.search-box {
		height: 67rpx;
		background: rgba(255, 255, 255, .66);
		border-radius: 20rpx;
		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;
		}
	}
	
	.top-banner {
		width: 100%;
		height: 353rpx;
		border-radius: 20rpx;
	}
	
	.nav-box {
		margin-top: 45rpx;
		display: flex;
		flex-wrap: wrap;
		
		.nav-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			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;
	}
	
	.recommend-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.recommend-item {
			width: 336.67rpx;
			height: 225.33rpx;
			margin-top: 40rpx;
		}
	}
	
	.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;
		
		.hot-item {
			width: 340rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 16rpx;
			
			image {
				width: 340rpx;
			}
			
			.hot-content {
				padding: 13rpx 13rpx 26rpx 13rpx;
				
				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
				
				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #E62525;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>
