<template>
	<view class="add_arena" :style="{paddingBottom: getHeight() + 50 + 'px'}">
		<u--form :model="form" ref="uForm" labelWidth="100" :labelStyle="{color: '#333', fontSize: '28rpx'}">
			<!-- 运动类型 -->
			<view style="background-color: #fff;border-radius: 12rpx;margin-bottom: 20rpx;padding: 0 30rpx;">
				<u-form-item label="项目类型：" prop="sportsRange">
					<uni-data-select
						v-model="form.sportsRange"
						placeholder="请填写场地种类（如：篮球）"
						:localdata="range"
					/>
				</u-form-item>
			</view>
			<!-- 场地信息 -->
			<view class="card">
				<!-- 场地号 -->
				<view class="item" style="background-color: #EDEDED;">
					<u-form-item label="场地号" prop="groundNum">
						<u-input
							v-model="form.groundNum"
							border="none"
							type="number"
							fontSize="28rpx"
							color="#333"
							placeholder="请输入场地号，不可重复"
							suffixIcon="arrow-up"
							suffixIconStyle="color: #333"
						/>
					</u-form-item>
				</view>
				<!-- 场地地址 -->
				<view class="item">
					<u-form-item label="场地地址" prop="address">
						<u-input
							v-model="form.address"
							border="none"
							fontSize="28rpx"
							color="#999"
							placeholder="请选择场地地址"
							suffixIcon="map"
							suffixIconStyle="color: #999"
							@focus="getMapLocation"
						/>
					</u-form-item>
				</view>
				<!-- 是否为室外 -->
				<view class="item">
					<u-form-item label="是否室外" prop="isOutdoor">
						<u-switch v-model="form.isOutdoor" :activeValue="1" :inactiveValue="0" activeColor="#333"></u-switch>
					</u-form-item>
				</view>
				<!-- 场地实图 -->
				<view class="item">
					<u-form-item prop="groundPhotos">
						<text class="col-3 f-28 l-h-38 mb-30">场地实图</text>	
						<view>
							<u-upload
								:fileList="mainCoverList"
								@afterRead="afterRead"
								@delete="deletePic"
								name="mainCover"
								multiple
								:maxCount="3"
								:previewFullImage="true"
							>
								<view style="background-color: #F6F7FB;width: 200rpx;height: 200rpx;" class="dis-flex flex-y-center flex-x-center">
									<image style="width: 96rpx;height: 80rpx;" src="../static/photo.png" mode=""></image>
								</view>
							</u-upload>
							<view class="col-3d f-22 m-top20" style="line-height: 26rpx;">
								请上传大小不超过<text style="color: #FF0006;">5MB</text> 格式为<text style="color: #FF0006;">png/jpg/jpeg</text>的文件
							</view>
						</view>
					</u-form-item>
				</view>
				<!-- 营业时间及价格调整 -->
				<view class="item pb-30">
					<text class="col-3 f-28 l-h-38">营业周次及场次单价</text>
					<!-- 统一单价 -->
					<view class="dis-flex flex-y-center m-top30">
						<text class="col-3 f-28 l-h-38">单价：</text>
						<u-number-box v-model="totalPrice" step="0.25" min="00.00" inputWidth="68" buttonSize="26" color="#999" iconStyle="font-size: 28rpx" />
					</view>
					<!-- 统一规则 -->
					<view class="dis-flex flex-y-center my-30">
						<view class="all_price" @click="fillPrice">填充所有单价</view>
						<view class="all_week" @click="fillWeekRules">填充所有星期相同规则</view>
					</view>
					<!-- 周时间选择列表 -->
					<view class="weekList">
						<text v-for="(item, index) in weekday" :key="index" class="week_item" :class="{active: index === weekCurrent}" @click="toggleWeek(item, index)">{{ item }}</text>
					</view>
					<!-- 营业时间及价格设置 -->
					<view class="time_list">
						<view v-for="(item, index) in showTimeList" :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)}">{{ item.startHour }}-{{ item.endHour }}</view>
							<u-number-box v-model="item.price" min="00.00" step="0.25" inputWidth="92" buttonSize="26" color="#999" iconStyle="font-size: 28rpx" @change="changePrice"/>
						</view>
					</view>
				</view>
				<!-- 优化规则 -->
				<view class="m-top30 px-30 pb-30">
					<text class="col-9 f-28 l-h-38 mb-20">优惠规则</text>
					<view class="dis-flex flex-y-center col-3 f-28 mb-10">
						<text>连续订场超过</text>
						<u-input v-model="form.orderHours" placeholder="请输入连订优惠小时" :customStyle="commonStyle" fontSize="28rpx" color="#999" />
						<text>小时</text>
					</view>
					<view class="dis-flex flex-y-center col-3 f-28">
						<text style="width: 168rpx;text-align: right;">每小时</text>
						<u-input v-model="form.discount" placeholder="请输入打折" :customStyle="commonStyle" fontSize="28rpx" color="#999" />
						<text style="width: 56rpx;">折</text>
					</view>
				</view>
			</view>
		</u--form>
		<!-- 底部按钮 -->
		<view class="footer" :style="{paddingBottom: getHeight() + 'px'}">
			<u-button shape="circle" text="确认保存" color="#333" @click="submit"></u-button>
			<u-button shape="circle" text="删除场地" color="#DDDDDD" @click="delArena"></u-button>
		</view>
	</view>
