<template>
	<div class="page-container">
		<div class="content-container">
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag" :class="{ activeClass: over == 1 }" @click="getNature">性质</div>
						<div class="tag" :class="{ activeClass: over == 2 }" @click="getPostList">岗位</div>
					</div>
					<div class="actions">
						<el-button type="primary" plain size="small " @click="handleAddNature" v-show="natureShow">添加</el-button>
						<el-button type="primary" plain size="small " @click="handleAddPost" v-show="postShow">添加</el-button>
					</div>
				</div>
				<!-- 性质列表 -->
				<el-table
					v-loading="loading"
					:data="natureList"
					:header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
					border
					highlight-current-row
					@row-click="natureLineClick"
					v-show="natureShow"
				>
					<el-table-column label="性质" prop="natureName" width="200">
						<template slot-scope="scope">
							<a href="javascript:void(0);" class="linked" @click="natureLineDbclick(scope.row)">{{ scope.row.natureName }}</a>
						</template>
					</el-table-column>
					<el-table-column label="描述" prop="remarks" width="1200" />
					<el-table-column label="操作" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click="natureRise(scope.row, scope.$index)">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click="natureDecline(scope.row, scope.$index)">下降</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 岗位列表 -->
				<el-table
					v-loading="loading"
					:data="postList"
					border
					:header-cell-style="{ 'text-align': 'center' }"
					highlight-current-row
					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
					@row-click="postLineClick"
					v-show="postShow"
				>
					<el-table-column label="岗位" prop="postName" width="200" />
					<el-table-column label="性质" width="200">
						{{ natureName }}
					</el-table-column>
					<el-table-column label="描述" prop="remark" width="800" />
					<el-table-column label="操作" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="updataPost(scope.row)">编辑</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete-solid" @click="deletePost(scope.row)">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click="postRise(scope.row, scope.$index)">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDecline(scope.row, scope.$index)">下降</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

				<!-- 添加或修改性质对话框 -->
				<el-dialog :title="title" :visible.sync="natureOpen" width="500px" append-to-body>
					<el-form ref="form" :model="form" :rules="rules" label-width="80px">
						<el-form-item label="性质" prop="natureName">
							<el-input v-model="form.natureName" placeholder="请输入性质" />
						</el-form-item>
						<el-form-item label="描述" prop="remarks">
							<el-input v-model="form.remarks" placeholder="请输入描述" />
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancelNature">取 消</el-button>
						<el-button type="primary" @click="submitFormNature">保 存</el-button>
					</div>
				</el-dialog>
				<!-- 岗位添加或修改对话框 -->
				<el-dialog :title="title" :visible.sync="postOpen" width="500px" append-to-body>
					<el-form ref="formPost" :model="formPost" :rules="rulesPost" label-width="80px">
						<el-form-item label="岗位" prop="postName">
							<el-input v-model="formPost.postName" placeholder="请输入岗位" />
						</el-form-item>
						<el-form-item label="性质">
							<el-input v-model="natureName" disabled />
						</el-form-item>
						<el-form-item label="描述" prop="remark">
							<el-input v-model="formPost.remark" placeholder="请输入描述" />
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancelPost">取 消</el-button>
						<el-button type="primary" @click="submitFormPost">保 存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import { listPost, getPost, delPost, addPost, updatePost, updateSortPost, getNature, addNature, delNature, updateNature, getNatureByNatureId, updateSortNature } from '@/api/system/post'

