import { defineComponent, reactive } from 'vue'
import ActiveShow from './compontent-show/active-show'
import VideoShow from './compontent-show/video-show'
import RegisterShow from './compontent-show/register-show'

export default defineComponent({
  name: 'show-page',
  setup() {
    const forms = reactive({
      tabIndex: 1
    })
    return () => (
      <>
        {forms.tabIndex === 1 && (
          <ActiveShow
            onTabChange={(index: number) => {
              forms.tabIndex = index
            }}
          />
        )}
        {forms.tabIndex === 2 && (
          <VideoShow
            onTabChange={(index: number) => {
              forms.tabIndex = index
            }}
          />
        )}
        {forms.tabIndex === 3 && <RegisterShow />}
      </>
    )
  }
})
