<!--
* @name: 组织机构选择
* @author:zhangpengcheng
* @CreateTime:2022-10-26
-->
<template>
	<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" @handleConfirmClick="handleConfirmClick"
		@handleClose="handleClose" :dialogVisible="dialogVisible" class="userDialog" title="选择机构部门" :width="width"
		:top="top" :footerShow="true" @close='close'>
		<div class="organizationBody">
			<base-layout title="组织机构" class="box" style="overflow: auto;" :operateButtonSwitch="false"
				:mainColor="mainColor" :mainHight='mainHight' :bodyHight="treeHight">
				<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="选中机构" class="box" :operateButtonSwitch="false" :mainHight="mainHight"
				:bodyHight="treeHight">
				<div slot="main" style="padding: 10px;">
					<div flex="cross:center" style="margin-bottom: 10px;">
						<label style="width: 35%;">机构编码</label>
						<el-input style="flex:1;" v-model="organizationForm.code" disabled></el-input>
					</div>
					<div flex="cross:center">
						<label style="width: 35%;">机构名称</label>
						<el-input style="flex:1" v-model="organizationForm.label" disabled></el-input>
					</div>
				</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"
export default {
	components: {
		baseLayout,
		baseTree,
		baseDialog,
	},
	props: {
		width: {
			type: String,
			default: '700px'
		},
		top: {
			type: String,
			default: '10vh'
		},
		mainColor: {
			type: String,
			default: '#ffffff'
		},
		mainHight: {
			type: String,
			default: 'calc(100% - 38px)'
		},
		treeHight: {
			type: String,
			default: '350px'
		},
		menuData: {
			type: Array,
			default: () => {
				return []
			}
		},
	},
	data() {
		return {
			organizationForm: {},
			dialogVisible: false,
		}
	},
	methods: {
		close() {
			this.qingkong()
		},
		qingkong() {
			this.$refs.baseTree.$refs.elTree.setCurrentKey(null);
		},
		// 点击确定
		handleConfirmClick() {
			if (JSON.stringify(this.organizationForm) == "{}") {
				this.$vmNews('请选择组织机构！')
				return
			} else {
				this.$emit('handleConfirmClick', this.organizationForm)
				this.clearFrom()
			}
		},
		handleClose() {
			this.dialogVisible = false
			this.clearFrom()
		},
		// 菜单树选中
		handleNodeClick(data) {
			this.organizationForm = data
		},
		// 清空form
		clearFrom() {
			this.assignmentForm({})
		},
		// form赋值
		assignmentForm(value) {
			this.organizationForm = Object.assign({}, value)
		},
	}
}
</script>

<style scoped lang="scss">
.organizationBody {
	display: flex;
	justify-content: space-evenly;
	background-color: #f2f3f4;
	padding: 10px;

	.box {
		width: 45%;
		border-radius: 5px;
	}
}
</style>