<template>
	<div>
		<el-drawer class="edit-drawer" :title="isEdit ? '修改考勤组' : '新增考勤组'" size="650px" :visible.sync="visible"
			direction="rtl" :modal="modal" :wrapper-closable="false" @close="close">
			<!-- <div v-if="!isEdit" class="page-tip-div" style="margin-top: 0">
				<span>温馨提示：</span>
				<span>
					新员工初始密码为
					<span style="color: #ff4400; font-weight: bold">88888888</span>
					，登录后可修改密码。
				</span>
			</div> -->
			<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="salesManId" style="margin-bottom: 20px">
					<div>
						<el-select v-model="form.className" style="width: 350px" filterable placeholder="请选择班次"
							@change="classChange">
							<el-option v-for="(item, index) in class_list" :key="index" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
						<el-button size="mini" type="text" @click="getAllClassList">
							【刷新】
						</el-button>
					</div>
				</el-form-item>
				<el-form-item label="员工：" prop="salesManId" style="margin-bottom: 20px">
					<template>
						<el-tag v-for="(ls,ind) in checkedStaff" :key='ind'  closable  size="medium" class="item"
							@close="delChecked(ind)">
							{{ls.staffName}}
							{{ls.staffCode}}
						</el-tag>
					</template>
					<div>
						<el-button type="danger" @click="staff_show= true">
							添加
						</el-button>
					</div>
				</el-form-item>
				<!-- <el-form-item label="生效：" prop="enable_next_day" style="margin-bottom: 20px">
					<el-select v-model="form.enable_next_day" filterable placeholder="是否明日生效">
						<el-option label="是" value="1"></el-option>
						<el-option label="否" value="0"></el-option>
					</el-select>
				</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>
		<staffListModal v-if="staff_show" :is-show="staff_show" 
			:isserch="isserch" @cancel="staff_show = false" @confirm="staffSel" />
	</div>
</template>

<script>
	import {
		// getGroupDetail,
		getAllClassList,
		postAddGroup
	} from "@/api/Department";
	import staffListModal from "@/component/common/staffListModal";
	export default {
		name: "AddGroup",
		components: {
			staffListModal,
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
			id: {
			  type: [Number, String],
			  default: 0,
			},
		},
		data() {
			return {
				// 是否显示员工
				staff_show: false,
				isserch: true,
				// 班次列表
				class_list: [],
				// 添加选中的员工列表
				checkedStaff: [],
				form: {
					// 明日生效
					enable_next_day: '1',
					// 选中的班次id
					classId: '',
					// 选中的班次name
					className:'',
					//考情组名字
					name: '',
					// 绑定的班次
					shift_vo_list: ''
				},
				rules: {
					name: [{
						required: true,
						message: "请输入组名称",
						trigger: "blur"
					}]
				}
			};
		},
		created() {
			// console.log('cj‘',this.id);
			// if (this.id) {
			// 	this.getGroupDetail();
			// }
			// 加载班次列表
			this.getAllClassList();
		},
		methods: {
			// 删除选中的员工
			delChecked(ind) {
				// console.log(ind, '删除');
				this.checkedStaff.splice(ind, 1)
			},
			// 选择班次
			classChange(val) {
				const target = this.class_list.find((item) => item.id === val);
				this.form.classId = target.shift_id;
				this.form.className = target.name;
			},
			// 获取班次列表
			async getAllClassList() {
				const {
					data
				} = await getAllClassList({
					page: "1",
					pageSize: "999",
				});
				this.class_list = data;
			},
			// 选择员工
			staffSel(val) {
				// console.log(val,'xz');
				this.checkedStaff.push(...val)
			},
			close() {
				this.$emit("close");
			},
			//  班次详情 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]
			// 	this.form = {
			// 		// 明日生效
			// 		enable_next_day: '1',
			// 		// 选中的班次id
			// 		classId: classItem.id,
			// 		// 选中的班次name
			// 		className:classItem.name,
			// 		//考情组名字
			// 		name: data.name,
			// 		// 绑定的班次
			// 		shift_vo_list: ''
			// 	};
				
			// },
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const upData = {
							name:this.form.name,
							staff_id:this.checkedStaff.map((e)=>{
								return e.id
							}).join(','),
							enable_next_day:this.form.enable_next_day==='1'?true:false,
							shift_vo_list:this.form.classId,
							
						}
						// console.log(upData,'提交数据');
						const data = await postAddGroup(upData);
						this.$message({
							message: data.data,
							type: "success",
						});
						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</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>
