<template>
	<div>

		<el-tabs v-model="activeName" type="card" @tab-click="change">
			<el-tab-pane label="手动上传" name="Manual">
				<el-card :body-style="cardBodyStyle">
					<Attachment ref="AttachmentRefManual" :fId="fId"></Attachment>
				</el-card>
			</el-tab-pane>
			<el-tab-pane label="自动上传" name="Auto">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" @click="save">保存</el-button>表单保存后自动上传
					<Attachment ref="AttachmentRefAuto" :fId="fId"></Attachment>
				</el-card>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	onMounted(() => {
		fId.value = 'exp-manual'
			// AttachmentRefManual.value.getTableData()
	})
	const activeName = ref('Manual')

	import Attachment from '@/components/Attachment.vue';
	const fId = ref('exp-manual')


	const change = (tab, event) => {
		console.log(tab.props.name)
		if (tab.props.name == 'Manual') {
			fId.value = 'exp-manual'
			// AttachmentRefManual.value.getTableData()
		} else {
			fId.value = 'exp-auto'
			// AttachmentRefAuto.value.getTableData()
		}

	}

	//手动上传
	const AttachmentRefManual = ref(null)




	//自动上传
	const AttachmentRefAuto = ref(null)
	const save = () => {
		//setTimeout 模拟axios异步请求
		setTimeout(() => {
			fId.value = 'exp-auto'
			AttachmentRefAuto.value.upload()
		}, 1000)

	}
</script>

<style>
</style>
