<template>
	<view class="page">
		<view class="whitebg">
			<z-swiper v-model="banner" :options="bannerOptions">
				<z-swiper-item :custom-style="{width:'600rpx',height:'337rpx'}" v-for="(item,index) in banner"
					:key="index">
					<image class="bannerStyle" mode="aspectFill"
						:src="item.url" />
				</z-swiper-item>
			</z-swiper>
		</view>
		<view class="girdBox">
			<view @click="goPath('/training/trainList')">
				<image src="@/static/index/btn01.png" />新闻资讯
			</view>
			<view @click="goPath('/match/index')">
				<image src="@/static/index/btn02.png" />赛事报名
			</view>

			<view @click="goPath('/training/trainList')">
				<image src="@/static/index/btn03.png" />培训报名
			</view>
			<view @click="goPath()">
				<image src="@/static/index/btn04.png" />团体会员
			</view>
			<view @click="goPath()">
				<image src="@/static/index/btn05.png" />地方协会
			</view>
			<view @click="goPath()">
				<image src="@/static/index/btn07.png" />考点查询
			</view>
			<view @click="goPath('/webView/vipSystem')">
				<image src="@/static/index/btn08.png" />会员系统
			</view>
			<view @click="goTab('/pages/myCenter/index')">
				<image src="@/static/index/btn01.png" />我的
			</view>

		</view>
		<view class="newsBox">
			<image style="width: 51rpx;height: 56rpx;" src="@/static/index/zx.png" />
			<z-swiper v-model="list" :custom-style="{height:'50rpx',width:'600rpx'}"
				:options="{autoplay:true,loop:true,direction: 'vertical',speed:2000}">
				<z-swiper-item v-for="(item,index) in list" :key="index">
					<view class="esp">{{item.name}}</view>
				</z-swiper-item>
			</z-swiper>
		</view>
		<view class="indexTitle">
			<view class="h3">
				<image src="@/static/index/hot.png"/>
				热门活动
			</view>
			<view class="more">更多 ></view>
		</view>
		
		<view class="activeItem" v-for="n in 3">
			<view class="info">
				<view class="name">
					2022年锡冠联赛锡冠联赛锡冠联赛
				</view>
				<view>
					<view class="tag-royal">已结束</view>
				</view>
				<view class="pp esp">报名时间：2024.04.24 - 2024.05.10</view>
				<view class="pp esp">比赛时间：2024.04.24 - 2024.05.10</view>
				<view class="pp esp">无与伦比大体育馆博览中心B6馆</view>
			</view>
			<view class="imgbox"> 
				<view class="type"><text class="text-warning">独立赛</text></view>
				<image mode="aspectFit" :src="fakeImg"/>
			</view>
		</view>
		
	</view>

	<view class="content content-bottom">
	    <footer-menu :active="'home'" />
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js';
	import * as loginServer from '@/common/login.js';
	import config from '@/config.js'
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance
	} from 'vue';


	const {
		proxy
	} = getCurrentInstance()
	const app = getApp();
	const svId = ref(null);
	const list = ref([{
		name: '新闻1'
	}, {
		name: '全国学生（青年）运动会跆拳道比赛竞委会会议成功召开'
	}, {
		name: '跆拳道公益行健康成长比一百分更重要'
	}]);
	const bannerOptions = ref({
		autoplay:true,
		loop:true,
		effect: 'coverflow',
		centeredSlides: true,
		slidesPerView: 'auto',
		coverflowEffect: {
			rotate: 50,
			stretch: 20,
			depth: 100,
			modifier: 1,
			slideShadows: true,
		}
	})
	const messageList = ref([])
	const fakeImg = ref('http://36.153.235.222:8001/assets/default-2a29adf3.jpg')
	const banner = ref([
		{url:'http://36.153.235.222:8001/stage-api/ztx-webSite/fs/20231213/image/8423158888099946496.png'},
		{url:'https://xhimg.sports.cn/Image/allimg/231026/45-231026131I5Q3.jpg'},
		{url:'http://36.153.235.222:8001/assets/default-2a29adf3.jpg'}
	])
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	})
	onLoad(option => {
		// uni.switchTab({
		// 	url: '/pages/index/index'
		// })
		 uni.hideTabBar()
	});


	function goPath(path) {
		if (path)
			uni.navigateTo({
				url: path
			});
	}

	function goTab(path) {
		uni.switchTab({
			url: path
		})
	}


	function init() {
		uni.showLoading({
			title: '加载中'
		});
		uni.hideLoading();

	}



	function goItem(item) {
		if (item.path) {
			let path = item.path
			uni.navigateTo({
				url: item.path
			});

		} else {
			uni.showToast({
				title: `暂未开放`,
				icon: 'none'
			});
		}
	}
</script>
<style scope lang="scss">
	.activeItem{display: flex;background: #FFFFFF;margin: 0 auto 24rpx;    flex-direction: row;
	border-radius: 10rpx;width: 700rpx;padding: 20rpx;box-sizing: border-box;
		.info{flex:1 1 auto;
			.name{color: #3E3D3D;font-size: 30rpx;}
			.pp{color: #717171;font-size: 26rpx;margin: 10rpx 0 0 ;}
		}
		.imgbox{flex:0 0 auto;display: flex;flex-direction: column;    align-items: flex-end;
			box-sizing: border-box;
		    // padding-left: 20rpx;
			image{width: 250rpx;aspect-ratio: 16/9;height: 140rpx;border-radius: 10rpx;
				margin-top: 20rpx;
			}
			.type{font-size: 26rpx;}
		}
	}
	.indexTitle{display: flex;justify-content: space-between;padding: 30rpx;align-items: center;
		.h3{display: flex;color: #313234;font-size: 32rpx;align-items: baseline;
			image{width: 36rpx;height: 45rpx;margin-right: 15rpx;}
		}
		.more{color: #6E727A;font-size: 24rpx;}
	}
	.bannerStyle {height: 100%;
	width: 100%;
		border-radius: 15rpx;
	}

	.newsBox {
		background-color: #fff;
		display: flex;
		align-items: center;
		position: relative;
		padding: 26rpx 30rpx;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			height: 1rpx;
			width: 700rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			background: #f8f8f8;
		}
		.esp{font-size: 26rpx;font-weight: 400;color: #030303;
			line-height: 50rpx;}
	}

	.page {
		width: 100vw;
		overflow: hidden;
	}

	.loginOutIcon {
		position: relative;
		left: 60rpx;
		// top: 180rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.welcome {
		padding: 30rpx 55rpx;
		line-height: 55rpx;
		font-size: 36rpx;
	}

	.flexbox {
		display: flex;
		justify-content: space-around;
		text-align: center;

		image {
			width: 90rpx;
			height: 90rpx;
			display: block;
			margin: auto;
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	:deep(.uni-section) {
		background-color: transparent;
	}

	:deep(.uni-section .uni-section-header__content) {
		font-size: 44rpx;
		font-weight: bold;
		color: #29343C;
	}

	:deep(.uni-section .uni-section-header) {
		padding: 0 30rpx;
	}
</style>