import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Sticky, Tab, Tabs } from 'vant'
import { defineComponent, ref } from 'vue'
import Information from './compontent/information'
import Photo from './compontent/photo'
import Plan from './compontent/plan'
import styles from './orchestra-detail.module.less'

export default defineComponent({
  name: 'orchestra-detail',
  setup() {
    const tabs = sessionStorage.getItem('orchestra-detail-tab')
    console.log(tabs, 'tabs')
    const tabValue = ref(tabs || 'information')
    sessionStorage.removeItem('orchestra-detail-tab')
    return () => (
      <div class={styles.orchestraDetail}>
        <OSticky position="top">
          <OHeader />
          <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={tabValue.value}>
            <Tab title="乐团信息" name="information"></Tab>
            <Tab title="训练进度" name="plan"></Tab>
            <Tab title="训练照片" name="photo"></Tab>
            {/* <Tab title="乐团资讯" name="info"></Tab> */}
          </Tabs>
        </OSticky>

        {tabValue.value === 'information' && <Information />}
        {tabValue.value === 'plan' && <Plan />}
        {tabValue.value === 'photo' && <Photo />}
      </div>
    )
  }
})