<template>
	<div>
		<el-row :gutter="5">
			<el-col :span="5">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" plain @click="handleRefreshTree">刷新</el-button>
					<el-button v-if="userId=='1'" type="primary" plain @click="handleAddTop">新增顶层</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">
						<template #default="{ node, data }">
							<span class="custom-tree-node"> {{ node.label }} </span>
							<span>
								<el-icon :size="16" v-if="data.children.length<1" @click="handleDelete(node, data)"
									color="#F56C6C">
									<Delete />
								</el-icon>
								<el-icon :size="16" @click="handleEdit(node, data)" color="#E6A23C">
									<Edit />
								</el-icon>
							</span>
						</template>
					</el-tree>
				</el-card>
			</el-col>

			<el-col :span="13">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" plain @click="handleAdd">新增</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-table :data="tableData" border @row-click="handleCurrentRowChange">
						<el-table-column prop="id" label="编号" width="50" v-if="isShow" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="deptCode" label="部门编码" width="110" show-overflow-tooltip
							header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="deptName" label="部门名称" width="200" show-overflow-tooltip
							header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="deptDesc" label="部门说明" show-overflow-tooltip header-align="center">
						</el-table-column>
						<el-table-column prop="fId" label="父id" width="77" align="center" v-if="isShow"
							show-overflow-tooltip>
						</el-table-column>
						<!--  <el-table-column label="操作" width="200px" align="center">
			        <template slot-scope="scope">
			          <el-button  plain @click="handleEdit(scope.row)">编辑</el-button>
			          <el-button  plain type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
			        </template>
			      </el-table-column> -->
					</el-table>
				</el-card>
			</el-col>

			<el-col :span="6">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" plain @click="handleAddUserDept">添加</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-table :data="tableDataUserDept" border>
						<el-table-column prop="id" label="id" show-overflow-tooltip v-if="isShow">
						</el-table-column>
						<el-table-column prop="user.userName" sortable label="用户名" show-overflow-tooltip
							header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="user.userDesc" sortable label="姓名" show-overflow-tooltip
							header-align="center" align="center">
						</el-table-column>
						<el-table-column label="操作" width="100px" header-align="center" align="center">
							<template #default="scope">
								<el-button size="small" plain type="danger" @click="handleDeleteUserDept(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>




		<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisible" width="400px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="用户编码" v-if="isShow">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="上级部门">
					<el-input v-model="form.fId" disabled style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="部门编码">
					<el-input v-model="form.deptCode" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="部门名称">
					<el-input v-model="form.deptName" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="部门说明">
					<el-input v-model="form.deptDesc" style="width: 200px;" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="success" @click="handleSave">保存</el-button>
				<el-button type="danger" @click="handleCancelSave">取消</el-button>
			</template>
		</el-dialog>


		<el-dialog :close-on-click-modal="false" draggable title="编辑信息" v-model="dialogVisibleUser" width="500px">
			<el-card :body-style="cardBodyStyle">
				<el-input v-model="queryUserDesc" placeholder="请输入查询条件"
					style="width :200px; margin-right: 10px;"></el-input>
				<el-button type="primary" @click="searchUser">查询</el-button>
			</el-card>
			<el-card :body-style="cardBodyStyle">
				<el-table :data="tableDataUser" border>
					<el-table-column prop="userName" label="用户名" width="150" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="userDesc" label="姓名" width="150" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" header-align="center" align="center">
						<template #default="scope">
							<el-button size="small" type="primary" @click="handleAddUser(scope.row)">选择</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="UserhandleSizeChange" @current-change="UserhandleCurrentChange"
					:current-page="UsercurrentPage" :page-sizes="UserpageSizes" :page-size="UserpageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="UsertotalRows">
				</el-pagination>
			</el-card>
		</el-dialog>



	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	onMounted(() => {
		userId.value = localStorage.getItem('userId')
		getDataTree()
	})

	const expandedKeys = ref([])
	const dataTree = ref([])

	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 userId = ref('')

	const defaultProps = ref({
		children: 'children',
		label: 'deptName'
	})

	const handleRefreshTree = () => {
		getDataTree()
	}


	const dialogVisible = ref(false)
	const handleAddTop = () => {
		dialogVisible.value = true
		form.value = {
			id: '',
			deptCode: '',
			deptName: '',
			deptDesc: '',
			fId: 'D'
		}

		var url = 'framework/SysDepartment/queryNewCode'
		var param = {
			fid: 'D'
		}
		proxy.$axios.get(url, param).then(response => {
			form.value.deptCode = response.data.data.code
		})




	}
	const selectedDept = ref({
		id: '',
		deptCode: ''
	})
	const handleNodeClick = (data) => {
		selectedDept.value = data
		getTableData()
		getTableDataUserDept()
	}

	const handleEdit = (node, data) => {
		dialogVisible.value = true
		form.value = data
	}

	const handleDelete = (node, data) => {
		ElMessageBox.confirm(
			'确定删除本条记录?',
			'提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				draggable: true,
			}
		).then(() => {
			var url = 'framework/SysDepartment/remove'
			var param = {
				id: data.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					getTableData()
					getDataTree()
					dialogVisible.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}




	const tableData = ref([])
	const tableDataUserDept = ref([])
	const isShow = ref(false)

	const getTableData = () => {
		var url = 'framework/SysDepartment/queryByFid'
		var param = {
			fid: selectedDept.value.deptCode
		}
		proxy.$axios.post(url, param).then(response => {
			tableData.value = response.data.data
		})
	}

	const getTableDataUserDept = () => {
		var url = 'framework/SysUserDept/queryByDeptId'
		var param = {
			deptId: selectedDept.value.id
		}
		proxy.$axios.get(url, param).then(response => {
			tableDataUserDept.value = response.data.data
		})
	}




	const handleAdd = () => {
		if (selectedDept.value.id == null || selectedDept.value.id == '') {
			ElMessage({
				type: 'error',
				message: '请选择上级部门'
			});
			return
		}
		dialogVisible.value = true
		form.value = {
			id: '',
			deptCode: '',
			deptName: '',
			deptDesc: '',
			fId: selectedDept.value.deptCode
		}
		var url = 'framework/SysDepartment/queryNewCode'
		var param = {
			fid: selectedDept.value.deptCode
		}
		proxy.$axios.get(url, param).then(response => {
			form.value.deptCode = response.data.data.code
		})
	}
	const selectedDeptId = ref('')
	const handleCurrentRowChange = (row) => {
		// selectedDeptId.value = row.id
		// getTableDataUserDept()
	}


	const handleAddUserDept = () => {
		if (selectedDept.value.id == '') {
			ElMessage({
				type: 'error',
				message: '先选择部门！',
			})
			return
		}
		dialogVisibleUser.value = true

	}
	const handleDeleteUserDept = (row) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {

				var url = 'framework/SysUserDept/remove'
				var param = {
					id: row.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						getTableDataUserDept()
					} else {
						ElMessage({
							type: 'error',
							message: '操作失败!' + response.data.msg
						});
					}
				})

			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}



	const dialogVisibleUser = ref(false)

	const form = ref({
		id: '',
		deptCode: '',
		deptName: '',
		deptDesc: ''
	})

	const handleSave = () => {
		var url = 'framework/SysDepartment/save'
		var param = {
			json: JSON.stringify(form.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage({
					type: 'success',
					message: '操作成功!',
				});
				getTableData()
				getDataTree()
				dialogVisible.value = false
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
	}
	const handleCancelSave = () => {
		dialogVisible.value = false
	}

	const queryUserDesc = ref('')
	const searchUser = () => {
		getTableDataUser()
	}
	const tableDataUser = ref([])

	const UsercurrentPage = ref(1)
	const UsertotalRows = ref(0)
	const UserpageSizes = ref([10, 20, 30, 40])
	const UserpageSize = ref(10)

	const UserhandleSizeChange = (val) => {
		UserpageSize.value = val
		getTableDataUser()
	}

	const UserhandleCurrentChange = (val) => {
		UsercurrentPage.value = val
		getTableDataUser()
	}

	const getTableDataUser = () => {
		var url = 'framework/SysUser/query'
		var param = {
			page: UsercurrentPage.value,
			rows: UserpageSize.value,
			userDesc: queryUserDesc.value
		}
		proxy.$axios.get(url, param).then(response => {
			tableDataUser.value = response.data.data.records
			UsertotalRows.value = response.data.data.total
		})
	}



	const userDept = ref({
		id: '',
		user: {
			id: ''
		},
		dept: {
			id: ''
		}
	})

	const handleAddUser = (row) => {
		userDept.value.user.id = row.id
		userDept.value.dept.id = selectedDept.value.id
		var url = 'framework/SysUserDept/save'
		var param = {
			json: JSON.stringify(userDept.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code === 0) {
				ElMessage({
					type: 'success',
					message: '修改成功!',
				});
				//getTableDataUser()
				getTableDataUserDept()
			} else {
				ElMessage({
					type: 'error',
					message: '修改失败' + response.data.msg,
				})
			}
		});
	}
</script>

<style>
</style>