<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="120px" label-position="right">
				<div style="padding: 10px;">
					<el-form-item label="通用" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handle">通用</el-button>
						<el-input v-model="contract.contractType" style="width: 200px;"></el-input>
					</el-form-item>
				</div>

				<div style="padding: 10px;">
					<el-form-item label="用户选择" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handleUser">用户</el-button>
						<el-input v-model="user.userDesc" style="width: 200px;"></el-input>
					</el-form-item>
				</div>
				<div style="padding: 10px;">
					<el-form-item label="部门选择" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handleDepartment">部门</el-button>
						<el-input v-model="department.deptName" style="width: 200px;"></el-input> 
					</el-form-item>
				</div>
				<div style="padding: 10px;">
					<el-form-item label="部门用户选择" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handleDepartmentUser">部门用户</el-button>
						<el-input v-model="duDepartment.deptName" style="width: 200px;"></el-input>
						<el-input v-model="duUser.userDesc" style="width: 200px;"></el-input>
					</el-form-item>
				</div>
				<div style="padding: 10px;">
					<el-form-item label="菜单选择" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handleMenu">菜单选择</el-button>
						<el-input v-model="menu.menuName" style="width: 200px;"></el-input>
					</el-form-item>
				</div>
				<div style="padding: 10px;">
					<el-form-item label="岗位选择" style="margin-bottom: 0px;">
						<el-button type="primary" @click="handlePost">岗位选择</el-button>
						<el-input v-model="post.postName" style="width: 200px;"></el-input>
					</el-form-item>
				</div>
				<div style="padding: 10px;">
					<el-form-item label=" " style="margin-bottom: 0px;">

					</el-form-item>
				</div>
			</el-form>
		</el-card>

		<PopupUser ref="PopupUserRef" @receiveFromChild="getUser"></PopupUser>
		<PopupDepartmentUser ref="PopupDepartmentUserRef" @receiveFromChild="getDepartmentUser"></PopupDepartmentUser>
		<Popup ref="PopupRef" :column="column" :tableData="data" @receiveFromChild="getContract"> </Popup>
		<PopupMenuTree ref="PopupMenuTreeRef" @receiveFromChild="getMenu"> </PopupMenuTree>
		<PopupDepartmentTree ref="PopupDepartmentTreeRef" @receiveFromChild="getDepartment"> </PopupDepartmentTree>
		<PopupPost ref="PopupPostRef" @receiveFromChild="getPost"> </PopupPost>
	</div>

</template>

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

	const {
		proxy
	} = getCurrentInstance()

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



	import Popup from '@/components/Popup.vue'
	const PopupRef = ref(null)
	const contract = ref({})
	const handle = () => {
		PopupRef.value.open()
	}
	const getContract = (val) => {
		contract.value = val
	}
	const column = ref([{
			prop: 'name',
			label: '姓名',
		},
		{
			prop: 'birthDate',
			label: '生日'
		},
		{
			prop: 'age',
			label: '年龄',
		},
		{
			prop: 'type',
			label: '类型',
		},
		{
			prop: 'contractType',
			label: '合同类型',
		}, {
			prop: 'contractFlag',
			label: '合同标记',
		},
		{
			prop: 'sex',
			label: '性别',
		}, {
			prop: 'birthDate1',
			label: '生日12'
		},
		{
			prop: 'addTime',
			label: '添加时间'
		},
	])
	const data = ref([{
			name: '张三',
			birthDate: '2021-05-05',
			age: '12',
			type: '职工',
			contractType: '销售合同',
			contractFlag: '是',
			sex: '男',
			addTime: '2023-05-06 12:00:00'
		},
		{
			name: '李四',
			birthDate: '2011-05-05',
			age: '12',
			type: '职工',
			contractType: '采购合同',
			contractFlag: '是',
			sex: '男',
			addTime: '2023-05-06 12:00:00',
		}
	])



	import PopupUser from '@/components/PopupUser.vue'
	const PopupUserRef = ref(null)
	const user = ref({})
	const handleUser = () => {
		PopupUserRef.value.open()
	}
	const getUser = (val) => {
		user.value = val
	}


	import PopupDepartmentUser from '@/components/PopupDepartmentUser.vue'
	const PopupDepartmentUserRef = ref(null)
	const duDepartment = ref({})
	const duUser = ref({})
	const handleDepartmentUser = () => {
		PopupDepartmentUserRef.value.open()
	}
	const getDepartmentUser = (row) => {
		duDepartment.value = row.dept
		duUser.value = row.user
	}



	import PopupMenuTree from '@/components/PopupMenuTree.vue'
	const PopupMenuTreeRef = ref(null)
	const menu = ref({})
	const handleMenu = () => {
		PopupMenuTreeRef.value.open()
	}
	const getMenu = (row) => {
		menu.value = row
	}
	
	
	import PopupDepartmentTree from '@/components/PopupDepartmentTree.vue'
	const PopupDepartmentTreeRef = ref(null)
	const department = ref({})
	const handleDepartment = () => {
		PopupDepartmentTreeRef.value.open()
	}
	const getDepartment = (dept,tree ) => {
		department.value = dept
		console.log(tree)
	}
	
	
	
	import PopupPost from '@/components/PopupPost.vue'
	const PopupPostRef = ref(null)
	const post = ref({})
	const handlePost= () => {
		PopupPostRef.value.open()
	}
	const getPost= (data ) => {
		post.value = data 
	}
</script>

<style>
</style>