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'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'show-page',
  setup() {
    const route = useRoute()
    console.log(route.query, 'query')
    const index = route.query.index ? Number(route.query.index) : 1
    const forms = reactive({
      tabIndex: index || 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 />}
      </>
    )
  }
})
