<template>
	<view class="lock_arena">
		<view class="lock_ground">
			<!-- 场地号 -->
			<view class="line_box f-28 l-h-38">
				<text style="width: 200rpx;" class="col-9">场地号</text>
				<text class="col-3 flex-box">{{ sportsRange }} {{ groundNum }}号场</text>
			</view>
			<!-- 日期 -->
			<view class="line_box f-28 l-h-38">
				<text style="width: 200rpx;" class="col-9">日期</text>
				<view class="dis-flex flex-y-center flex-box flex-x-between" @click="show = true">
					<text class="col-3">{{ query.orderDate }}</text>
					<u-icon name="arrow-down" color="#333"></u-icon>
				</view>
			</view>
			<!-- 具体时间 -->
			<view class="time_list">
				<view v-for="(item, index) in hourList" :key="index" class="dis-flex flex-dir-column flex-y-center">
					<view
						class="time_item"
						:style="{
							color: formatTextColor(index),
							backgroundColor: formatBgColor(index),
							borderColor: formatborderColor(index)
						}"
						@click="lockArena(item)"
					>
						{{ item.startHour }}-{{ item.endHour }}
						<view v-show="item.isLocked === 1" class="lock">
							<u-icon name="lock" color="#ddd"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker
			ref="datetimePicker"
			:show="show"
			v-model="query.orderDate"
			mode="date"
			:formatter="formatter"
			:minDate="Number(new Date())"
			:maxDate="Number(new Date()) + 31536000000"
			closeOnClickOverlay
			@close="show = false"
			@cancel="show = false"
			@confirm="onConfirm"
		/>
	</view>
</template>

<script>
	import { lockGround, businessTimeList } from '@/api/sport.js'
	export default {
		data() {
			return {
				show: false,
				hourList: [],
				groundNum: 0,
				sportsRange: '',
				query: {
					groundId: '',
					orderDate: '',
					hourList: [
						{
							startHour: '',
							endHour: '',
							isLocked: 0
						}
					]
				}
			}
		},
		async onLoad(options) {
			this.query.groundId = options.groundId
			this.groundNum = options.groundNum
			this.sportsRange = options.sportsRange
			let id = Number(options.groundId)
			this.getlist(id)
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.query.orderDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd')
		},
		computed: {
			formatBgColor(){
				return (number) => {
					switch(true) {
						case (number >= 0 && number <= 5):
							return '#FFF8E6'
						case (number >= 6 && number <= 11):
							return '#E8F4FF'
						case (number >= 12 && number <= 17):
							return '#E7FAF0'
						case (number >= 18 && number <= 23):
							return '#FFE6E6'
						default:
							return '#FFE6E6'
					}
				}
			},
			formatborderColor(){
				return (number) => {
					switch(true) {
						case (number >= 0 && number <= 5):
							return '#FFE9B0'
						case (number >= 6 && number <= 11):
							return '#B6DCFF'
						case (number >= 12 && number <= 17):
							return '#A6EDC7'
						case (number >= 18 && number <= 23):
							return '#FFB0B0'
						default:
							return '#FFB0B0'
					}
				}
			},
			formatTextColor(){
				return (number) => {
					switch(true) {
						case (number >= 0 && number <= 5):
							return '#FFB336'
						case (number >= 6 && number <= 11):
							return '#50ABFF'
						case (number >= 12 && number <= 17):
							return '#27B500'
						case (number >= 18 && number <= 23):
							return '#D90000'
						default:
							return '#D90000'
					}
				}
			}
		},
		methods: {
			// 格式化时间
			formatter(type, value) {
				let formatObj = {
					year: `${value}年`,
					month: `${value}月`,
					day: `${value}日`
				}
				return formatObj[type]
			},
			// 确认日期
			onConfirm(value, mode){
				this.query.orderDate = uni.$u.timeFormat(value, 'yyyy-mm-dd')
				this.show = false
			},
			// 获取营业时间列表
			async getlist(id){
				let date = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd')
				this.hourList = await businessTimeList({currentDate: date, groundId: id})
			},
			// 锁定场地
			lockArena(info){
				this.query.hourList[0].startHour = info.startHour
				this.query.hourList[0].endHour = info.endHour
				this.query.hourList[0].isLocked = info.isLocked === 0 ? 1 : 0
				let _this = this
				let id = this.query.groundId
				uni.showModal({
					title: '提示',
					content: info.isLocked === 0 ? '锁定时间段后，该时间段将不能预定此场地，是否锁定' : '是否要解锁此场地',
					success: async function (res) {
						if (res.confirm) {
							await lockGround(_this.query)
							uni.$u.toast(info.isLocked === 0 ? '锁定成功' : '解锁成功')
							_this.getlist(id)
						} else if (res.cancel) {
							uni.$u.toast('取消锁定')
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.lock_arena{
	min-height: 100vh;
	background-color: #F6F7FB;
	padding: 20rpx 30rpx;
	.lock_ground{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		.line_box{
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 2rpx solid #eee;
		}
		.time_list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: 30rpx;
			margin-top: 30rpx;
			.time_item{
				position: relative;
				width: 300rpx;
				height: 60rpx;
				background: #FFF8E6;
				border-radius: 8rpx;
				border: 2rpx solid #FFE9B0;
				text-align: center;
				line-height: 60rpx;
				color: #FFB336;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				.lock{
					position: absolute;
					top: 50%;
					right: 18rpx;
					transform: translateY(-50%);
				}
			}
		}
	}
}
</style>