<template>
	<ContainerQuery>
		<el-form slot="more" size="small" :inline="true">
			<el-form-item>
				<el-input v-model="search_key" placeholder="考勤组名称" clearable style="width: 220px"
					@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
					<el-button slot="append" icon="el-icon-search" @click="pageChange(1)"></el-button>
				</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 slot="left" size="small" type="primary" @click="openModel">
			新增班次
		</el-button> -->

		<el-table size="small" :data="tableData">
			<el-table-column prop="id" label="ID" min-width="100"></el-table-column>
			<el-table-column prop="name" label="考勤组" min-width="100"></el-table-column>
			<el-table-column 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="time" label="排班日期" min-width="180"></el-table-column>
			<!-- <el-table-column label="操作" min-width="130" fixed="right" header->
				<template slot-scope="scope">
					<el-button type="text" @click="openEditModel(scope.row.id)">
						编辑
					</el-button>
					<el-button type="text" @click="del(scope.row.shift_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" />
	</ContainerQuery>
</template>

<script>
	import {
		getGroupRecord,
	} from "@/api/Department";
	export default {
		name: "ClassHistry",
		data() {
			return {
				// 查询key
				search_key:'',
				// 添加班次弹窗
				add_class: false,
				// 列表数据
				tableData: [],
				page: 1,
				page_size: 10,
				// 数据总条数
				total_count: 0,
				// 保存选中的classid
				class_id: '',
			};
		},
		created() {
			// console.log(sessionStorage.getItem("nodes"), '权限');
			this.getGroupRecord();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getGroupRecord();
		},
		methods: {
			//  获取列表
			async getGroupRecord() {
				const data = await getGroupRecord({
					name:this.search_key,
					page: this.page,
					pageSize: this.page_size,
				});
				this.tableData = data.data;
				console.log(data, 'fanhui');
				console.log(this.tableData, 'fanhui');
				this.total_count = data.pageTotal;
			},

			pageChange(page) {
				this.page = page;
				this.getAllClassList();
			},
			sizeChange(size) {
				this.page_size = size;
				this.pageChange(1);
			}
		},
	};
</script>

<style scoped></style>
