<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :inline="true">
				<el-form-item label="类型" style="margin-bottom: 5px;" prop="type">
					<el-input v-model="query.type" placeholder="请输入类型" clearable></el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<ButtonBar @search="handleSearch" @add="handleAdd" @remove="handleRemoveBatch" @edit="handleEditBatch"
			@upload="handleUpload" @download="handleDownload" @import="handleImport" @export="handleExport"></ButtonBar>
		<el-card :body-style="cardBodyStyle">
			<el-tabs v-model="activeNameTop" type="border-card">
				<el-tab-pane label="主表" name="master">
					<el-table :data="tableDataMaster" border highlight-current-row @row-click="rowClick"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" fixed></el-table-column>
						<el-table-column type="index" label="序号" align="center" width="60">
							<template #default="scope">
								<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="masterName" label="masterName" width="120" header-align="center"
							align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column label="操作" header-align="center" align="center" width="200px">
							<template #default="scope">
								<el-button plain type="warning" @click="handleEditMaster(scope.row)">编辑</el-button>
								<el-button plain type="danger" @click="handleDeleteMaster(scope.row )">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes"
						:total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
						@size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>
		</el-card>

		<el-tabs v-model="activeNameBottom" type="border-card" @tab-click="handleClickTabs">
			<el-tab-pane label="第一从表" name="first">
				<el-table :data="tableDataSalveFirst" border highlight-current-row>
					<el-table-column type="index" label="序号" align="center" width="60">
						<template #default="scope">
							<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="secondName" label="secondName" width="120" header-align="center"
						align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" header-align="center" align="center" width="200px">
						<template #default="scope">
							<el-button plain type="warning" @click="handleEditSlave(scope.row)">编辑</el-button>
							<el-button plain type="danger" @click="handleDeleteSlave(scope.row )">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="第二从表" name="second">
				<el-table :data="tableDataSalveSecond" border highlight-current-row>
					<el-table-column type="index" label="序号" align="center" width="60">
						<template #default="scope">
							<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="thirdName" label="thirdName" width="120" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" header-align="center" align="center" width="200px">
						<template #default="scope">
							<el-button plain type="warning" @click="handleEditSlave(scope.row)">编辑</el-button>
							<el-button plain type="danger" @click="handleDeleteSlave(scope.row )">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>


	</div>

</template>


<script setup>
	import ButtonBar from '@/components/ButtonBar.vue'
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	onMounted(() => {
		handleSearch()
	})


	const query = ref({
		type: ''
	})
	const activeNameTop = ref('master')
	const activeNameBottom = ref('first')
	const tableDataMaster = ref([])
	const handleSearch = () => {
		tableDataMaster.value = [{
				masterName: '1'
			},
			{
				masterName: '2'
			}
		]
		tableDataMaster.totalRows = 5
	}




	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableDataPage()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableDataPage()
	}
	/**
	 * 分页
	 */


	const tableDataSalveFirst = ref([])
	const tableDataSalveSecond = ref([])
	const rowClick = () => {
		tableDataSalveFirst.value = [{
				secondName: '1-1'
			},
			{
				secondName: '1-2'
			}
		]
	}


	const handleClickTabs = (tab, event, item) => {
		if (tab.props.name == 'frist') {
			tableDataSalveFirst.value = [{
					secondName: '1-1'
				},
				{
					secondName: '1-2'
				}
			]
		} else {
			tableDataSalveSecond.value = [{
					thirdName: '2-1'
				},
				{
					thirdName: '2-2'
				}
			]
		}
	}
</script>

<style>
</style>