<template>

	<TabLayout ref='tabLayout' text="选择球馆" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down">

		<swiper style="min-height: 100vh;" :current="page.currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in data.tabList" :key="listIndex" style="box-sizing: border-box;">

				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1">

					<view :style="{'width': '100%','padding-top': page.paddingTop}">

						<loading v-if="page.showLoading[listIndex]" :key='listIndex'></loading>

						<view class="outer" v-for="(item,index) in listItem">

							<view class="Item">

								<image class="Img" :src="item.logo" mode="aspectFill" @click="img(item.sid)"></image>

								<view class="Right" @click="right(item.sid,item.name)">

									<text class="gameTv">{{item.name}}</text>
									<text class="gameTv2">{{item.address}}</text>
									<!-- <text class="gameTv2">{{item.linkerName+" "+item.linkerPhone}}</text> -->

								</view>
							</view>

						</view>

						<loading v-if="page.showBottomLoading[listIndex]" :key="'bottom'+listIndex"></loading>

						<noData v-if="page.showNoData[listIndex]" :key="'nodata'+listIndex"></noData>

					</view>

				</scroll-view>
			</swiper-item>

		</swiper>

	</TabLayout>

</template>

<script>
	const util = require('../../util/util.js');
	export default {

		data() {
			return {
				page: {
					tabTitle: ['常驻球馆', '所有球馆'],
					tabType: ["gms/v1/userGymnasiumsManagement/getUserGymnasiumList",
						"gms/v1/gymnasiumsManagement/getGymnasiumAreaVoPagerList"
					],
					currentTab: 0,
					pages: [1, 1], //第几个swiper的第几页
					nowLoadingPages: [false, false], //是否正在加载
					paddingTop: '0px',
					showLoading: [false, false],
					showBottomLoading: [false, false],
					showNoData: [false, false],
					city: "石家庄",
					code: "1301"
				},
				data: {
					tabList: [
						[],
						[],
						[],
						[]
					]
				},
				info: {
					address: "",
					placeName: ''
				}

			};
		},
		onLoad(options) {

			let find_city_code = this.ReadPreference("find_city_code")
			let find_city = this.ReadPreference("find_city")

			let _this = this
			this.$nextTick()
				.then(function() {
					_this.page.paddingTop = _this.$refs.tabLayout.getViewPagerTop()
				})

			if (this.IsEmpty(find_city_code)) {
				// 首次进入
				find_city_code = 0;

				// 获取定位
				let _this = this;
				// 获取定位
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {

						let locat = res

						// 先写入定位
						_this.location = {
							latitude: locat.latitude,
							longitude: locat.longitude
						}

						let url =
							"https://restapi.amap.com/v3/geocode/regeo?key=b564c757b4cf4fd4a5d914625ca9373f&location=" +
							res.longitude +
							"," + res.latitude +
							"&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0";

						_this.HttpOtherUrl({
							url: url
						}).then((res) => {

							let json = JSON.stringify(res);
							let info = JSON.parse(json).regeocode.addressComponent;
							// 城市
							let city = info.city;
							// 城市编码
							let code = info.adcode;

							// 获取到正确的城市编码
							if (code > 0) {

								// 保存本次定位
								_this.WritePreference("find_city", city)
								_this.WritePreference("find_city_code", code)

								_this.page.code = code
								_this.page.city = city
								_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"

							} else {

								// 未获取到正确的城市编码
								_this.WritePreference("find_city", "石家庄")
								_this.WritePreference("find_city_code", "1301")

								_this.page.code = "1301"
								_this.page.city = "石家庄"
								_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
								
							}
						}, (err) => {

							//获取当前城市失败
							_this.WritePreference("find_city", "石家庄")
							_this.WritePreference("find_city_code", "1301")

							_this.page.code = "1301"
							_this.page.city = "石家庄"
							_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"

						})
					},
					fail(err) {
						// 定位失败
						_this.WritePreference("find_city", "石家庄")
						_this.WritePreference("find_city_code", "1301")

						_this.page.code = "1301"
						_this.page.city = "石家庄"
						_this.page.tabTitle[1] = "所有球馆(" + _this.page.city + ")"
					}
				});

			} else {
				this.page.code = find_city_code
				this.page.city = find_city
				this.page.tabTitle[1] = "所有球馆(" + this.page.city + ")"
			}

			// 加载第一页数据
			this.down(0)
		},
		methods: {
			img(sid) {
				uni.navigateTo({
					url: 'ArenaDetailActivity?sid=' + sid
				})
			},
			right(sid, name) {
				this.info.sid = sid
				this.info.name = name
				console.log("传值>" + JSON.stringify(this.info))
				this.SetResult(this.info)
			},
			// swiper 滑动
			swiperTab: function(e) {
				// 模拟tab点击
				this.$refs.tabLayout.changeTab(e);
			},
			clickTab(index) {
				this.page.currentTab = index
				// 每次切换时都重新加载页面
				this.down(index)
			},
			down(index) {
				// 下拉刷新请求 并更改数据

				let _this = this

				this.data.tabList[index] = []
				//二维数组，开启强制渲染
				_this.$forceUpdate()

				// 初始化当前的页数
				this.page.pages[index] = 1
				// 当前页数的加载状态
				this.page.nowLoadingPages[index] = true

				// 只要切换页面就显示
				this.page.showLoading[index] = true
				this.page.showNoData[index] = false

				if (index == 0) {
					this.Login()
						.then((res) => {

							let path = index == 0 ? "/" + getApp().globalData.memberSid : "";

							this.HTTP({
								url: _this.page.tabType[index] + path,
								method: index == 0 ? 'GET' : 'POST',
								paramsType: index == 0 ? 'FORM' : "JSON",
								data: index == 0 ? {} : {
									"current": 1,
									"size": 10,
									"params": {
										"memberSid": getApp().globalData.memberSid,
										"regionId": _this.page.code
									}
								}
							}).then((res) => {
								// 当前页数的加载状态
								_this.page.nowLoadingPages[index] = false
								// 填充数据
								_this.data.tabList[index] = res.data
								_this.$refs.tabLayout.downRefresh()
								//二维数组，开启强制渲染
								_this.$forceUpdate()
								// 关闭loading
								_this.page.showLoading[index] = false
								_this.page.showNoData[index] = res.data.length == 0
							}, (err) => {
								// 当前页数的加载状态
								_this.page.nowLoadingPages[index] = false
								_this.$refs.tabLayout.downRefresh()
								//二维数组，开启强制渲染
								_this.$forceUpdate()
								// 关闭loading
								_this.page.showLoading[index] = false
								_this.page.showNoData[index] = false

							})
						})
				}else{
					
					let path = index == 0 ? "/" + getApp().globalData.memberSid : "";
					
					this.HTTP({
						url: _this.page.tabType[index] + path,
						method: index == 0 ? 'GET' : 'POST',
						paramsType: index == 0 ? 'FORM' : "JSON",
						data: index == 0 ? {} : {
							"current": 1,
							"size": 10,
							"params": {
								"memberSid": getApp().globalData.memberSid,
								"regionId": _this.page.code
							}
						}
					}).then((res) => {
						// 当前页数的加载状态
						_this.page.nowLoadingPages[index] = false
						// 填充数据
						_this.data.tabList[index] = res.data.records
						_this.$refs.tabLayout.downRefresh()
						//二维数组，开启强制渲染
						_this.$forceUpdate()
						// 关闭loading
						_this.page.showLoading[index] = false
						_this.page.showNoData[index] = res.data.records.length == 0
					}, (err) => {
						// 当前页数的加载状态
						_this.page.nowLoadingPages[index] = false
						_this.$refs.tabLayout.downRefresh()
						//二维数组，开启强制渲染
						_this.$forceUpdate()
						// 关闭loading
						_this.page.showLoading[index] = false
						_this.page.showNoData[index] = false
					
					})
				}


			},
			request(index, pagerStart) {

				let _this = this

				let path = index == 0 ? "/" + getApp().globalData.memberSid : "";

				this.HTTP({
					url: _this.page.tabType[index] + path,
					method: index == 0 ? 'GET' : 'POST',
					paramsType: index == 0 ? 'FORM' : "JSON",
					data: index == 0 ? {} : {
						"current": pagerStart,
						"size": 10,
						"params": {
							"memberSid": getApp().globalData.memberSid,
							"regionId": _this.page.code
						}

					}
				}).then((res) => {

					// 重置加载状态
					_this.page.nowLoadingPages[index] = false
					_this.$refs.tabLayout.downRefresh()
					_this.page.showBottomLoading[this.page.currentTab] = false

					if (res.data.records.length == 0) {
						_this.Toast('没有更多数据了')
						//二维数组，开启强制渲染
						_this.$forceUpdate()
						return
					}

					_this.data.tabList[index] = _this.data.tabList[index].concat(res.data.records)
					//二维数组，开启强制渲染
					_this.$forceUpdate()

				}, (err) => {
					// 重置加载状态
					_this.page.nowLoadingPages[index] = false
					_this.$refs.tabLayout.downRefresh()
					//二维数组，开启强制渲染
					_this.$forceUpdate()
				})
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {

				if (this.page.nowLoadingPages[this.page.currentTab]) {
					// 正在加载 拦截请求
					return
				}

				this.page.showBottomLoading[this.page.currentTab] = true
				//二维数组，开启强制渲染
				this.$forceUpdate()

				// 更改请求的页数
				this.page.pages[this.page.currentTab]++
				// 正在加载
				this.page.nowLoadingPages[this.page.currentTab] = true

				// 请求数据
				this.request(this.page.currentTab, this.page.pages[this.page.currentTab])

			}, 300)

		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 25rpx;
		padding-bottom: 20rpx;

		.textLogin {
			background-color: #E91E63;
			border-radius: 30rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-top: 7rpx;
			padding-bottom: 7rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.textGray3 {
		color: #999999;
		font-size: 26rpx;
		margin-top: 5rpx;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.outer {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 22rpx 38rpx;
		box-sizing: border-box;
		border-bottom: 0.1px #F1F1F1 solid;

		.title {
			padding-bottom: 22rpx;
			flex: 1;
			font-size: 28rpx;
			color: #007AFF;
			overflow: hidden;
			box-orient: vertical;
			text-overflow: ellipsis;
		}

		.Item {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 144rpx;
			box-sizing: border-box;

			.Img {
				height: 100%;
				width: 220rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}

		}

		.Right {
			height: 100%;
			display: flex;
			flex-direction: column;
			flex: 1;
			box-sizing: border-box;

			.gameTv {
				font-size: 30rpx;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			.gameTv2 {
				font-size: 25rpx;
				margin-top: 10rpx;
				color: #666666;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}
	}
</style>
