<template>
	<ContainerQuery>
		<div slot="left">
			<el-button size="small" type="primary" @click="openModel">
				新增阶梯奖励
			</el-button>
			<el-button size="small" type="primary" @click="openStaffStockList">
				股权发放记录
			</el-button>
		</div>

		<div class="table">
			<el-table :data="tableData" style="width: 100%" type="index">
				<el-table-column prop="name" label="奖励">
				</el-table-column>
				<el-table-column prop="number" label="业绩">
				</el-table-column>
				<el-table-column prop="stock" label="奖励股权">
				</el-table-column>
				<el-table-column label="操作" width="130" fixed="right" header->
					<template slot-scope="scope">
						<el-button type="text"
							@click="editOpenModel(scope.row.id)">
							编辑
						</el-button>
						<el-button type="text"
							@click="del(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--    分页查询-->
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
			<AddLadder v-if="showLadder" :id="ladderId" :is-edit="isEdit" :visible="showLadder" @close="showLadder = false" @confirm="Confirm"></AddLadder>
	</ContainerQuery>
</template>
<script>
	import {
		StaffLadderList,
		StaffLadderDelete
	} from "@/api/Department";
	import AddLadder from "./components/addLadder";
	export default {
		name: "LadderList",
		components: {
			AddLadder
		},
		data() {
			return {
				// actionid
				ladderId:'',
				// 添加阶梯奖励
				showLadder:false,
				// 是否为修改
				isEdit:false,
				total: 0,
				page: 1,
				pageSize: 10,
				tableData: [],
			};
		},
		created() {
			this.StaffLadderList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.StaffLadderList();
		},
		methods: {
			// 打开发放股权记录
			openStaffStockList(){
				this.$router.push(`/ladder/staffStockList`);
			},
			// 删除
			del(id){
				this.$confirm("你确定删除阶梯奖励吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await StaffLadderDelete({
						id: id
					});
					this.StaffLadderList();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});
			},
			// 打开添加弹窗
			openModel(){
				this.ladderId = '';
				this.isEdit = false;
				this.showLadder = true;
			},
			// 
			editOpenModel(id){
				this.ladderId = id;
				this.isEdit = true;
				this.showLadder = true;
			},
			// 添加提交完成
			Confirm(){
				this.StaffLadderList();
			},
			async StaffLadderList() {
				const {
					data,
					pageTotal
				} = await StaffLadderList({
					page: this.page,
					pageSize: this.pageSize,
				});
				this.tableData = data;
				this.total = pageTotal;
			},
			pageChange(page) {
				this.page = page;
				this.StaffLadderList();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
		},
	};
</script>
<style></style>
