<template>
	<el-container class="aminui-main-container">
		<el-header class="aminui-main-container__query-header">
			<el-form :model="params" @submit.prevent>
				<el-row :gutter="15">
					<el-col :md="8" :xs="24">
						<el-form-item label="岗位名称:">
							<el-input v-model="params.nameLike" clearable placeholder="输入岗位名称搜索"></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="10" :xs="24">
						<el-form-item>
							<el-button-group>
								<el-button type="primary" icon="el-icon-search" @click="reloadTable('add')">查询</el-button>
								<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
							</el-button-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-header>

		<el-container class="aminui-main-container__table-main">
			<el-header>
				<div class="left-panel">
					<el-button type="primary" @click="table_add">新增岗位</el-button>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable class="scTable" ref="table" row-key="id" :apiObj="api" :params="params" :column="column" tableName="jobTable" pageParams="current">
					<template #createTime="scope"><span v-time="scope.row.createTime"></span></template>
					<el-table-column label="操作" fixed="right" align="center" width="120">
						<template #default="scope">
							<el-button text @click="table_edit(scope.row)">编辑</el-button>
							<el-divider direction="vertical" />
							<el-button text @click="table_del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

    <job-dialog v-if="dialog" ref="jobDialog" @success="reloadTable" @closed="dialog = false"></job-dialog>
</template>

<script>
	import jobDialog from "./dialog";

	export default {
		components: {
			jobDialog
		},

		data() {
			return {
				api: this.$API.system.job,
				params: {
					orderBy: "jobSort_asc",
					nameLike: null
				},
				column: [
					{ label: "岗位名称", prop: "name", align: "center" },
					{ label: "岗位排序", prop: "jobSort", align: "center", sortable: true },
					{ label: "创建日期", prop: "createTime", align: "center", sortable: true }
				],

				dialog: false
			}
		},

		methods: {
			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" ? this.$refs.table.currentPage : 1;
				this.$refs.table.reload(this.params, page);
			},

			// 本地更新数据
			reset() {
				this.params.nameLike = null;
				this.reloadTable();
			},
			
			// 添加岗位
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.jobDialog.open());
			},

			// 编辑岗位
			table_edit(row) {
				this.dialog = true;
				this.$nextTick(() => this.$refs.jobDialog.open("edit").setData(row));
			},

			// 删除岗位
			table_del({ id }) {
				this.$confirm("确认删除当前岗位吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.job.del({ id }).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>