<script setup>
// 使用示例：
//   <TTabView v-model="ctx.tabCode">
//       ...
//   </TTabView>
//
// 或者使用code：
// <TTabView code="选中的代号">
//    <TTabs>
// 	    <TTab code="代号1">表头1</TTab>
//      ...
//    </TTabs>
//    <TTabPanels>
// 	    <TTabPanel code="代号1">内容1</TTabPanel>
//       ...
//    </TTabPanels>
// </TTabView>

import Tabs from "primevue/tabs";
import {watch} from "vue";

const props = defineProps(["code", "modelValue"])
let realCode = props.modelValue
if (typeof realCode !== "string") {
		realCode = props.code
}

const emits = defineEmits(["change", "update:modelValue"])

const onChange = value => {
	emits("update:modelValue", value)
	emits("change", {value})
}

watch(() => props.modelValue, newCode => {
	realCode = newCode
})
</script>

<template>
	<Tabs @update:value="onChange" :value="realCode" scrollable>
		<slot></slot>
	</Tabs>
</template>

<style scoped>

</style>