<template>
	<view class="main_container">
		<!-- 自定义头部模块 -->
		<u-navbar placeholder>
			<view class="u-nav-slot" slot="left" >
				<text style="color: #333;font-size: 36rpx;font-weight: 500;">猎人事务所</text>
			</view>
		</u-navbar>
		<!-- 搜索 -->
		<u-search
			v-model="keyword"
			placeholder="搜索场地"
			:showAction="false"
			height="80rpx"
			shape="square"
			bgColor="#F6F6F6"
			margin="20rpx 0"
			:inputStyle="{fontSzie: '28rpx',color: '#999'}"
			@custom="vadile"
			@search="vadile"
		/>
		<!-- 访问量 -->
		<AccessCard />
		<!-- 玩法列表 -->
		<PlayNav @playName="onPlayName" />
		<!-- 房间列表 -->
		<view class="room">
			<!-- 头部导航 -->
			<view class="nav_header">
				<view
					v-if="!(playId === 1 && item.title=== '剧本')" class="nav_item"
					v-for="(item, index) in navList"
					:key="index"
					:class="{active: expertActive === index}"
					@click="toggleList(item, index)"
				>
					<view class="nav_content">
						<text>{{ item.title }}</text>
						<text class="badge">({{ item.number }})</text>
					</view>
				</view>
			</view>
			<!-- 内容列表 -->
			<view class="expert_content">
				<swiper class="swiper" :current="expertActive" @animationfinish="toggleSwiper">
					<swiper-item>
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<!-- 场地 -->
								<PitchList :pitchList="showList" />
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item v-if="playId !== 1">
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<!-- 剧本 -->
								<ScriptList />
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<!-- 已有组局 -->
								<ExistingBureau />
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<u-loadmore 
				:loading-text="loadingText" 
				:loadmore-text="loadmoreText" 
				:nomore-text="nomoreText" 
			/>
		</view>
		<!-- 新建场地 -->
		<view v-if="showList.length === 0" class="add_mode" @click="goRouter">
			<u-icon name="plus-circle"></u-icon>
			<text class="m-l-20">新建场地</text>
		</view>
		<!-- 没有填写商家信息时提示 -->
		<u-popup :show="showTip" round="20" mode="center" closeable @close="showTip = false">
			<view class="tip_container">
				<view class="tip_title">- 温馨提示 -</view>
				<view class="tip_content">
					请设置企业资料 方可使用小程序
				</view>
				<view class="btn">去设置</view>
				<image class="bg_img" src="@/static/logo_start.png" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getGroundList, getSportList } from '@/api/sport.js'
	import AccessCard from '@/components/home/AccessCard.vue'
	import PlayNav from '@/components/home/PlayNav.vue'
	import PitchList from '@/components/home/PitchList.vue'
	import ScriptList from '@/components/home/ScriptList.vue'
	import ExistingBureau from '@/components/home/ExistingBureau.vue'
	import { mapGetters } from 'vuex'
	import { pro_http } from '@/utils/baseUrl.js'
	import loadMore from '@/mixins/loadMore.js'
	export default {
		components: { AccessCard, PlayNav, PitchList, ScriptList, ExistingBureau },
		data() {
			return {
				pro_http,
				keyword: null, // 输入场地号
				sportsRange: null, //运动类型
				showTip: true, // 提示信息
				expertActive: 0,
				playId: 1, // 1，2，3分别表示狼人杀，剧本杀，密室逃脱
				loadingText: '努力加载中',
				loadmoreText: '点击加载更多',
				nomoreText: '实在没有了',
				navList: [
					{ title: '场地', number: 9, componentName: 'PitchList'  },
					{ title: '剧本', number: 10, componentName: 'ScriptList' },
					{ title: '已有组局', number: 6, componentName: 'ExistingBureau' },
				],
				showList: [
					{ groundId: 1, groundPhotos: 'https://cdn.uviewui.com/uview/album/1.jpg', groundNum: 1, price: '160', isOutdoor: 0},
					{ groundId: 2, groundPhotos: 'https://cdn.uviewui.com/uview/album/1.jpg', groundNum: 2, price: '160', isOutdoor: 0},
					{ groundId: 3, groundPhotos: 'https://cdn.uviewui.com/uview/album/1.jpg', groundNum: 3, price: '160', isOutdoor: 0},
					{ groundId: 4, groundPhotos: 'https://cdn.uviewui.com/uview/album/1.jpg', groundNum: 4, price: '160', isOutdoor: 0}
				]
			}
		},
		async onShow() {
		},
		computed: { 
			...mapGetters(['userInfo'])
		},
		// 下拉刷新页面
		onPullDownRefresh() {
			this.query.pageSize = 10
			this.total = 0
			this.flag = false
			this.sportsRange = null
			this.keyword = null
			this.current = -9
			this.showList = []
			this.getList()
		},
		methods: {
			// 切换显示列表
			toggleList(item, index){
				if(this.playId === 1 && index === 2) {
					this.expertActive = 1
				}else {
					this.expertActive = index
				}
			},
			// 获取玩法名称
			onPlayName(id){
				this.playId = id
				this.expertActive = 0
			},
			// 检测手机滑动
			toggleSwiper(event){
				this.expertActive = event.detail?.current
			}
		}
	}
</script>

<style lang="scss" scoped>
.main_container{
	padding: 0 30rpx;
	min-height: 100vh;
	padding-bottom: 30rpx;
	background: linear-gradient(to bottom, #FFFFFF -20%, #F5F6FA);
	.room {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 10rpx;
		.nav_header{
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 80rpx;
			border-bottom: 2rpx solid #eee;
			.nav_item{
				position: relative;
				text-align: center;
				line-height: 80rpx;
				color: #999;
				.nav_content{
					position: relative;
					font-size: 28rpx;
					.badge{
						position: absolute;
						top: 50%;
						right: -50rpx;
						color: #999;
						transform: translateY(-50%);
					}
				}
				&.active{
					color: #333333;
					&::after{
						position: absolute;
						left: 50%;
						bottom: 0;
						content: '';
						width: 40rpx;
						height: 6rpx;
						transform: translateX(-50%);
						background-color: #333;
						border-radius: 200rpx;
					}
				}
			}
		}
	}
	// 新建场地
	.add_mode{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #999;
		height: 120rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}
	// 提示信息
	.tip_container{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 690rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 0;
		box-sizing: border-box;
		.tip_title{
			text-align: center;
			color: #333;
			font-size: 32rpx;
			line-height: 42rpx;
		}
		.tip_content{
			width: 196rpx;
			height: 76rpx;
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 38rpx;
			text-align: center;
		}
		.btn{
			width: 372rpx;
			height: 76rpx;
			background: #333333;
			border-radius: 686rpx;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			font-size: 28rpx;
		}
		.bg_img{
			position: absolute;
			top: 70rpx;
			left: 262rpx;
			object-fit: cover;
		}
	}
	// 二维码显示
	.QRcode_box{
		width: 690rpx;
		height: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.QRCoce_img{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx auto 0;
			width: 360rpx;
			height: 360rpx;
		}
		.btn{
			width: 280rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #F5F7FA;
			border-radius: 12rpx;
			text-align: center;
			color: #333;
			font-weight: 500;
			font-size: 32rpx;
			margin: 0 auto;
		}
	}
}


// 滑动区域模块
.expert_content{
	padding: 20rpx 30rpx;
}
.scroll-history {
	height: 500rpx;
}
.swiper {
	height: 500rpx;
}
.swiper-item {
	display: block;
}
.scroll-item {
	margin-bottom: 10px;
}

</style>