<template>
	<ContainerQuery>
		<!-- <el-form slot="more" size="small" :inline="true">
			<el-form-item>
				<el-date-picker v-model="search_key" type="month" placeholder="选择月" @change="pageChange(1)">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-input v-model="currentUnit" clearable  placeholder="请选择员工" @clear="staff = ''"
					@blur="staff = ''">
					<i slot="suffix" class="el-input__icon el-icon-search" @click="saleFn(true)"></i>
				</el-input>
			</el-form-item>
			<el-form-item>
				<DepartmentSel v-model="departmentPidPath" width="150" clearable @change="departmentChange" />
			</el-form-item>
			<el-form-item>
				<RoleSelect v-model="rolePidPath" width="150" clearable @change="roleChange" />
			</el-form-item>
		</el-form> -->
		<!-- <el-button v-if="$accessCheck($Access.StaffAddSign)" slot="left" size="small" type="primary" @click="openModel"> -->
		<el-button  slot="left" size="small" type="primary" @click="openModel">
			新增考勤组
		</el-button>

		<el-table size="small" :data="tableData">
			<el-table-column prop="name" label="名称" min-width="100"></el-table-column>
			<el-table-column prop="group_user" label="考勤员工" min-width="380">
				<template slot-scope="scope">
					<span v-for="(ls,ind) in scope.row.group_user" :key='ind'>
						{{ls.staffName}}
						<span v-if="ind<scope.row.group_user.length-1">,</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="shift" label="班次" min-width="180">
				<template slot-scope="scope">
					<span v-for="(ls,ind) in scope.row.shift" :key='ind'>
						{{ls.name}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="130" fixed="right" header->
				<template slot-scope="scope">
					<!-- <el-button v-if="$accessCheck($Access.GroupClassSet)" type="text" -->
					<el-button type="text"
						@click="openEditClass(scope.row)">
						排班
					</el-button>
					<!-- <el-button v-if="$accessCheck($Access.GroupUpdateSign)" type="text" -->
					<el-button type="text"
						@click="openEditModel(scope.row.group_id)">
						员工
					</el-button>
					<!-- <el-button v-if="$accessCheck($Access.GroupDelSign)" type="text" @click="del(scope.row.group_id)"> -->
					<el-button  type="text" @click="del(scope.row.group_id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<FooterPage :page-size="page_size" :total-page="total_count" :current-page="page" @pageChange="pageChange"
			@sizeChange="sizeChange" />
		<!--   新增考勤组-->
		<AddGroup v-if="add_Group" :id="group_id" :is-edit="isEdit" :visible="add_Group" @close="add_Group = false" @confirm="Confirm"></AddGroup>
		<!-- 修改考勤组员工 -->
		<EditStaff v-if="exid_staff" :id="group_id" :visible="exid_staff" @close="exid_staff = false" @confirm="Confirm"></EditStaff>
		<!-- 安排排班 -->
		<EditClass v-if="exid_class" :id="group_id" :class-data='groupData'  :visible="exid_class" @close="exid_class = false" @confirm="Confirm"></EditClass>
	</ContainerQuery>
</template>

<script>
	import {
		getAllSignList,
		postDelGroup
	} from "@/api/Department";
	import AddGroup from "../components/addSingGroup.vue";
	import EditStaff from "../components/editStaff.vue";
	import EditClass from "../components/editClass.vue";
	// import DepartmentSel from "@/component/common/DepartmentSel";
	// import RoleSelect from "../../../component/common/RoleSelect";
	export default {
		name: "SignList",
		components: {
			// RoleSelect,
			EditStaff,
			AddGroup,
			EditClass
		},
		data() {
			return {
				staff_id: 0,
				total_count: 0,
				page: 1,
				page_size: 10,
				pageTotal: 0,
				// 部门
				departmentPidPath: [],
				// 角色
				rolePidPath: [],
				// 查询的月份
				search_key: '',
				// 数据列表
				tableData: [],
				// 保存组id
				group_id: '',
				// 是否显示添加组
				add_Group: false,
				// 是否为编辑组
				isEdit: false,
				// 是否显示编辑员工
				exid_staff: false,
				// 考勤排班
				exid_class: false

			};
		},
		created() {
			this.getAllSignList();
		},
		activated() {
			if (this.$_isInit()) {
				return
			};
			this.getAllSignList();
		},
		methods: {
			// //  选择角色
			// roleChange(val) {
			// 	this.roleId = val[val.length - 1];
			// 	this.departmentPidPath = val.join(",");
			// 	this.page = 1;
			// 	this.getAllSignList();
			// },
			// // 选择部门
			// departmentChange(val) {
			// 	this.departmentId = val[val.length - 1];
			// 	this.departmentPidPath = val.join(",");
			// 	this.pageChange(1);
			// },
			Confirm() {
				this.getAllSignList();
			},
			//  获取列表
			async getAllSignList() {
				// console.log(this.tableData, 'fanhui11');
				const data = await getAllSignList({
					page: this.page, //页数
					pageSize: this.page_size, //条数
					// uid: this.departmentId, //查询的部门
					// month: this.search_key, //查询的月份
				});

				this.tableData = data.data;
				// console.log(data, 'fanhui ');
				this.total_count = data.pageTotal;
			},
			// 删除用户
			del(id) {
				this.$confirm("你确定删除此员工吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await postDelGroup({
						id: id
					});

					this.getAllSignList();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});
			},

			pageChange(page) {
				this.page = page;
				this.getAllSignList();
			},
			sizeChange(size) {
				this.page_size = size;
				this.pageChange(1);
			},
			// 排班
			openEditClass(data) {
				this.group_id = data.group_id;
				this.groupData = data;
				// console.log(this.group_id,'‘芥芥家');
				this.exid_class = true;
			},
			//  编辑员工
			openEditModel(id) {
				this.group_id = id;
				// console.log(this.group_id,'‘芥芥家');
				this.exid_staff = true;
			},
			openModel() {
				this.group_id = 0;
				this.isEdit = false;
				this.add_Group = true;
			},
		},
	};
</script>

<style scoped></style>
