<template>
	<el-dialog title="人员选择" :visible.sync="open" width="42%">
		<div class="select">
			<div class="item">
				<Treeselect v-model="deptId" noChildrenText="无数据" :disable-branch-nodes="true" search-nested :options="depList" placeholder="公司部门" @select="selectDept" />
			</div>
			<div class="item">
				<Treeselect v-model="postId" noChildrenText="无数据" :disable-branch-nodes="true" search-nested :options="postList" placeholder="级别职称" @select="selectPost" />
			</div>
			<div class="item">
				<el-select v-model="userId" placeholder="全部人员" clearable @change="selectedPerson">
					<el-option v-for="item in personList" :key="item.userId" :label="item.realName" :value="item.userId"></el-option>
				</el-select>
			</div>
		</div>
		<div class="list_item">
			<div v-for="(item, index) in commonPersonList" :key="index" class="text">
				<el-button size="small" class="btn" @click="selectedCommonPerson(item.userId)">{{ item.commonPersonName }}</el-button>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-input v-model="userName" disabled size="small" style="width: 100px; margin-right: 10px" />
			<el-button type="primary" size="small" @click="submit">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { getLevelTreeSelect } from '@/api/system/employeenInfo'
import { selectListByDeptId, updateCommonPerson, getCommonPerson } from '@/api/components/userChoice/index.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	data() {
		return {
			open: false,
			deptId: 0, // 公司部门id
			postId: 0, // 级别职称id
			userId: null, // 人员id
			depList: [], // 公司部门树
			postList: [], // 级别职称树
			personList: [], // 人员列表
			userName: '', //展示人名
			commonPersonList: [] // 常用人列表
		}
	},
	components: { Treeselect },
	created() {
		this.init()
		this.getLevelList()
		this.selectPerson()
		this.getCommonPerson()
	},
	methods: {
		init(val, list) {
			if (val) {
				this.open = val
				this.depList = list
			}
		},
		// 查询常用人
		getCommonPerson() {
			getCommonPerson(this.$store.state.user.userId).then(res => {
				if (res.code === 200) {
					this.commonPersonList = res.data
				}
			})
		},
		// 选择部门
		selectDept(node, instanceId) {
			console.log(node)
			this.personList = []
			this.deptId = node.id
			this.selectPerson()
		},
		//获取级别数据
		getLevelList() {
			getLevelTreeSelect().then(res => {
				if (res.code == 200) {
					this.postList = res.data
					this.postList.unshift({ id: '0', label: '全部级别' })
				} else {
					this.$msg({ type: 'error', message: res.msg })
				}
			})
		},
		// 选择级别
		selectPost(node, instanceId) {
			console.log(node)
			this.personList = []
			this.postId = node.id
			this.selectPerson()
		},
		// 人员查询
		selectPerson() {
			this.personList = []
			selectListByDeptId(this.deptId, this.postId).then(res => {
				this.personList = res.data
			})
		},
		// 选定人员
		selectedPerson(e) {
			this.userName = this.personList.find(item => item.userId === e).realName
		},
		// 选定常用人
		selectedCommonPerson(userId) {
			this.userName = this.personList.find(item => item.userId === userId).realName
			this.userId = userId
		},
		// 确认提交
		submit() {
			const exist = this.commonPersonList.some((item, index, c) => item.userId === this.userId)
			if (this.userId && !exist) {
				updateCommonPerson({ belongUserId: this.$store.state.user.userId, commonPersonName: this.userName, userId: this.userId }).then(res => {
					this.$emit('selectedPerson', this.userId)
					this.open = false
				})
			} else if (this.userId && exist) {
				this.$emit('selectedPerson', this.userId)
				this.open = false
			} else {
				this.$notify({ title: '警告', message: '请选择人员', type: 'warning' })
			}
		}
	}
}
</script>
<style scoped>
.list_item {
	height: 200px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	padding: 0px 10px;
	margin-top: 20px;
}
.select {
	display: flex;
	justify-content: space-between;
}
.item {
	width: 250px;
}
.text {
	margin-top: 8px;
}
.btn {
	width: 85px;
	margin-left: 9px;
}
.title {
	font-size: 18px;
	font-weight: bold;
}
.footer {
	padding: 8px 0;
}
</style>
