<template>
	<view class="about_balls">
		<!-- 选项卡片 -->
		<view class="select_card">
			<view class="title">运动项目</view>
			<view style="width: 100%;overflow-x: scroll;">
				<view class="ball_list" :style="{transform: `translateX(${transformWidth}rpx)`}" @touchmove="transformWidth = 0">
					<view class="ball_item" v-for="(item, index) in imageList" :key="index" @click="ballToggle(index)">
						<view
							class="iconfont item_icon"
							:class="[item.iconName]"
							:style="{color: ballActive == index ? ThemeColor.PrimaryColor : '#999'}"
						></view>
						<text :class="{ ballname: ballActive === index }">{{ item.title }}</text>
					</view>
				</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="ThemeColor.PrimaryColor" :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 MyButton from '@/components/myButton.vue'
	import ThemeColor from '@/utils/themeColor'
	export default {
		components: { MyButton },
		data() {
			return {
				ThemeColor,
				transformWidth: 0, // 移动的距离
				totalWidth: 0, // 移动的总长度
				bollListWidth: 0, // 导航盒子的宽度
				ballActive: 0, // 动态球类索引
				show: false, // 显示场馆列表
				showDate: false, // 时间选择列表
				dateValue: '', // 选择的时间值
				startTime: '开始时间', // 开始时间
				endTime: '结束时间', // 结束时间
				timeMode: '', // 时间状态
				arenaName: '请选择场馆',
				columns: [
					['彩虹体育馆', '飞人网球场', 'L2T体育馆']
				],
				// 球类列表
				imageList: [
					{ title: '羽毛球', iconName: 'icon-yumaoqiu1' },
					{ title: '足球', iconName: 'icon-zuqiu' },
					{ title: '篮球', iconName: 'icon-lanqiu' },
					{ title: '排球', iconName: 'icon-paiqiu' },
					{ title: '乒乓球', iconName: 'icon-pingpangqiu' },
					{ title: '网球', iconName: 'icon-wangqiu1' },
					{ title: '排球', iconName: 'icon-paiqiu' },
					{ title: '台球', iconName: 'icon-taiqiu' },
					{ title: '高尔夫球', iconName: 'icon-gaoerfu2' },
					{ title: '棒球', iconName: 'icon-bangqiu' }
				]
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		mounted() {
			let _this = this
			this.totalWidth = this.imageList.length * 100
			const query = uni.createSelectorQuery().in(this);
			query.select(".ball_list").boundingClientRect(res => {
				_this.bollListWidth = res.width * 2
			}).exec();
		},
		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
			},
			// 切换球类
			ballToggle(index){
				this.ballActive = index
				if(index < 3) {
					this.transformWidth = 0
				} else {
					let moveWidth = (index - 2) * 100
					let maxMove = this.totalWidth - this.bollListWidth
					this.transformWidth = moveWidth > maxMove ? - maxMove : - moveWidth
				}
			},
			// 前往订单详情
			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: $uni-color-primary;
			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;
			margin: 34rpx 0;
			width: 100%;
			transition: all 0.5s linear;
			.ball_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				font-size: 24rpx;
				flex-shrink: 0;
				width: 100rpx;
				color: #999;
				line-height: 28rpx;
				.item_icon{
					font-size: 38rpx;
					transition: all 0.5s ease;
				}
				.ballname{
					color: $uni-color-primary;
					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;
		width: 100%;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		padding: 0 30rpx;
	}
}
</style>