<template>
	<div class="app-container">
		<el-tabs v-model="activeName" class="res-el-tab" @tab-click="handleClick">
			<el-tab-pane label="竞彩足球" name="soccer"><soccer /></el-tab-pane>
			<el-tab-pane label="竞彩篮球" name="basketball"><basketball /></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup name="VideoScript">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import soccer from './components/soccer.vue'
import basketball from './components/basketball.vue'


const route = useRoute()
const router = useRouter()

// 从URL参数获取activeName，如果没有则默认为'soccer'
const activeName = ref(route.query.tab || 'soccer')

// 监听activeName变化，更新URL参数
watch(activeName, (newVal) => {
	router.replace({
		query: {
			...route.query,
			tab: newVal
		}
	})
})

const handleClick = (tab, event) => {
	console.log('点击标签页:', tab.props.name)
}

</script>