</template>

<script>
	import upload from '@/mixins/upload.js'
	import { getGroundDetail, addGround, updateGroundInfo, getSportList, delGroundInfo, getPriods } from '@/api/sport.js'
	import { pro_http } from '@/utils/baseUrl.js'
	export default {
		mixins: [ upload ],
		data() {
			return {
				groundId: '', // 球场ID
				weekday: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				weekCurrent: 0,
				ballList: [], // 运动类型
				commonStyle: { 
					width: '320rpx',
					height: '60rpx',
					marginLeft: '20rpx',
					marginRight: '20rpx',
					boxSizing: 'border-box'
				},
				range: [
					{value: 0, text: "狼人杀"},
					{value: 0, text: "剧本杀"},
					{value: 0, text: "密室逃脱"},
				],
				isEdit: true, // 是否为编辑状态
				totalPrice: '', // 填充所以单价
				showTimeList: [], // 显示的营业时间和价格列表
				Timelist: [], // 营业时间及单机列表
				form: {
					businessId: "",
					groundId: "",
					belongGym: "",
					groundCode: "",
					groundNum: "",
					isOutdoor: 0,
					address: "",
					sportsRange: "",
					weekday: "",
					orderHours: "",
					discount: "",
					longitude: "",
					latitude: "",
					groundPhotos: "",
					weekdayList: []
				},
				// 表单规则
				rules: {
					sportsRange: [
						{ required: true, message: '选择运动类型', trigger: ['change'] }
					],
					groundNum: [
						{ required: true, message: '请输入球场号', trigger: ['change'] },
						{ type: 'number', message: '只能输入数字', trigger: ['change'] }
					],
					address: [
						{ required: true, message: '请填写地址', trigger: ['change'] }
					]
				}
			}
		},
		// async onLoad(options) {
		// 	// 获取场地ID
		// 	this.groundId = options.groundId
		// 	// 获取球类列表
		// 	const { rows } = await getSportList()
		// 	this.ballList = rows
		// 	this.range = rows.map(item => {
		// 		return { value: item.sportsName, text: item.sportsName }
		// 	})
		// 	// 获取营业时间
		// 	for(let i=1; i<=7; i++){
		// 		this.Timelist.push({
		// 			weekday: i,
		// 			hourList: await this.getTime()
		// 		})
		// 	}
		// 	// 判断是否为编辑或添加
		// 	if(options.groundId === 'add') {
		// 		this.isEdit = false
		// 		return this.showTimeList = this.Timelist[0].hourList
		// 	}
		// 	// 如果不为添加则调用
		// 	this.getDetail(options.groundId)
		// },
		// 用于计算规则背景颜色及文字颜色值
		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: {
			// 获取安全区高度
			getHeight(){
				const systemInfo = uni.getSystemInfoSync()
				return systemInfo.safeAreaInsets.bottom
			},
			// 切换周
			toggleWeek(value, index){
				this.weekCurrent = index
				this.togglePrice(index)
			},
			// 获取场地详情
			async getDetail(id) {
				// 获取详情信息
				const result = await getGroundDetail(id)
				this.form = result
				let imgList = this.form.groundPhotos.split(',')
				let img = imgList.map(item => {
					return { url: pro_http + item, fileName: item }
				})
				// 回显到图片列表
				this.mainCoverList.push(...img)
				// 判断是否为编辑,如果为编辑则回显相应数据
				if(this.isEdit) {
					for(let i = 0; i< this.form.weekdayList.length; i++){
						this.form.weekdayList[i].hourList.forEach(item => {
							this.Timelist[i].hourList.forEach(children => {
								if(item.startHour === children.startHour) {
									return children.price = item.price
								}
							})
						})
					}
				}
				this.togglePrice(0)
			},
			changePrice(){},
			// 替换对应价格
			async togglePrice(index) {
				this.showTimeList = this.Timelist[index].hourList
			},
			// 获取营业时间及单价
			async getTime(){
				const res = await getPriods()
				let TimeList = res.map(item => {
					return {
						startHour: item.dictLabel.split('-')[0],
						endHour: item.dictLabel.split('-')[1],
						price: '00.00'
					}
				})
				return TimeList
			},
			// 填充所有单价
			fillPrice(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否填充价格，填充后每个时间段价格相同，是否填充',
					success: async function (res) {
						if (res.confirm) {
							let price = _this.totalPrice
							_this.showTimeList.forEach(item => {
								item.price = price
							})
							uni.$u.toast('填充成功')
						} else if (res.cancel) {
							uni.$u.toast('已取消')
						}
					}
				})
			},
			// 填充所有星期价格
			fillWeekRules(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '选择填充规则后，其他星期与当前星期设置相同，是否填充',
					success: async function (res) {
						if (res.confirm) {
							let list = _this.showTimeList
							_this.Timelist.forEach(item => {
								item.hourList = list
							})
							uni.$u.toast('填充成功')
						} else if (res.cancel) {
							uni.$u.toast('已取消')
						}
					}
				})
			},
			// 删除场地
			delArena(){
				let id = this.groundId
				uni.showModal({
					title: '提示',
					content: '该操作不可复原，是否要删除该场地',
					success: async function (res) {
						if (res.confirm) {
							await delGroundInfo(id)
							uni.$u.toast('删除成功')
							uni.navigateBack()
						} else if (res.cancel) {
							uni.$u.toast('取消删除')
						}
					}
				})
			},
			// 提交新增场地
			submit() {
				// 过滤,只提交设置有价格的时间段
				if(this.Timelist !== undefined) {
					this.Timelist.forEach(item => {
						item.hourList = item.hourList.filter(children => children.price !== '00.00')
					})
				}
				this.form.weekdayList=[]
				this.form.weekdayList.push(...this.Timelist)
				// 场地照片设置
				if(this.mainCoverList.length > 0) {
					this.form.groundPhotos = this.mainCoverList.map(item => item.fileName).join()
				}
				// 提交数据
				this.$refs.uForm.validate().then(async valid => {
					// 判断当前是否为编辑
					if(this.isEdit) {
					 await updateGroundInfo(this.form)
					 await this.getDetail(this.groundId)
					 uni.$u.toast('添加成功')
					 uni.navigateBack()
					} else{
						await addGround(this.form)
						uni.$u.toast('添加成功')
						uni.navigateBack()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 下拉列表
	/deep/.uni-select{
		border: 0;
	}
	// 添加球馆
.add_arena{
	background-color: #F6F7FB;
	padding: 20rpx 30rpx 0;
	.card{
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		.item{
			border-bottom: 2rpx solid #eee;
			padding: 0 30rpx;
			// 填充价格
			.all_price{
				width: 220rpx;
				height: 60rpx;
				background: #1890FF;
				line-height: 60rpx;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				border-radius: 200rpx;
				margin-right: 20rpx;
			}
			// 填充规则
			.all_week{
				width: 410rpx;
				height: 60rpx;
				background: #CCCCCC;
				line-height: 60rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				border-radius: 200rpx;
			}
			// 周列表
			.weekList{
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 16rpx;
				margin-bottom: 30rpx;
				.week_item{
					width: 80rpx;
					height: 52rpx;
					background: #ccc;
					border-radius: 8rpx;
					color: #fff;
					font-size: 28rpx;
					line-height: 52rpx;
					text-align: center;
					&.active{
						background: #FFB336;
					}
				}
			}
			// 营业时间列表
			.time_list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				gap: 30rpx;
				.time_item{
					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;
				}
			}
		}
	}
	// 底部按钮
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 30rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		z-index: 99;
		background-color: #fff;
	}
}
</style>