<template>
	<base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
		@handleConfirmClick="handleConfirmClick" :dialogVisible.sync="dialogVisible"
		class="userDialog" :title="dialogTitle" width="700px" top="10vh" :footerShow="true">
		<div class="organizationBody">
			<base-layout :title="leftTitle" style="width: 45%;" :bottonShow="false" :isPage="false">
				<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="rightTitle" style="width: 45%;" :bottonShow="false" :isPage="false"
				:bodyHight="treeHight">
				<div slot="main">
					<div flex="cross:center" v-for="(item,index) in formList" :key="index">
						<label style="width: 35%;">{{item.label}}</label>
						<el-input style="flex:1" v-model="ruleForm[item.prop]"></el-input>
					</div>
				</div>
			</base-layout>
		</div>
	</base-dialog>
</template>

<script>
	import baseDialog from "@/components/base/BaseNewDialog"
	import baseLayout from "@/components/base/baseLayout"
	import baseTree from "@/components/base/BaseMenuTree/index.vue"
	export default {
		components:{
			baseDialog,
			baseLayout,
			baseTree
		},
		props:{
			// 高度
			treeHight: {
				type:[Number,String],
				default:'auto'
			},
			// 显示隐藏
			dialogVisible: {
				type: Boolean,
				default: false,
			},
			// 弹窗标题
			dialogTitle: {
				type: String,
				default: '标题',
			},
			// 左侧标题
			leftTitle: {
				type: String,
				default: '菜单树',
			},
			// 右侧标题
			rightTitle: {
				type: String,
				default: '右侧标题',
			},
			// 菜单数据
			menuData: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 表单数据
			formList: {
				type: Array,
				default: () => {
					return []
				}
			},

		},
		data() {
			return {
				// 表单数据
				ruleForm: {},
			}
		},
		methods: {
			// 树状图点击事件
			handleNodeClick(data) {
				console.log(this.formList,data)
				data.ParentMenuName = this.ruleForm
				// this.$emit('handleNodeClick',data)
			},
			// 点击确定
			handleConfirmClick() {
				this.$emit('handleConfirmClick')
			},
		},
	}
</script>

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