export default {
	name: 'Post',
	dicts: ['sys_normal_disable'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 岗位表格数据
			postList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			natureOpen: false,
			// 查询参数
			queryParams: {
				natureId: 0,
				postName: ''
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				natureName: [{ required: true, message: '性质不能为空', trigger: 'blur' }]
			},
			rulesPost: {
				postName: [{ required: true, message: '岗位不能为空', trigger: 'blur' }]
			},
			over: 1,
			natureShow: true,
			postShow: false, //
			postOpen: false,
			getIndex: 0,
			getIndex1: 0,
			natureList: [], // 性质列表
			perId: 0, // 前一个id
			decId: 0, // 后一个id
			natureName: '',
			formPost: {},
			nature: {},
			perPostId: 0,
			decPostId: 0,
			natureObj: {}
		}
	},
	created() {
		this.getList()
	},
	methods: {
		/** 查询岗位列表 */
		getList() {
			this.loading = true
			getNature().then((response) => {
				this.natureList = response.data
				this.loading = false
			})
		},
		// 性质列表
		getNature() {
			this.getList()
			this.over = 1
			this.natureShow = true
			this.postShow = false
		},
		// 岗位列表
		getPostList() {
			this.getList()
			this.over = 2
			this.natureShow = false
			this.postShow = true
			this.natureLineDbclick(this.natureObj)
		},
		//为行对象(row)设置index属性
		tableRowClassName({ row, rowIndex }) {
			row.index = rowIndex
		},
		// 单击性质表格某一行
		natureLineClick(row, event, column) {
			this.getIndex = row.index
			this.natureObj = row
		},
		// 双击性质表格某一行
		natureLineDbclick(row) {
			console.log(row)
			this.queryParams.natureId = row.natureId
			this.natureName = row.natureName
			this.nature = row
			listPost(this.queryParams).then((res) => {
				if (res.code === 200) {
					this.postList = res.data
					this.natureShow = false
					this.postShow = true
					this.over = 2
				}
			})
		},
		// 单击岗位表格某一行
		postLineClick(row, event, column) {
			this.getIndex1 = row.index
		},
		// 取消按钮
		cancelNature() {
			this.natureOpen = false
			this.form = {}
		},
		// 取消岗位
		cancelPost() {
			this.postOpen = false
			this.formPost = {}
		},
		// 岗位添加提交
		submitFormPost() {
			this.$refs['formPost'].validate((valid) => {
				if (valid) {
					if (this.formPost.postId != undefined) {
						updatePost(this.formPost).then((response) => {
							this.$msg({ message: '修改成功' })
							this.postOpen = false
							this.getList()
							this.natureLineDbclick(this.nature)
						})
					} else {
						if (this.postList.length > 0) {
							this.formPost.natureId = this.queryParams.natureId
							this.formPost.postSort = parseInt(this.postList[0].postSort) + 1
							addPost(this.formPost).then((response) => {
								this.$msg({ message: '添加成功' })
								this.formPost = {}
								this.postOpen = false
								this.getList()
								this.natureLineDbclick(this.nature)
							})
						} else {
							this.formPost.postSort = 1
							this.formPost.natureId = this.queryParams.natureId
							addPost(this.formPost).then((response) => {
								this.$msg({ message: '添加成功' })
								this.formPost = {}
								this.formPost.postSort = null
								this.postOpen = false
								this.getList()
								this.natureLineDbclick(this.nature)
							})
						}
					}
				}
			})
		},
		/** 新增性质按钮操作 */
		handleAddNature() {
			this.natureOpen = true
			this.title = '性质添加'
		},
		// 新增岗位
		handleAddPost() {
			this.title = '岗位添加'
			this.postOpen = true
		},
		/** 修改性质按钮操作 */
		handleUpdate(row) {
			getNatureByNatureId(row.natureId).then((response) => {
				this.form = response.data
				this.natureOpen = true
				this.title = '修改性质'
			})
		},
		// 修改岗位按钮
		updataPost(row) {
			getPost(row.postId).then((res) => {
				this.formPost = res.data
				this.postOpen = true
				this.title = '修改岗位'
			})
		},
		// 删除岗位
		deletePost(row) {
			this.$modal
				.confirm('是否确认删除岗位为"' + row.postName + '"的数据项？')
				.then(function () {
					return delPost(row.postId)
				})
				.then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.getList()
						this.natureLineDbclick(this.nature)
						this.$msg({ message: '删除成功' })
					} else if (res.code === 500) {
						this.getList()
						this.$notify({ title: '警告', message: res.msg, type: 'warning' })
					}
				})
				.catch(() => {})
		},
		/** 性质提交按钮 */
		submitFormNature: function () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.natureId != undefined) {
						updateNature(this.form).then((response) => {
							this.$modal.msgSuccess('修改成功')
							this.natureOpen = false
							this.getList()
						})
					} else {
						if (this.natureList.length > 0) {
							this.form.natureSort = parseInt(this.natureList[0].natureSort) + 1
							addNature(this.form).then((response) => {
								this.$modal.msgSuccess('新增成功')
								this.form = {}
								this.natureOpen = false
								this.getList()
							})
						} else {
							this.form.natureSort = 1
							addNature(this.form).then((response) => {
								console.log(response)
								this.$modal.msgSuccess('新增成功')
								this.form = {}
								this.form.natureSort = null
								this.natureOpen = false
								this.getList()
							})
						}
					}
				}
			})
		},
		// 性质上升
		natureRise(row, rowIndex) {
			console.log(rowIndex)
			this.perId = row.natureSort
			let sysNatureEditBOs = []
			let item = {}
			let previous = {}
			if (rowIndex === 0) {
				this.$notify({ title: '警告', message: '已经是最高级，无法上升！', type: 'warning' })
			} else {
				row.natureSort = this.natureList[rowIndex - 1].natureSort
				this.natureList[rowIndex - 1].natureSort = this.perId
				item = {
					natureId: row.natureId,
					natureSort: row.natureSort
				}
				previous = {
					natureId: this.natureList[rowIndex - 1].natureId,
					natureSort: this.natureList[rowIndex - 1].natureSort
				}
				sysNatureEditBOs = [item, previous]
				updateSortNature(sysNatureEditBOs).then((res) => {
					if (res.code === 200) {
						this.$msg({ message: '设置成功' })
						this.getList()
					}
				})
			}
		},
		// 岗位上升
		postRise(row, rowIndex) {
			this.perPostId = row.postSort
			let sysNatureEditBOs = []
			let item = {}
			let previous = {}
			if (rowIndex === 0) {
				this.$notify({ title: '警告', message: '已经是最高级，无法上升！', type: 'warning' })
			} else {
				row.postSort = this.postList[rowIndex - 1].postSort
				this.postList[rowIndex - 1].postSort = this.perPostId
				item = {
					postId: row.postId,
					postSort: row.postSort
				}
				previous = {
					postId: this.postList[rowIndex - 1].postId,
					postSort: this.postList[rowIndex - 1].postSort
				}
				sysNatureEditBOs = [item, previous]
				updateSortPost(sysNatureEditBOs).then((res) => {
					if (res.code === 200) {
						this.$msg({ message: '设置成功' })
						this.getList()
						this.natureLineDbclick(this.nature)
					}
				})
			}
		},
		// 性质下降
		natureDecline(row, rowIndex) {
			this.decId = row.natureSort
			let sysNatureEditBOs = []
			let item = {}
			let previous = {}
			if (rowIndex === this.natureList.length - 1) {
				this.$notify({ title: '警告', message: '已经是最低级，无法下降！', type: 'warning' })
			} else {
				row.natureSort = this.natureList[rowIndex + 1].natureSort
				this.natureList[rowIndex + 1].natureSort = this.decId
				item = {
					natureId: row.natureId,
					natureSort: row.natureSort
				}
				previous = {
					natureId: this.natureList[rowIndex + 1].natureId,
					natureSort: this.natureList[rowIndex + 1].natureSort
				}
				sysNatureEditBOs = [item, previous]
				updateSortNature(sysNatureEditBOs).then((res) => {
					if (res.code === 200) {
						this.$msg({ message: '设置成功' })
						this.getList()
					}
				})
			}
		},
		// 岗位下降
		postDecline(row, rowIndex) {
			this.decPostId = row.postSort
			let sysNatureEditBOs = []
			let item = {}
			let previous = {}
			if (rowIndex === this.postList.length - 1) {
				this.$notify({ title: '警告', message: '已经是最低级，无法下降！', type: 'warning' })
			} else {
				row.postSort = this.postList[rowIndex + 1].postSort
				this.postList[rowIndex + 1].postSort = this.decPostId
				item = {
					postId: row.postId,
					postSort: row.postSort
				}
				previous = {
					postId: this.postList[rowIndex + 1].postId,
					postSort: this.postList[rowIndex + 1].postSort
				}
				sysNatureEditBOs = [item, previous]
				updateSortPost(sysNatureEditBOs).then((res) => {
					if (res.code === 200) {
						this.$msg({ message: '设置成功' })
						this.getList()
						this.natureLineDbclick(this.nature)
					}
				})
			}
		},
		/** 删除性质按钮操作 */
		handleDelete(row) {
			this.$modal
				.confirm('是否确认删除性质为"' + row.natureName + '"的数据项？')
				.then(function () {
					return delNature(row.natureId)
				})
				.then(() => {
					this.getList()
					this.$msg({ message: '删除成功' })
				})
				.catch(() => {})
		}
	}
}
</script>
<style scoped>
.activeClass {
	color: #409eff;
}
</style>