<template>
	<view>
		<RefreshView ref="mescrollRef" text="首页" :useDownScroll="false" :useUpScroll="false" pageBg="#F1F2F5">

			<view style="display: flex;flex-direction: column;align-items: center;width: 100vw;">

				<view style="display: flex;flex-direction: column;width: 100vw;align-items: center;background-color: #2fa1f0;padding-top: 80rpx;
					border-bottom-right-radius: 30rpx;border-bottom-left-radius: 30rpx;">

					<view style="width: 100vw;text-align: center;font-size: 40px;font-weight: 700;color: #fff;" >
						<!-- 	<view style="left: 100px;
top: 79px;
font-weight: 700;
width: 160px;
height: 58px;
color: rgba(255, 255, 255, 100);
font-size: 40px;
text-align: center;
font-family: SourceHanSansSC-bold;">-->
						体育活动
					</view>
					<view
						style="width: 100vw;text-align: center;font-size: 22px;font-weight: 600;color:  #fff;margin-top: 10rpx;">
						<!-- <view style="left: 114px;
top: 139px;
font-weight: 600;
width: 132px;
height: 32px;
color: rgba(255, 255, 255, 100);
font-size: 22px;
text-align: center;
font-family: SourceHanSansSC-bold;"> -->
						组织报名工具
					</view>

					<text style="margin-top: 80rpx;color:#fff;font-size: 16px;">一分钟创建 轻松组织活动</text>

					<view
						style="display: flex;flex-direction: row;margin-top: 40rpx;justify-content: center;margin-bottom: 100rpx;align-items: center;">

						<image src="../../static/home-icon/visits.png" style="width: 35rpx;height: 35rpx;"></image>
						<text style="margin-left: 20rpx;color: #fff;font-size: 12px;">访问量：{{visits}}</text>

					</view>

				</view>

			</view>

			<view style="display: flex;flex-direction: row;margin-top: 60rpx;margin-left: 30rpx;align-items:baseline">
				<text style="font-weight: 400; color:  #E99D42 ;font-size: 36rpx;">发布活动类别</text>
				<text style="margin-left: 20rpx;font-weight: 400; color:  #E99D42;font-size: 28rpx;">(点击体育活动标签发布)</text>

			</view>

			<view style="display: flex; margin-left: 10rpx;margin-right: 30rpx;margin-top: 40rpx;
			justify-content: center;">
				<grid>
					<view style="display: flex; margin-bottom: 10rpx; margin-left: 10rpx;margin-right: 10rpx;"
						v-for="(item,index) in SportCategoryList">
						<text class="labelLayout" @click="onClick(index)">{{item.sportCategoryName}}</text>
					</view>
				</grid>
			</view>

			<view class="line" style=" margin-top: 100rpx;margin-left: 30rpx;margin-right: 30rpx;"></view>

			<view
				style="display: flex;flex-direction: column;margin-top: 40rpx;margin-bottom: 20rpx;margin-left: 30rpx;margin-right: 30rpx;">
				<text style="font-size: 32rpx;color: #666666;font-weight: 600">友情提示：</text>
				<text style="font-size: 30rpx;color: #666666;margin-top: 40rpx;font-weight: 500;">{{notices}}</text>

			</view>

			<view class="line" style=" margin-left: 30rpx;margin-right: 30rpx;margin-top: 40rpx;"></view>

			<view style="margin-top: 30rpx;margin-left: 30rpx;margin-right: 30rpx;">

				<text style="font-size: 40rpx;color: #4095E5;font-weight: 600" @click="jump()">{{page.city}}</text>
				<text
					style="font-size: 32rpx;color: #666666;font-weight: 500;margin-left: 20rpx;">共有{{activityAmount}}场活动</text>
			</view>
			<view style="height: 150px;"></view>
		</RefreshView>
	</view>
</template>

