<template>
	<div class="page-container">
		<div class="content-container">
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag" :style="isActive(1)" @click="toTab1">级别</div>
						<div class="tag" :style="isActive(2)" @click="toTab2">职务</div>
					</div>
					<div class="actions">
						<el-button type="primary" icon="el-icon-plus" size="mini " v-show="tabIndex == 1" @click="addLevel">添加</el-button>
						<el-button type="primary" icon="el-icon-plus" size="mini " v-show="tabIndex == 2" @click="addPost">添加</el-button>
					</div>
				</div>
				<!-- 级别表格 -->
				<el-table v-loading="loading" :data="levelList" border :cell-style="{ cursor: 'pointer' }" highlight-current-row @current-change="rowHandler" v-show="tabIndex == 1">
					<el-table-column label="级别" prop="levelName" width="200">
						<template slot-scope="scope">
							<a href="javascript:void(0);" class="linked" @click="toTab2">{{ scope.row.levelName }}</a>
						</template>
					</el-table-column>
					<el-table-column align="center" label="黑星" prop="blackStar" width="100" />
					<el-table-column align="center" label="红星" prop="redStar" width="100" />
					<el-table-column label="描述" prop="remarks" />
					<el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="300">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="updLevel(scope.row)">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="delLevel(scope.row)">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click.stop="levelUpOrder(scope.row)">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click.stop="levelDownOrder(scope.row)">下降</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 职务表格 -->
				<el-table v-loading="loading" :data="postList" border :cell-style="{ cursor: 'pointer' }" highlight-current-row v-show="tabIndex == 2">
					<el-table-column label="职务" prop="jobName" width="200" />
					<el-table-column label="级别" width="200">
						<template slot-scope="scope">
							{{ getLevelName(scope.row.levelId) }}
						</template>
					</el-table-column>
					<el-table-column label="部门" width="200">
						<template slot-scope="scope">
							{{ getDeptName(scope.row.deptId) }}
						</template>
					</el-table-column>
					<el-table-column label="描述" prop="remarks" />
					<el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="300">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="updPost(scope.row)">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="delPost(scope.row)">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click="postUpOrder(scope.row)">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDownOrder(scope.row)">下降</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="editPower(scope.row)">责权</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 添加修改级别弹窗 -->
				<el-dialog title="编辑级别" :visible.sync="levelShow" width="30%" @close="levelCancel">
					<el-form ref="levelForm" :model="levelForm" :rules="levelRules" label-width="100px">
						<el-form-item label="级别" prop="levelName">
							<div style="width: 200px"><el-input v-model="levelForm.levelName" placeholder="请输入级别" /></div>
						</el-form-item>
						<el-form-item label="黑星" prop="blackStar">
							<el-input-number v-model="levelForm.blackStar" step-strictly :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="红星" prop="redStar">
							<el-input-number v-model="levelForm.redStar" step-strictly :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="描述" prop="remarks">
							<div style="width: 300px"><el-input v-model="levelForm.remarks" placeholder="请输入描述" /></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="medium" @click="levelCancel">取 消</el-button>
						<el-button type="primary" size="medium" @click="levelSub">保 存</el-button>
					</div>
				</el-dialog>
				<!-- 添加修改职务弹窗 -->
				<el-dialog title="编辑职务" :visible.sync="postShow" width="30%" @close="postCancel">
					<el-form ref="postForm" :model="postForm" :rules="postRules" label-width="100px">
						<el-form-item label="职务" prop="jobName">
							<div style="width: 200px"><el-input v-model="postForm.jobName" placeholder="请输入职务" /></div>
						</el-form-item>
						<el-form-item label="部门" prop="deptId">
							<el-cascader v-model="deptIds" :options="deptTree" :props="{ expandTrigger: 'hover', value: 'deptId', label: 'deptName', checkStrictly: true }" @change="deptChange" :show-all-levels="false"></el-cascader>
						</el-form-item>
						<el-form-item label="级别" prop="levelName">
							<div style="width: 200px"><el-input disabled v-model="postForm.levelName" placeholder="请输入职务" /></div>
						</el-form-item>
						<el-form-item label="描述" prop="remarks">
							<div style="width: 300px"><el-input v-model="postForm.remarks" placeholder="请输入描述" /></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="postCancel">取 消</el-button>
						<el-button type="primary" size="small" @click="postSub">保 存</el-button>
					</div>
				</el-dialog>
				<!-- 责权弹窗 -->
				<el-dialog title="责权信息" :visible.sync="powerShow" width="30%">
					<div class="power">
						<div>级别职务:{{ postForm.levelName }}\{{ powerForm.jobName }}</div>
						<div><strong>责任</strong></div>
						<div>
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入责任" v-model="powerForm.responsibility"> </el-input>
						</div>
						<div><strong>权力</strong></div>
						<div>
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入权力" v-model="powerForm.right"> </el-input>
						</div>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="powerShow = false">取 消</el-button>
						<el-button size="small" type="primary" @click="powerSub">保 存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import { levelAdd, levelList, levelUpd, levelDel, levelOrder, postAdd, postList, postUpd, postDel, postOrder, powerUpd } from '@/api/system/levelPosition.js'
