<template>
	<view class="about_balls">
		<!-- 选项卡片 -->
		<view class="select_card">
			<view class="title">运动项目</view>
			<view class="ball_list">
				<view class="ball_item" v-for="(item, index) in imageList" :key="index" @click="ballActive = index">
					<image class="ball_icon" v-show="ballActive !== index" :src="item.activeIcon" mode="widthFix"></image>
					<image class="ball_icon" v-show="ballActive === index" :src="item.icon" mode="widthFix"></image>
					<text :class="{ ballname: ballActive === index }">{{ item.title }}</text>
				</view>
			</view>
			<view class="title">选择场馆</view>
			<!-- 选择场馆 -->
			<view class="select_arena" @click="show = true">
				<text>{{ arenaName }}</text>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<view class="title">项目时间</view>
			<!-- 时间范围 -->
			<view class="time_list">
				<view class="startTime" @click="selectTime('start')">{{ startTime }}</view>
				<view class="line"></view>
				<view class="endTime" @click="selectTime('end')">{{ endTime }}</view>
			</view>
		</view>
		<!-- 运动人数 -->
		<view class="sport_number">
			<view class="title">运动人数</view>
			<text>8 人</text>
		</view>
		<!-- 去人约球 -->
		<view class="footer">
			<MyButton title="发起约球" @comfirn="goRouter" />
		</view>
		<!-- 场馆选择 -->
		<u-picker :show="show" title="选择场馆" confirmColor="#FFA100" :columns="columns" :closeOnClickOverlay="true" @cancel="show = false" @close="show = false" @confirm="confirm"></u-picker>
		<!-- 时间选择 -->
		<u-datetime-picker
			ref="datetimePicker"
			:show="showDate"
			v-model="dateValue"
			title="选择约球时间"
			mode="datetime"
			:formatter="formatter"
			@cancel="showDate = false"
			@confirm="confirmTime"
    />
	</view>
</template>

<script>
	import badminton from '@/static/images/sport/badminton.png'
	import badminton1 from '@/static/images/sport/badminton-1.png'
	import basketball from '@/static/images/sport/basketball.png'
	import basketball1 from '@/static/images/sport/basketball-1.png'
	import football from '@/static/images/sport/football.png'
	import football1 from '@/static/images/sport/football-1.png'
	import frisbee from '@/static/images/sport/frisbee.png'
	import frisbee1 from '@/static/images/sport/frisbee-1.png'
	import tableTennis from '@/static/images/sport/table-tennis.png'
	import tableTennis1 from '@/static/images/sport/table-tennis-1.png'
	import tennis from '@/static/images/sport/tennis.png'
	import tennis1 from '@/static/images/sport/tennis-1.png'
	import MyButton from '@/components/myButton.vue'
	export default {
		components: { MyButton },
		data() {
			return {
				ballActive: 0, // 动态球类索引
				show: false, // 显示场馆列表
				showDate: false, // 时间选择列表
				dateValue: '', // 选择的时间值
				startTime: '开始时间', // 开始时间
				endTime: '结束时间', // 结束时间
				timeMode: '', // 时间状态
				arenaName: '',
				columns: [
					['彩虹体育馆', '飞人网球场', 'L2T体育馆']
				],
				// 球类列表
				imageList: [
					{ title: '羽毛球', icon: badminton, activeIcon: badminton1 },
					{ title: '足球', icon: football, activeIcon: football1 },
					{ title: '网球', icon: tennis, activeIcon: tennis1 },
					{ title: '飞盘', icon: frisbee, activeIcon: frisbee1 },
					{ title: '篮球', icon: basketball, activeIcon: basketball1 },
					{ title: '乒乓球', icon: tableTennis, activeIcon: tableTennis1 }
				]
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			// 确认选择场馆
			confirm({value}){
				this.show = false
				this.arenaName = value
			},
			// 时间过滤器
			formatter(type, value) {
				let timeObj = {
					year: `${value}年`,
					month: `${value}月`,
					day: `${value}日`,
					hour: `${value}时`,
					minute: `${value}分`,
				}
				return timeObj[type]
			},
			// 选择时间
			selectTime(value){
				this.timeMode = value
				this.showDate = true
			},
			// 选择时间的值
			confirmTime({value}){
				if(this.timeMode === 'start') {
					this.startTime = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM')
				} else {
					this.endTime = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM')
				}
				this.showDate = false
			},
			// 前往订单详情
			goRouter(){
				uni.navigateTo({
					url: '/pages/comfirmOrder/comfirmOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		position: relative;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 36rpx;
		color: #333;
		margin-left: 20rpx;
		&::before{
			content: '';
			position: absolute;
			left: -20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 8rpx;
			background-color: #FFA100;
			border-radius: 50%;
		}
	}
.about_balls{
	padding: 24rpx 30rpx 0;
	background-color: #F6F6F6;
	min-height: 100vh;
	box-sizing: border-box;
	.select_card{
		height: 548rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 24rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		.ball_list{
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 34rpx 0;
			.ball_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				line-height: 28rpx;
				.ballname{
					color: #FFA100;
					font-weight: 500;
				}
				.ball_icon{
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 16rpx;
				}
			}
		}
		// 选择场馆
		.select_arena{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			height: 68rpx;
			background: #F6F6F6;
			border-radius: 68rpx;
			color: #333;
			font-size: 24rpx;
			margin: 24rpx 0 36rpx 0;
		}
		// 选择时间
		.time_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 22rpx;
			.startTime, .endTime{
				width: 256rpx;
				height: 56rpx;
				background: #F6F6F6;
				border-radius: 68rpx;
				font-size: 24rpx;
				color: #333;
				text-align: center;
				line-height: 56rpx;
			}
			.line{
				width: 44rpx;
				height: 0rpx;
				border: 2rpx solid rgba(225,225,225,0.7);
			}
		}
	}
	// 人数
	.sport_number{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		height: 88rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 24rpx;
	}
	// 确认约球
	.footer{
		position: fixed;
		height: 112rpx;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 30rpx;
	}
}
</style>