<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">
					<div v-for="(ls,ind) in scope.row.time" :key='ind'>
						上班：{{ls[0]}}
						下班：{{ls[1]}}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="single_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" />
		<!--   新增班次-->
		<AddClass v-if="add_class" :is-edit="isEdit" :visible="add_class" @close="add_class = false"
			@confirm="staffConfirm"></AddClass>
	</ContainerQuery>
</template>

<script>
	import {
		getAllClassList,
		postDelClass
	} from "@/api/Department";
	import AddClass from "../components/addClass.vue";
	// import DepartmentSel from "@/component/common/DepartmentSel";
	// import RoleSelect from "../../../component/common/RoleSelect";
	export default {
		name: "SignClass",
		components: {
			// RoleSelect,
			// DepartmentSel,
			AddClass,
		},
		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.getAllClassList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getAllClassList();
		},
		methods: {
			//  选择角色
			roleChange(val) {
				this.roleId = val[val.length - 1];
				this.departmentPidPath = val.join(",");
				console.log(this.departmentPidPath, 'ar');
				this.page = 1;
				this.getAllClassList();
			},
			// 选择部门
			departmentChange(val) {
				this.departmentId = val[val.length - 1];
				this.departmentPidPath = val.join(",");
				this.pageChange(1);
			},
			staffConfirm() {
				this.getAllClassList();
			},
			//  获取列表
			async getAllClassList() {
				const data = await getAllClassList({
					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;
			},
			// 删除排班
			del(id) {
				this.$confirm("你确定删除此排班吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await postDelClass({
						id: id
					});

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

			pageChange(page) {
				this.page = page;
				this.getAllClassList();
			},
			sizeChange(size) {
				this.page_size = size;
				this.pageChange(1);
			},
			//  编辑员工
			// openEditModel(id) {
			// 	this.class_id = id;
			// 	this.isEdit = true;
			// 	this.add_class = true;
			// },
			// 打开添加班次页面
			openModel() {
				this.class_id = 0;
				this.isEdit = false;
				this.add_class = true;
			},
		},
	};
</script>

<style scoped></style>
