<!--
* @name: 选择人员
* @author:zhangpengcheng
* @CreateTime:2022-11-10
-->
<template>
	<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" @handleConfirmClick="personConfirmClick"
		:dialogVisible.sync="personDialog" class="userDialog" title="选择人员" width="1000px" top="10vh" :footerShow="true">
		<div class="organizationBody">
			<base-layout title="组织机构" style="width: 20%;border-radius: 5px;height: 350px;overflow: auto; "
				:operateButtonSwitch="false" :bottonShow="false" :isPage="false" :mainColor="mainColor"
				:mainHight='personMainHight'>
				<div slot="main">
					<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
						:menuData="menuData" @handleNodeClick="handleNodeClick"></base-tree>
				</div>
			</base-layout>
			<base-layout title="选择人员" style=";border-radius: 5px;height: 350px;flex:1" :bottonShow="false"
				:operateButtonSwitch="false" :isPage="false" :bodyHight="personHight">
				<div slot="main" style="padding: 10px;">
					<base-table ref="personCustomtable" :border="true" :showIndex="false" :slotrow="true"
						@radioChange="radioChange" :tabLoading.sync="personLoading" :tableHeight="personTableHeight"
						:tableData="personTableData" :tableColumn="tableColumn">
					</base-table>
				</div>
			</base-layout>
		</div>
	</base-dialog>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue"
import baseTree from "@/components/base/BaseMenuTree/index.vue"
import baseLayout from "@/components/base/baseLayout"
import baseTable from "@/components/base/baseTable"
import {
	PersonList
} from '@/api/apis/personnelSettings'
export default {
	components: {
		baseLayout,
		baseTree,
		baseDialog,
		baseTable
	},
	props: {
		menuData: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 表头数据
		tableColumn: {
			type: Array,
			default: () => {
				return []
			}
		},
	},
	data() {
		return {
			personDialog: false,
			mainColor: '#f8f8f8',
			personMainHight: 'calc(100% - 39px)', //人员弹框高度
			personHight: '350px', //人员选择高度
			personLoading: false, //人员加载
			personTableHeight: '280px', //人员表格高度
			personTableData: [],
			personModel: {
				page: 1,
				limit: 999,
				departmentID: '',
				Sequence: '',
				SequenceName: ''
			},
			personData: {}
		}
	},
	mounted() {
	},
	methods: {
		// 菜单树选中
		handleNodeClick(data) {
			this.personModel.departmentID = data.id
			this.personData = {}
			this.$refs.personCustomtable.clearRadioIndex()
			this.getPersonList()
		},
		personConfirmClick() {
			if (!this.personData) {
				this.$vmNews('请选择数据')
				return
			}
			this.$emit('personConfirmClick', this.personData)
		},
		// 获得人员列表
		async getPersonList() {
			this.personLoading = true
			setTimeout(() => {
				this.personLoading = false
			}, 3000)
			let params = {
				...this.personModel
			}
			let res = await PersonList(params)
			if (res.code === 1) {
				this.personTableData = res.data[1]
				this.personLoading = false
			}
		},
		radioChange(val) {
			this.personData = val
		}
	}
}
</script>

<style scoped>
.organizationBody {
	display: flex;
	justify-content: space-evenly;
	background-color: #f2f3f4;
	padding: 10px
}
</style>