<template>
	<el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="800px" height="500px">

		<el-row>
			<el-col :span="8">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" @click="reset">重置</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-tree :data="dataTree" :props="defaultProps" node-key="id" @node-click="handleNodeClick"
						class="tree-container" :expand-on-click-node="false" :default-expanded-keys="expandedKeys">
					</el-tree>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-card :body-style="cardBodyStyle">
					<el-input v-model="query" style="width: 200px; margin-right: 10px;" placeholder="请输入姓名"></el-input>
					<el-button type="primary" @click="search">查询</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-table :data="tableData" border highlight-current-row>
						<el-table-column prop="id" label="编号" width="60" v-if="isShow">
						</el-table-column>
						<el-table-column prop="user.userCode" label="用户姓名" header-align="center" align="center"
							show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="user.userName" label="用户姓名" header-align="center" align="center"
							show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="user.userDesc" label="姓名" header-align="center" align="center"
							show-overflow-tooltip>
						</el-table-column>
						<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip
							width="200px">
							<template #default="scope">
								<el-button plain @click="handleSelect(scope.row)">选择</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
						:page-sizes="pageSizes" :total="totalRows" background="background"
						layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
						@current-change="handleCurrentChange">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

	</el-dialog>
</template>


<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)

	const dialogVisible = ref(false)
	const open = () => {
		dialogVisible.value = true
		getDataTree()
	}
	const close = () => {
		dialogVisible.value = false
	}
	const emit = defineEmits(['receiveFromChild'])
	const handleSelect = (row) => {
		emit('receiveFromChild', row)
		close()
	}

	defineExpose({
		open,
		close
	})






	const expandedKeys = ref([])
	const dataTree = ref([])
	const defaultProps = ref({
		children: 'children',
		label: 'deptName'
	})


	const getDataTree = () => {
		var url = 'framework/SysDepartment/queryTree'
		var param = {}
		proxy.$axios.get(url, param).then(response => {
			dataTree.value = response.data.data
			if (dataTree.value.length == 1) {
				for (var node of dataTree.value) {
					expandedKeys.value.push(node.id)
				}
			}
		});
	}
	const reset = () => {
		selectDepartment.value = null
	}
	const selectDepartment = ref({})
	const handleNodeClick = (data) => {
		console.log(data)
		selectDepartment.value = data
		getTableData()
	}




	/**
	 *   查询 
	 */
	const query = ref('')
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'framework/SysUserDept/queryByDeptUserNamePage'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			deptId: selectDepartment.value.id,
			userName: query.value
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询 
	 */

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */
</script>

<style>
</style>