<script>
	// 必须
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		// 使用mixin (在main.js注册全局组件) 必须
		mixins: [MescrollMixin],
		data() {
			return {
				index: 0,
				notices: "\u3000\u3000您注册的帐号可以在宇运动主体下的子平台一号通行，同时您发布的活动将会按类别发布到各子平台。（点击查看宇运动子平台）",
				list: [],
				SportCategoryList: [],
				page: {
					city: "正在获取...",
					code: ""
				},
				visits: "...",
				activityAmount: "..."
			}
		},
		onLoad(options) {
			this.HTTP({
				url: 'aos/v1/activityManagement/add1PointOnVisits',
				method: 'GET',
				data: {},
				paramsType: "FORM",
				loading: false
			}).then((res) => {

			});
			let that = this

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

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

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

						let locat = res
						console.log("latitude", res.longitude);
						console.log("longitude", res.latitude);
						// 先写入定位
						_this.location = {
							latitude: locat.latitude,
							longitude: locat.longitude
						}

						let url =
							"https://restapi.amap.com/v3/geocode/regeo?key=59970402d1c3f7dc1efff17d4dfcff21&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) {
								console.log("find_city1", city);
								console.log("find_city_code1", code);
								// 保存本次定位
								_this.WritePreference("find_city", city)
								_this.WritePreference("find_city_code", code)

								_this.page.code = code
								_this.page.city = city
								_this.getCode()
							} else {
								console.log("find_city2", city);
								console.log("find_city_code2", code);
								// 未获取到正确的城市编码
								_this.WritePreference("find_city", "石家庄")
								_this.WritePreference("find_city_code", "130104")

								_this.page.code = "130104"
								_this.page.city = "石家庄"
								_this.getCode()
							}
						}, (err) => {
							console.log("find_city3", "石家庄");
							console.log("find_city_code3", "130104");
							//获取当前城市失败
							_this.WritePreference("find_city", "石家庄")
							_this.WritePreference("find_city_code", "130104")

							_this.page.code = "130104"
							_this.page.city = "石家庄"
							_this.getCode()

						})
					},
					fail(err) {
						console.log("find_city4", "石家庄");
						console.log("find_city_code4", "130104");
						// 定位失败
						_this.WritePreference("find_city", "石家庄")
						_this.WritePreference("find_city_code", "130104")

						_this.page.code = "130104"
						_this.page.city = "石家庄"
						_this.getCode()
					}
				});

			} else {
				this.page.code = find_city_code
				this.page.city = find_city
				this.getCode()
			}

		},

		onShow() {
			let find_city_code = this.ReadPreference("find_city_code")

			let find_city = this.ReadPreference("find_city")

			if (!this.IsEmpty(find_city_code)) {
				this.getCode()
			}

		},
		methods: {
			// wwww(){
			// 	uni.navigateTo({
			// 		url: "../team/CreateTeam"
			// 	})
			// },
			getCode() {
				let that = this
				that.HTTP({
					url: 'aos/v1/activityManagement/getActivityCreatePageParameter',
					method: 'GET',
					data: {
						"adcode": this.page.code
					},
					paramsType: "FORM",
					loading: true
				}).then((res) => {
					that.SportCategoryList = res.data.listSportCategoryArea
					that.activityAmount = res.data.activityAmount
					that.visits = res.data.visits

				});
			},
			onClick(index) {
				uni.navigateTo({
					url: "../index/activity?sportCategoryName=" + this.SportCategoryList[index].sportCategoryName +
						"&sportCategorySid=" + this.SportCategoryList[index].sid + "&isCreate=0&sid="
				})
			},
			jump() {
				console.log('this.page.code', this.page.code)
				uni.switchTab({
					url: "../home/FindFragment"
				})
			}

		}
	}
</script>

<style lang="scss">
	.line {
		height: 5rpx;
		background-color: #eee
	}

	.btn {
		display: flex;
		width: 80%;
		height: 80rpx;
		flex-direction: column;
		background-color: $uni-base-color;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.nav-bar {
		height: 92rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.bar-text {
			font-size: 32rpx;
			height: 100%;
			line-height: 92rpx;
			padding-left: 28rpx;
		}

		.bar-img {
			width: 90rpx;
			height: 92rpx;
			padding-right: 28rpx;
		}
	}

	.top {

		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #FFFFFF;
		opacity: 0.8;
		align-items: center;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.unselected {

			text-align: center;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #191919;
			line-height: 40rpx;

		}

		.selected {
			text-align: center;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #2CAB69;
			line-height: 40rpx;
			border-bottom: 2rpx #2CAB69 solid;
			padding-bottom: 10rpx;
		}

	}

	.btn1 {
		background: #BBBBBB;
	}

	.btn2 {
		background: #0081D5;
	}

	.labelLayout {
		flex: 1;
		width: 100%;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #F2BF5C;
		color: #FFFFFF;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		justify-content: center;
		text-align: center;
		font-size: 30rpx;
	}
</style>
