<template>
	<div>
		<el-drawer class="edit-drawer" title="设置排班" size="800px" :visible.sync="visible" direction="rtl" :modal="modal"
			:wrapper-closable="false" @close="close">
			<el-calendar v-model="time">
				<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
				<template slot="dateCell" slot-scope="{date, data}">
					<p>
						{{ data.day.split('-').slice(1).join('-') }}
						{{{day:data.day,time:timeList}|dayGet}}
					</p>
				</template>
			</el-calendar>
			<el-form ref="form" size="small" label-width="120px">
				<el-form-item label="排班日：">
					<el-tag v-for="(ls,ind) in timeList" :key='ind' closable size="medium" class="item"
						@close="delChecked(ind)">
						{{ls}}
					</el-tag>
				</el-form-item>
				<el-form-item style="text-align: right; padding-right: 10px">
					<el-button type="primary" @click="timeList=[]">清 空</el-button>
					<el-button type="success" @click="confirm">排 班</el-button>
					<el-button @click="close">关 闭</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import {
		postDelGroupStaff,
		postRostering
	} from "@/api/Department";
	export default {
		name: "EditClass",
		filters: {
			dayGet: function(value) {
				if (value.time.indexOf(value.day) >= 0) {
					return '✔️'
				} else {
					return ''
				}
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: true,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
			id: {
				type: [Number, String],
				default: 0,
			},
			classData: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		data() {
			return {
				// 选中的日期列表
				timeList: [],
				// 当前日期
				time: ''
			};
		},
		watch: {
			time(newValue, oldValue) {
				const timeObj = new Date(newValue);
				const month = timeObj.getMonth() + 1;
				const day = timeObj.getDate();
				const timeStr = `${timeObj.getFullYear()}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`;
				const ind = this.timeList.indexOf(timeStr)
				if (ind < 0) {
					this.timeList.push(timeStr)
				} else {
					this.timeList.splice(ind, 1)
				}
			}
		},
		methods: {
			// 删除选中的日期
			delChecked(ind) {
				this.timeList.splice(ind, 1)
			},
			// 选择员工
			staffSel(val) {
				console.log(val, 'xz');
				postAddGroupStaff({
					id: this.id,
					staff_id: val[0].id
				}).then((e) => {
					console.log(e);
					this.checkedStaff.push(...val);
					this.$message({
						type: "success",
						message: "添加成功!",
					});
				});
			},
			close() {
				this.$emit("close");
			},
			confirm() {
				this.$confirm("你确定提交排班吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					let upData = {
						rostering: [],
						group_id: this.id
					}
					const time = this.classData.shift[0]
					// 赋值
					for (let i = 0; i < this.timeList.length; i++) {
						const da = this.timeList[i];
						for (let s = 0; s < this.classData.group_user.length; s++) {
							const dad = this.classData.group_user[s];
							upData.rostering.push({
								"name": time.name,
								"shift_id": time.shift_id, //班次id,班次ID，休息班次传1
								"work_date": da, //排班时间
								"userId": dad.id, //店员id
								"is_rest": "false" //当该参数为1时，shift_id传1。true：休息false：不休息
							})
						}
					}
					const data = await postRostering(upData);
					this.$emit("close");
					this.$emit("confirm");
					this.$message({
						type: "success",
						message: "排班成功!",
					});
				});
			},
			//  详情 getGroupDetail
			async getGroupDetail() {
				console.log('kz', this.id);
				if (!this.id) return;
				const {
					data
				} = await getGroupDetail({
					id: this.id,
				});
				console.log(data, '‘jz');

				this.checkedStaff = data.group_user.map((e) => {
					return e
				});
				const classItem = data.shift_ids[0]
			},
		},
	};
</script>

<style scoped>
	.item {
		margin-right: 5px;
		margin-left: 0 !important;
		margin-bottom: 5px;
	}

	.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>
