<template>
	<div>
		<el-drawer class="edit-drawer" :title="isEdit ? '修改班次' : '新增班次'" size="650px" :visible.sync="visible"
			direction="rtl" :modal="modal" :wrapper-closable="false" @close="close">
			<el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
				<el-form-item label="班次名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入班次名称"></el-input>
				</el-form-item>
				<el-form-item label="每次签到金额" prop="form.single_time">
					<el-input v-model="form.single_time" placeholder="请输入班次名称"></el-input>
				</el-form-item>
				<el-form-item label="上下班" prop="age">
					<div v-for="(ls,ind) in form.sections" :key="ind" class="margin-b-10">
						<el-time-select v-model="ls.times[0].check_time" placeholder="起始时间"
							:picker-options="(ind>0?form.sections[ind-1].times[1].check_time:0)|startTimeConfig">
						</el-time-select>
						-
						<el-time-select v-model="ls.times[1].check_time" placeholder="结束时间"
							:picker-options="ls.times[0].check_time|endTimeConfig">
						</el-time-select>
						<el-button v-if="ind>0" @click="delTime(ind)">删 除</el-button>
					</div>
					<el-button class="margin-b-10" type="danger" @click="addTime">添 加</el-button>
				</el-form-item>
				<el-form-item style="text-align: right; padding-right: 10px">
					<el-button type="primary" @click="confirm">确 定</el-button>
					<el-button @click="close">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import {
		// postClassDetails,
		postAddClass
	} from "@/api/Department";
	export default {
		name: "AddClass",
		filters: {
			startTimeConfig: function(value) {
				return {
					start: '08:00',
					step: '00:15',
					end: '20:30',
					minTime: value
				}
			},
			endTimeConfig: function(value) {
				return {
					start: '08:00',
					step: '00:15',
					end: '24:00',
					minTime: value
				};
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				form: {
					//班次名字
					name: '',
					//签到单次奖励金额
					single_time: 0,
					// 签到时间范围
					// 整合签到数据
					sections: [{
						times: [{
							"check_type": "OnDuty", //类型(OnDuty上班，OffDuty下班)
							"across": 0, //是否跨天
							"end_min": -1, //允许的最玩打卡时间，分钟为单位（-1表示不限制）
							"check_time": "08:30", //check时间
							"free_check": false, //是否免打卡
							"begin_min": 0 //允许的最早提前打卡时间，分钟为单位}
						}, {
							"check_type": "OffDuty", //类型(OnDuty上班，OffDuty下班)
							"across": 0, //是否跨天
							"end_min": -1, //允许的最玩打卡时间，分钟为单位（-1表示不限制）
							"check_time": "11:30", //check时间
							"free_check": false, //是否免打卡
							"begin_min": 0 //允许的最早提前打卡时间，分钟为单位
						}],
					}],
				},
				rules: {
					name: [{
						required: true,
						message: "请输入班次名称",
						trigger: "blur"
					}],
					single_time: [{
						required: true,
						message: "请输入单次签到金额",
						trigger: "blur"
					}],
				}
			};
		},
		// created() {
		// 	if (this.id) {
		// 		this.postClassDetails();
		// 	}
		// },
		methods: {
			// 删除上下班
			delTime(ind) {
				this.form.sections.splice(ind, 1)
			},
			// 添加上下班
			addTime() {
				this.form.sections.push({
					times: [{
						"check_type": "OnDuty", //类型(OnDuty上班，OffDuty下班)
						"across": 0, //是否跨天
						"end_min": -1, //允许的最玩打卡时间，分钟为单位（-1表示不限制）
						"check_time": "", //check时间
						"free_check": false, //是否免打卡
						"begin_min": 0 //允许的最早提前打卡时间，分钟为单位}
					}, {
						"check_type": "OffDuty", //类型(OnDuty上班，OffDuty下班)
						"across": 0, //是否跨天
						"end_min": -1, //允许的最玩打卡时间，分钟为单位（-1表示不限制）
						"check_time": "", //check时间
						"free_check": false, //是否免打卡
						"begin_min": 0 //允许的最早提前打卡时间，分钟为单位
					}],
				})
			},

			close() {
				this.$emit("close");
			},
			//  班次详情 postClassDetails
			// async postClassDetails() {
			// 	if (!this.id) return;
			// 	const {
			// 		data
			// 	} = await postClassDetails(this.id);

			// 	this.form = {
			// 		...data,
			// 		departmentPidPath: data.extend.departmentPidPath,
			// 		rolePidPath: data.extend.rolePidPath,
			// 		age: data.age * 1000,
			// 	};
			// 	if (data.extend.rolePidPath) {
			// 		this.role = data.extend.rolePidPath.split(",").map((item) => {
			// 			return parseInt(item);
			// 		});
			// 	}

			// 	this.department = data.extend.departmentPidPath
			// 		.split(",")
			// 		.map((item) => {
			// 			return parseInt(item);
			// 		});
			// 	let shopArr = [];
			// 	data.dataField.shopIds.forEach((item, index) => {
			// 		shopArr.push({
			// 			id: item,
			// 			name: data.dataField.shopNames[index],
			// 		});
			// 	});
			// 	this.shop_arr = shopArr;
			// 	let arr = [];
			// 	data.dataField.staffIds.forEach((item, index) => {
			// 		arr.push({
			// 			id: item,
			// 			staffName: data.dataField.staffNames[index],
			// 		});
			// 	});
			// 	this.staffName_arr = arr;
			// },
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let upData = {
							shift: Object.assign({}, this.form)
						};
						upData.shift.sections = upData.shift.sections.map((res) => {
							let data = res.times.map((e)=>{
								return Object.assign({},e)
							})
							
							if (data[1].check_time == '24:00') {
								data[1].across = 1;
								data[1].check_time = "00:00";
							}
							data[0].check_time = "1970-01-01 " + data[0].check_time +
								':00'
							data[1].check_time = "1970-01-01 " + data[1].check_time +
								':00'
								
								return {
									times:data
									};
						})
						const data = await postAddClass(upData);
						this.$message({
							message: data.data,
							type: "success",
						});

						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>
