<template>
	<div id="app" class="app-container">
		<div style="width: 1000px;margin: auto;">
			<el-button type="success" @click="AddYuYue" style="padding-top: 10px;">添加时间</el-button>
			<el-button type="primary" @click="UpdYuYue" style="padding-top: 10px;">满员修改</el-button>
			<el-button type="danger" @click="RemoveYuYue" style="padding-top: 10px;">还原时间</el-button>
			<el-calendar>
				<template slot="dateCell" slot-scope="{date, data}" style="padding: 0px;">
					<div class="CalenDiv" :class="currentCount(data)>0?'IsSelectDay':'IsNoDay'">
						<p class="DataTimeString">{{ data.day.split('-').slice(1).join('-') }}</p>
						<p class="NumberString">预约名额<label
								style="margin-left: 10px;font-weight: bold;">{{currentCount(data)}}</label></p>
					</div>
				</template>
			</el-calendar>
		</div>
		<el-dialog title="还原" :visible.sync="dialogVisibleR" width="50%">
			<el-form ref="form" :model="RemoveModel" label-width="80px" :rules="ruleform">
				<el-form-item label="开始预约" prop="TimeOfAppointmentStart">
					<el-date-picker type="date" placeholder="选择日期" v-model="RemoveModel.TimeOfAppointmentStart"
						style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="至" prop="TimeOfAppointmentEnd">
					<el-date-picker type="date" placeholder="选择日期" v-model="RemoveModel.TimeOfAppointmentEnd"
						style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleR = false">取 消</el-button>
				<el-button type="primary" @click="SubmitRemove">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="新增" :visible.sync="dialogVisible" width="50%">
			<el-form ref="form" :model="form" label-width="80px" :rules="ruleform">
				<el-form-item label="可预约人数" prop="ReservedPlaces">
					<el-input v-model="form.ReservedPlaces" placeholder="设置预约人数"></el-input>
				</el-form-item>
				<el-form-item label="开始预约" prop="TimeOfAppointmentStart">
					<el-date-picker type="date" placeholder="选择日期" v-model="form.TimeOfAppointmentStart"
						style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="至" prop="TimeOfAppointmentEnd">
					<el-date-picker type="date" placeholder="选择日期" v-model="form.TimeOfAppointmentEnd"
						style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="SubmitAdd">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改" :visible.sync="dialogVisibleU" width="50%">
			<el-form ref="updform" :model="updform" label-width="80px" :rules="ruleformU">
				<el-form-item label="可预约人数" prop="ReservedPlaces">
					<el-input v-model="updform.ReservedPlaces" placeholder="设置预约人数"></el-input>
				</el-form-item>
				<el-form-item label="预约日期" prop="TimeOfAppointment">
					<el-date-picker type="date" placeholder="选择日期" v-model="updform.TimeOfAppointment"
						style="width: 100%;"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleU = false">取 消</el-button>
				<el-button type="primary" @click="SubmitUpd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ReservationSettingsList,
		SettingReservation,
		UpadteReservation,
		RemoveDateSection,
	} from '../../api/ReservationSettings.js'
	import utils from '../../utils/utils.js'
	import {
		parseTime
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				dialogVisibleU: false,
				dialogVisibleR: false,
				dialogVisible: false,
				model: {
					pageIndex: 1,
					pageSize: 50,
					sort: '',
					sortOrder: '',
					keyword: '',

				},
				yuyue: [],
				// 添加预约时间
				form: {
					"TimeOfAppointmentStart": '',
					"TimeOfAppointmentEnd": '',
					"ReservedPlaces": 0
				},
				RemoveModel: {
					"TimeOfAppointmentStart": "2022-02-1",
					"TimeOfAppointmentEnd": "2022-02-5"
				},
				// 修改预约时间
				updform: {
					"id": 0,
					"TimeOfAppointment": "",
					"ReservedPlaces": 0
				},
				ruleformU: {
					ReservedPlaces: [{
							required: true,
							message: '请设置预约名额',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9]\d*$/,
							message: '不允许输入整数以外的值'
						},
					],
					TimeOfAppointment: [{
						type: 'date',
						required: true,
						message: '请选择预约日期',
						trigger: 'change'
					}],

				},
				ruleform: {
					ReservedPlaces: [{
							required: true,
							message: '请设置预约名额',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9]\d*$/,
							message: '不允许输入整数以外的值'
						},
					],
					TimeOfAppointmentStart: [{
						type: 'date',
						required: true,
						message: '请选择开始预约日期',
						trigger: 'change'
					}],
					TimeOfAppointmentEnd: [{
						type: 'date',
						required: true,
						message: '请选择结束预约日期',
						trigger: 'change'
					}],
				},
			}
		},
		created() {
			this.ShowYuYue()
			// this.updform.TimeOfAppointment=utls.formatTime(new Date(),"yyyy-MM-dd")
		},
		computed: {
			currentCount() {
				return (data) => {
					let yuyue = this.yuyue;
					let item = yuyue.find(t => t.TimeOfAppointment == data.day);
					if (item) {
						return item.ReservedPlaces
					} else {
						return '0';
					}
				}
			}
		},
		methods: {
			// 移除指定时间段的时间
			RemoveYuYue() {
				this.dialogVisibleR = true
			},
			// 提交还原数据
			SubmitRemove(){
				RemoveDateSection(this.RemoveModel).then(res => {
					if (res.data.code == 200) {
						this.$message.success('操作成功')
						this.dialogVisibleR = false
						this.ShowYuYue()
					} else {
						this.$message.error('操作失败');
					}
				})
			},
			// 提交新增预约时间
			SubmitAdd() {
				console.log('时间', this.form.TimeOfAppointmentStart)
				console.log('form', this.form)
				this.$refs.form.validate((valid) => {
					if (valid) {
						SettingReservation(this.form).then(res => {
							console.log('添加', res)
							if (res.data.code == 200) {
								this.$message.success('新增预约时间成功')
								this.ShowYuYue()
								this.dialogVisible = false
							} else {
								this.$message.error(res.data.message)
							}
						})
					}
				})
			},
			// 提交修改预约时间
			SubmitUpd() {
				this.$refs.updform.validate((valid) => {
					if (valid) {
						UpadteReservation(this.updform).then(res => {
							console.log('添加', res)
							if (res.data.code == 200) {
								this.$message.success('修改预约时间成功')
								this.ShowYuYue()
								this.dialogVisibleU = false
							} else {
								this.$message.error('预约时间不存在，无法进行设置')
							}
						})
					}
				})
			},
			// 添加预约时间
			AddYuYue() {
				this.dialogVisible = true
				// SettingReservation(this.form).then(res => {
				// 	console.log('ceshi', res)
				// })
			},
			// 修改预约时间
			UpdYuYue() {
				this.dialogVisibleU = true
			},
			// 查询可预约数据
			ShowYuYue() {
				ReservationSettingsList(this.model).then(res => {
					console.log('yuyue', res)
					res.data.data.forEach((item, index) => {
						item.TimeOfAppointment = utils.formatTime(item.TimeOfAppointment, "yyyy-MM-dd")
					})
					this.yuyue = res.data.data
					console.log('预约时间', this.yuyue)
				})
			}
		}
	}
</script>

<style less scoped="scoped">
	/deep/.el-calendar__title {
		font-size: 20px;
		font-weight: bold;
	}

	/deep/.el-calendar {
		background-color: #f2f2f2;
		box-shadow: 0 0 15px #CDCDCD;
		border-radius: 10px;
	}

	/deep/.el-calendar-day {
		padding: 0px !important;
	}

	/deep/.prev .IsNoDay,
	.next .IsNoDay {
		background: #8080805c !important;
		box-shadow: 0 0 0px #808080 !important;
	}

	.CalenDiv {
		height: calc(100% - 10px);
		padding: 10px;
		margin: 10px;
		box-shadow: 0 0 10px #000;
		color: #FFF;
		border-radius: 10px;
	}

	.CalenDiv p {
		margin: 0px;
	}

	.DataTimeString {
		font-size: 22px;
		font-weight: bold;
	}

	.NumberString {
		font-size: 16px;
		padding-top: 10px;
	}

	.IsSelectDay {
		background: #27940b !important;
	}

	.IsNoDay {
		background: #94918d !important;
	}
</style>
