<template>
	<el-button
		v-if="selectable"
		type="primary"
		circle
		size="mini"
		icon="el-icon-plus"
		@click="showDialog()"
	/>

	<el-dialog
		title="选择人员"
		width="80%"
		v-model="dialoguser"
		:before-close="handleClose"
		:append-to-body="true"
		:close-on-click-modal="false"
	>
		<el-row>
			<el-col :md="8" :sm="24">
				<el-main class="nopadding">
					<el-tabs type="border-card" stretch="true">
						<el-tab-pane label="按部门分类">
							<el-input placeholder="输入关键字进行过滤" v-model="filterText">
							</el-input>
							<el-tree
								class="filter-tree"
								style="padding-top: 15px"
								:data="deptdata"
								default-expand-all
								:filter-node-method="filterNode"
								ref="tree"
								@node-click="handleNodeClick"
							>
							</el-tree>
						</el-tab-pane>
						<el-tab-pane label="按岗位分类">
							<el-input
								placeholder="输入关键字进行过滤"
								v-model="filterTexts"
							>
							</el-input>

							<el-tree
								class="filter-tree"
								style="padding-top: 15px"
								:data="postdata"
								default-expand-all
								:filter-node-method="filterNodes"
								ref="tree"
								@node-click="handleNodeClicks"
							>
							</el-tree>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-col>
			<el-col :md="16" :sm="24">
				<el-header style="border-bottom: none">
					<div class="left-panel">
						<el-input
							v-model="query.search"
							placeholder="姓名"
							clearable
							@keyup.enter="handleQuery"
						></el-input>
						<el-button
							type="primary"
							icon="el-icon-search"
							@click="handleQuery"
						></el-button>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-table
						ref="userTable"
						:data="apiObj"
						row-key="id"
						stripe
						height="400"
						@selection-change="selectionChange"
					>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column
							label="#"
							type="index"
							width="50"
						></el-table-column>
						<el-table-column label="姓名" prop="name"></el-table-column>

						<el-table-column label="手机号" prop="phone"></el-table-column>
						<el-table-column label="部门" prop="belong_dept">
							<template #default="scope">
								<span v-if="scope.row.belong_dept_">{{scope.row.belong_dept_.name}}</span>
							</template>
						</el-table-column>
						<el-table-column
							label="创建时间"
							prop="create_time"
						></el-table-column>
					</el-table>
				</el-main>
				<div class="right-panel">
					<el-button
						@click="handleClose"
						style="float: right"
					>取 消
					</el-button>
					<el-button
						type="primary"
						:loading="isSaveing"
						@click="submitfrom()"
						style="float: right;margin-right: 10px"
					>确定
					</el-button>
				</div>
			</el-col>
		</el-row>
	</el-dialog>
</template>
<script>
	import {genTree} from "@/utils/verificate";

	export default {
		name: "employee",
		components: {},
		props: {
			user: {
				// 接受外部v-model传入的值
				type: [String],
				default: "",
			},
			multiple: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				apiObj: [],
				query: {},
				selection: [],
				filterText: "",
				filterTexts: "",
				deptdata: [],
				postdata: [],
				username: [],
				selectable: true,
				dialoguser: false,
				isSaveing: false,
				dataValue: this.value,
			};
		},
		mounted() {
			this.getUser();
			this.getDept();
			this.getPost();
			debugger;
			if(this.user===""){
				this.selection = [];
				this.apiObj.map(item => {
					this.$refs.table.toggleRowSelection(item, false)
				})
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			filterTexts(val) {
				this.$refs.tree.filter(val);
			},
			dataValue(val) {
				this.$emit("input", val);
				console.log(val)
			},

		},
		methods: {
			showDialog() {
				debugger;
				let that = this;
				that.dialoguser = true;
				that.$nextTick(function () {
					debugger;
					if(that.user===""){
						that.selection = [];
						that.apiObj.map(item => {
							that.$refs.table.toggleRowSelection(item, false)
						})
					}else{
						that.apiObj.map(item => {
							debugger;
							if (item.id === that.user) {
								that.$refs.table.toggleRowSelection(item, true)
							}
						})
					}

				})

			},
			//加载人员
			getUser() {
				this.$API.system.user.list.req({page: 0}).then((res) => {
					this.apiObj = res;
				});
			},
			handleQuery() {
				this.$API.system.user.list
					.req(this.query)
					.then((res) => {
						this.apiObj = res;
					});
			},
			//加载部门树数据
			async getDept() {
				let res = await this.$API.system.dept.list.req({page: 0});
				this.deptdata = genTree(res);
			},
			//加载部门树数据
			async getPost() {
				let res = await this.$API.system.post.list.req({page: 0});
				this.postdata = genTree(res);
			},
			filterNode(value, data) {
				console.log(value);
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			filterNodes(value, data) {
				console.log(value);
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//部门点击显示对应的人员
			handleNodeClick(data) {
				this.$API.system.user.list
					.req({belong_dept: data.id, page: 0})
					.then((res) => {
						this.apiObj = res;
					});
			},
			//岗位点击显示对应的人员
			handleNodeClicks(data) {
				this.$API.system.user.list.req({post: data.id, page: 0}).then((res) => {
					this.apiObj = res;
				});
			},
			//表格选择后回调事件
			selectionChange(selection) {
				debugger;
				if (selection.length > 1) {
					let del_row = selection.shift();
					this.selection = selection[1];
					this.$refs.userTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
				}else{
					debugger;
					this.selection = selection;
				}
			},

			submitfrom() {
				debugger;
				if(this.selection.length===1){
					let obj={id:this.selection[0].id,name:this.selection[0].name};
					this.$emit("handlerSubmit", obj);
					this.dialoguser = false;
				}else{
					this.$message.warning('请选择您要加签的处理人')
				}
			},

			resetQuery() {
				this.query = {};
			},
			handleClose(){
				this.$confirm(`您未更改人员，确定关闭吗？`, '提示', {
					type: 'warning'
				}).then(() => {
					this.dialoguser = false;
				})
			},
		},
	};
</script>
