<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="单表" name="single">
					<SearchSingle></SearchSingle>
				</el-tab-pane>
				<el-tab-pane label="一对一" name="association">
					<SearchAssociation></SearchAssociation>
				</el-tab-pane>
				<el-tab-pane label="一对多" name="collection">
					<SearchCollection></SearchCollection>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script setup>
	import SearchSingle from './SearchSingle.vue';
	import SearchAssociation from './SearchAssociation.vue';
	import SearchCollection from './SearchCollection.vue';
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	const activeName = ref('single')

	const handleClick = (tab, event) => {
		console.log(tab, event)
	}
</script>

<style>
</style>