import { listDept } from '@/api/system/dept.js'
export default {
	name: 'levelPosition',
	data() {
		return {
			loading: false,
			//级别职务 选项
			tabIndex: 1,
			//级别数据
			levelList: [],
			//级别新增弹窗显示
			levelShow: false,
			//级别弹窗表单信息
			levelForm: {
				//黑星
				blackStar: 0,
				//级别id
				levelId: 0,
				//级别名称
				levelName: '',
				//级别排序
				levelSort: 0,
				//红星
				redStar: 0,
				//描述
				remarks: ''
			},
			//级别弹窗表单验证
			levelRules: {
				levelName: [{ required: true, message: '级别名称不能为空', trigger: 'submit' }]
			},
			//职务数据
			postList: [],
			//职务新增弹窗显示
			postShow: false,
			//职务弹窗表单信息
			postForm: {
				//部门id
				deptId: '',
				//职务id
				jobId: 0,
				//职务名称
				jobName: '',
				//职务排序
				jobSort: 0,
				//级别id
				levelId: 0,
				//级别名称
				levelName: '',
				//描述
				remarks: ''
			},
			//职务弹窗表单验证
			postRules: {
				jobName: [{ required: true, message: '职务名称不能为空', trigger: 'submit' }],
				deptId: [{ required: true, message: '未选择部门', trigger: 'submit' }]
			},
			//部门数据
			deptList: [],
			//部门树型数据
			deptTree: [],
			deptIds: [],
			//责权弹窗显示
			powerShow: false,
			//责权表单
			powerForm: {
				//责任
				responsibility: '',
				//权力
				right: '',
				//职务名称
				jobName: ''
			}
		}
	},
	created() {
		console.log(this.$route)
		this.getLevelList()
		listDept().then(res => {
			if (res.code == 200) {
				this.deptList = res.data
				this.deptTree = this.handleTree(res.data, 'deptId')
			}
		})
	},
	computed: {
		theme() {
			return this.$store.state.settings.theme
		}
	},
	methods: {
		isActive(index) {
			if (this.tabIndex != index) return {}
			return {
				color: this.theme
			}
		},
		//获取级别数据
		getLevelList() {
			this.loading = true
			levelList().then(res => {
				if (res.code == 200) {
					this.levelList = res.data
					this.loading = false
				} else {
					this.$msg({ type: 'error', message: res.msg })
				}
			})
		},
		//级别表单字段重置
		resetLevelForm() {
			this.levelForm = {
				//黑星
				blackStar: 0,
				//级别id
				levelId: 0,
				//级别名称
				levelName: '',
				//级别排序
				levelSort: 0,
				//红星
				redStar: 0,
				//描述
				remarks: ''
			}
		},
		//职务表单字段重置
		resetPostForm() {
			this.postForm = {
				//部门id
				deptId: '',
				//职务id
				jobId: 0,
				//职务名称
				jobName: '',
				//职务排序
				jobSort: 0,
				//描述
				remarks: ''
			}
		},
		//新增级别
		addLevel() {
			this.levelShow = true
		},
		//级别弹窗取消
		levelCancel() {
			this.resetLevelForm()
			this.levelShow = false
		},
		//修改级别
		updLevel(row) {
			this.levelForm = { ...row }
			this.levelShow = true
		},
		//删除级别
		delLevel(row) {
			this.$modal
				.confirm('确定要删除吗')
				.then(() => {
					levelDel(row.levelId).then(res => {
						if (res.code == 200) {
							this.$msg({ message: '删除成功' })
							this.getLevelList()
						} else {
							this.$msg({ type: 'error', message: res.msg })
						}
					})
				})
				.catch(() => {})
		},
		//级别重名检测
		checkLevelName(data) {
			let o = this.levelList.find(item => item.levelName == data.levelName && item.levelId != data.levelId)
			if (o) {
				return '级别名称重复'
			}
			return false
		},
		//职务重名检测
		checkPostName(data) {
			let o = this.postList.find(item => item.jobName == data.jobName && item.jobId != data.jobId)
			if (o) {
				return '职务名称重复'
			}
			return false
		},
		//编辑级别提交
		levelSub() {
			this.$refs.levelForm.validate(valid => {
				if (valid) {
					let checkFiled = this.checkLevelName(this.levelForm)
					if (checkFiled) {
						this.$msg({ type: 'error', message: checkFiled })
						return
					}
					if (this.levelForm.levelId) {
						levelUpd(this.levelForm).then(res => {
							if (res.code == 200) {
								this.$msg({ message: '修改成功' })
								this.getLevelList()
								this.levelCancel()
							}
						})
					} else {
						this.levelForm.levelSort = this.levelList.length ? this.levelList[0].levelSort + 1 : 1
						levelAdd(this.levelForm).then(res => {
							if (res.code === 200) {
								this.$msg({ message: '添加成功' })
								this.getLevelList()
								this.levelCancel()
							}
						})
					}
				} else {
					return false
				}
			})
		},
		//级别上升
		levelUpOrder(row) {
			console.log(row)
			let prevList = this.levelList.filter(item => item.levelSort > row.levelSort)
			prevList.sort((a, b) => {
				return a.levelSort - b.levelSort
			})
			let prev = prevList[0]
			if (!prev) {
				this.$msg({ type: 'info', message: '已经是最高级了' })
			} else {
				let d = [
					{ levelId: row.levelId, levelSort: prev.levelSort },
					{ levelId: prev.levelId, levelSort: row.levelSort }
				]
				levelOrder(d).then(res => {
					if (res.code == 200) {
						let pSort = prev.levelSort
						prev.levelSort = row.levelSort
						row.levelSort = pSort
						this.levelList.sort((a, b) => {
							return b.levelSort - a.levelSort
						})
						this.$msg({ message: '设置成功' })
					}
				})
			}
		},
		//级别下降
		levelDownOrder(row) {
			let nextList = this.levelList.filter(item => item.levelSort < row.levelSort)
			nextList.sort((a, b) => {
				return b.levelSort - a.levelSort
			})
			let next = nextList[0]
			if (!next) {
				this.$msg({ type: 'info', message: '已经是最下级了' })
			} else {
				let d = [
					{ levelId: row.levelId, levelSort: next.levelSort },
					{ levelId: next.levelId, levelSort: row.levelSort }
				]
				levelOrder(d).then(res => {
					if (res.code == 200) {
						let nSort = next.levelSort
						next.levelSort = row.levelSort
						row.levelSort = nSort
						this.levelList.sort((a, b) => {
							return b.levelSort - a.levelSort
						})
						this.$msg({ message: '设置成功' })
					}
				})
			}
		},
		//跳转到级别
		toTab1() {
			this.tabIndex = 1
		},
		//级别行单击
		rowHandler(e) {
			if (!e) return
			this.postForm.levelId = e.levelId
			this.postForm.levelName = e.levelName
			this.postList = []
			this.getPostList()
		},
		//跳转到职务
		toTab2() {
			this.tabIndex = 2
		},
		//获取职务数据
		getPostList() {
			postList({ levelId: this.postForm.levelId }).then(res => {
				if (res.code == 200) {
					this.postList = res.data
				} else {
					this.$msg({ type: 'error', message: res.msg })
				}
			})
		},
		//添加职务
		addPost() {
			this.postShow = true
		},
		//修改职务
		updPost(row) {
			this.postForm = { ...row }
			this.postShow = true
			this.deptIds = this.getDeptIds(row.deptId)
		},
		//查找部门ids
		getDeptIds(id) {
			let res = [id]
			let self = this.deptList.find(item => item.deptId == id)
			let p = this.deptList.find(item => item.deptId == self.parentId)
			while (p) {
				res.unshift(p.deptId)
				p = this.deptList.find(item => item.deptId == p.parentId)
			}

			return res
		},
		//删除职务
		delPost(row) {
			this.$modal
				.confirm('确定要删除吗')
				.then(() => {
					postDel(row.jobId).then(res => {
						if (res.code == 200) {
							this.$msg({ message: '删除成功' })
							this.getPostList()
						} else {
							this.$msg({ type: 'error', message: res.msg })
						}
					})
				})
				.catch(() => {})
		},
		//职务提交
		postSub() {
			this.$refs.postForm.validate(valid => {
				if (valid) {
					let checkFiled = this.checkPostName(this.postForm)
					if (checkFiled) {
						this.$msg({ type: 'error', message: checkFiled })
						return
					}
					if (this.postForm.jobId) {
						postUpd(this.postForm).then(res => {
							if (res.code == 200) {
								this.$msg({ message: '修改成功' })
								this.getPostList()
								this.postCancel()
							} else {
								this.$msg({ type: 'error', message: res.msg })
							}
						})
					} else {
						this.postForm.jobSort = this.postList.length ? this.postList[0].jobSort + 1 : 1
						postAdd(this.postForm).then(res => {
							if (res.code == 200) {
								this.$msg({ message: '添加成功' })
								this.getPostList()
								this.postCancel()
							} else {
								this.$msg({ type: 'error', message: res.msg })
							}
						})
					}
				} else {
					return false
				}
			})
		},
		//职务取消
		postCancel() {
			this.resetPostForm()
			this.postShow = false
			this.deptIds = []
		},
		//部门改变
		deptChange(e) {
			this.postForm.deptId = e[e.length - 1]
		},
		//获取级别名称
		getLevelName(id) {
			let o = this.levelList.find(item => item.levelId == id)
			if (o) {
				return o.levelName
			}
			return ''
		},
		//获取部门名称
		getDeptName(id) {
			let o = this.deptList.find(item => item.deptId == id)
			if (o) {
				return o.deptName
			}
			return ''
		},
		//职务上升排序
		postUpOrder(row) {
			let prevList = this.postList.filter(item => item.jobSort > row.jobSort)
			prevList.sort((a, b) => {
				return a.jobSort - b.jobSort
			})
			let prev = prevList[0]
			if (!prev) {
				this.$msg({ type: 'info', message: '已经是最高级了' })
			} else {
				let d = [
					{ jobId: row.jobId, jobSort: prev.jobSort },
					{ jobId: prev.jobId, jobSort: row.jobSort }
				]
				postOrder(d).then(res => {
					if (res.code == 200) {
						let pSort = prev.jobSort
						prev.jobSort = row.jobSort
						row.jobSort = pSort
						this.postList.sort((a, b) => {
							return b.jobSort - a.jobSort
						})
						this.$msg({ message: '设置成功' })
					}
				})
			}
		},
		//职务下降排序
		postDownOrder(row) {
			let nextList = this.postList.filter(item => item.jobSort < row.jobSort)
			nextList.sort((a, b) => {
				return b.jobSort - a.jobSort
			})
			let next = nextList[0]
			if (!next) {
				this.$msg({ type: 'info', message: '已经是最下级了' })
			} else {
				let d = [
					{ jobId: row.jobId, jobSort: next.jobSort },
					{ jobId: next.jobId, jobSort: row.jobSort }
				]
				postOrder(d).then(res => {
					if (res.code == 200) {
						let nSort = next.jobSort
						next.jobSort = row.jobSort
						row.jobSort = nSort
						this.postList.sort((a, b) => {
							return b.jobSort - a.jobSort
						})
						this.$msg({ message: '设置成功' })
					}
				})
			}
		},
		//编辑责权
		editPower(row) {
			this.powerForm.responsibility = row.responsibility
			this.powerForm.right = row.right
			this.powerForm.jobName = row.jobName
			this.powerForm.jobId = row.jobId
			this.powerShow = true
		},
		//保存责权
		powerSub() {
			delete this.powerForm.jobName
			powerUpd(this.powerForm).then(res => {
				if (res.code == 200) {
					this.$msg({ message: '修改成功' })
					let o = this.postList.find(item => item.jobId == this.powerForm.jobId)
					o.responsibility = this.powerForm.responsibility
					o.right = this.powerForm.right
					this.powerShow = false
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.power > div {
	margin-bottom: 10px;
}
</style>
