<template>
	<div>
		<el-drawer class="edit-drawer" :title="isEdit ? '修改员工' : '新增班次'" size="30%" :visible.sync="visible"
			direction="rtl" :modal="modal" :wrapper-closable="false" @close="close">
			<el-form ref="form" size="small" label-width="120px">
				<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.id)">
							{{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 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-check="false" :is-show="staff_show" :isserch="isserch"
			@cancel="staff_show = false" @confirm="staffSel" />
	</div>
</template>

<script>
	import {
		getGroupDetail,
		postDelGroupStaff,
		postAddGroupStaff
	} from "@/api/Department";
	import staffListModal from "@/component/common/staffListModal";
	export default {
		name: "EditStaff",
		components: {
			staffListModal,
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: true,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
			id: {
				type: [Number, String],
				default: 0,
			},
		},
		data() {
			return {
				// 是否显示员工
				staff_show: false,
				isserch: true,
				// 添加选中的员工列表
				checkedStaff: [],
			};
		},
		created() {
			if (this.id) {
				this.getGroupDetail();
			}
		},
		methods: {
			// 删除选中的员工
			delChecked(ind, id) {
				// console.log(ind, '删除');
				this.$confirm("你确定删除此员工吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await postDelGroupStaff({
						id: this.id,
						staff_id: id
					});
					this.checkedStaff.splice(ind, 1)
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});

			},
			// 选择员工
			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");
				this.$emit("confirm");
			},
			//  详情 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>
