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

			<el-card :body-style="cardBodyStyle">
				<el-select v-model="application" clearable style="width:200px; " value-key="id"
					@change="changeApplication">
					<el-option v-for="option in options" :key="option.id" :value="option"
						:label="option.applicationName" />
				</el-select>
			</el-card>


			<el-card :body-style="cardBodyStyle">
				<el-tree :data="dataTree" :props="defaultProps" node-key="id" :expand-on-click-node="false"
					highlight-current :default-expanded-keys="expandedKeys">
					<template #default="{ node, data }">
						<span class="custom-tree-node">
							<span>{{ node.label }}</span>
							<span>
								<a @click="handleConfirm(node, data)"> 选择 </a>
							</span>
						</span>
					</template>
				</el-tree>
			</el-card>
		</el-dialog>
	</div>
</template>

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

	const {
		proxy
	} = getCurrentInstance()

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




	const defaultProps = ref({
		children: 'children',
		label: 'menuName'
	})
	// const data = ref({})
	// const node = ref({})
	const expandedKeys = ref([])
	const dataTree = ref([])
	const dialogVisible = ref(false)
	const getDataTree = () => {
		var url = 'framework/SysMenu/queryForApplication'
		var param = {
			applicationId: application.value.id
		}
		proxy.$axios.get(url, param).then(response => {
			dataTree.value = response.data.data
			if (dataTree.value.length == 1) {
				for (var node of dataTree) {
					expandedKeys.value.push(node.id)
				}
			}
		})
	}


	const emit = defineEmits(['receiveFromChild'])
	const handleConfirm = (node, data) => {
		emit('receiveFromChild', data);
		dialogVisible.value = false
	}




	const application = ref({
		id: '',
		applicationName: ''
	})
	const options = ref([])
	const getApplications = () => {
		var url = 'framework/Application/query'
		var param = {
			params: JSON.stringify({})
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				options.value = response.data.data
				application.value = options.value[0]
				getDataTree()
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		});
	}
	const changeApplication = (value) => {
		application.value = value
		// console.log(value)
		getDataTree()
	}



	const open = () => {
		// getDataTree()
		getApplications()
		dialogVisible.value = true
	}
	const close = () => {
		dialogVisible.value = false
	}
	defineExpose({
		open,
		close
	})
</script>

<style>
	.btn {
		padding-left: 15px;
	}


	.menu-tree-container {

		width: 20%;
		height: 100%;
		float: left;
		/* background: #e5e9f2; */
	}

	.menu-table-container {
		/* position: relative; */

		width: 60%;
		float: left;
		/* margin-right: 10px; */
		/* margin-top: -530px; */
		/* border: black 1px solid; */
	}

	.menu-button-container {
		/* position: relative; */

		width: 20%;
		float: right;
		/* margin-right: 10px; */
		/* margin-top: -530px; */
		/* border: black 1px solid; */
	}
</style>