<template>

	<SearchBox ref="SearchBoxRef" formName="top" :formData="query" @showPop="showPop" @reset="reset"></SearchBox>

	<ButtonBox @search="handleSearch" @add="handleAdd" @remove="handleRemoveBatch" @edit="handleEditBatch"
		@upload="handleUpload" @download="handleDownload" @import="handleImport" @export="handleExport"></ButtonBox>

		<TableBox ref="TableBoxRef" :tableData="data" @edit="handleEdit" @remove="handleRemove" page :url="urlPage"
		:param="param"></TableBox>

<!-- 	<TableBox ref="TableBoxRef"   @edit="handleEdit" @remove="handleRemove" :url="url" :param="param">
	</TableBox> -->

	<FormBox ref="FormBoxRef" formName="input" :formData="form" dialog @save="handleSave" @showUser="showPop"></FormBox>

	<PopupUser ref="PopupUserRef" @receiveFromChild="getUser"></PopupUser>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	import SearchBox from '@/components/SearchBox.vue'
	const SearchBoxRef = ref(null)
	const query = ref({
		name: '',
		birthDate: '',
		age: '',
		contractType: '',
		contractFlag: '',
		birthDate1: ['', ''],
		abc: '',
	})

	import ButtonBox from '@/components/ButtonBox.vue'
	const ButtonBoxRef = ref(null)

	const reset = () => {
		Object.keys(query.value).map(key => {
			query.value[key] = ''
		})
	}

	const handleSearch = () => {
		console.log(JSON.stringify(SearchBoxRef.value.form))
		console.log(JSON.stringify(query.value))
		param.value={params:JSON.stringify(query.value)} 
		console.log(JSON.stringify(param.value))
		TableBoxRef.value.search()
	}
 
	import TableBox from '@/components/TableBox.vue'
	const TableBoxRef = ref(null) 

	import FormBox from '@/components/FormBox.vue'
	const FormBoxRef = ref(null) 

	const handleAdd = () => {
		FormBoxRef.value.open()
	}
	const form = ref({
		birthDate: '',
		type: '',
		code: '',
		name: '',
		sex: '',
		contractType: '',
		contractFlag: '',
	})

	import PopupUser from '@/components/PopupUser.vue'
	const PopupUserRef = ref(null)
	const showPop = () => {
		PopupUserRef.value.open()
	}
	const getUser = (val) => {
		console.log(val.userDesc)
		query.value.name = val.userDesc
		form.value.name = val.userDesc
	}

	const urlPage = ref('exp/Search/structurePage')
	const url = ref('exp/Search/structure')
	const param = ref({})

	const handleEdit = (row) => {
		// console.log(JSON.stringify(row))
		form.value = row
		FormBoxRef.value.open()
	}
	const handleRemove = (row) => {
		console.log(JSON.stringify(row))
	}

	const handleEditBatch = () => {
		if (TableBoxRef.value.multipleSelection.length != 1) {
			ElMessage({
				type: 'warning',
				message: '请选择一条数据编辑!'
			})
			return
		}
		handleEdit(TableBoxRef.value.multipleSelection[0])
	}


	const handleSave = () => {
		console.log(JSON.stringify(FormBoxRef.value.form))
		FormBoxRef.value.close()
	}
</script>

<style>
</style>