import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { state } from '@/state'
import { Sticky, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import Practice from './component/practice'
import Standard from './component/standard'
import { resestState } from './create'
import styles from './index.module.less'

export default defineComponent({
  name: 'train-planning',
  setup() {
    const trainType = sessionStorage.getItem('trainType')
    const tabValue = ref(trainType || 'standard')
    const address = ref('')
    // sessionStorage.removeItem('trainType')

    const getSchoolDetail = async () => {
      try {
        const { data } = await request.get(`/api-school/school/detail/${state.user.data.school.id}`)
        address.value = data.address || ''
      } catch {
        //
      }
    }

    const heightV = ref(0)

    onMounted(() => {
      getSchoolDetail()
    })
    return () => (
      <div class={styles.train}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            heightV.value = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader />
        </OSticky>
        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          swipeable
          animated
          offsetTop={heightV.value}
          v-model:active={tabValue.value}
          onChange={(val: any) => {
            // 切换时间重置表单数据
            resestState()
            sessionStorage.setItem('trainType', val)
          }}
        >
          <Tab title="标准训练" name="standard">
            {/* <Standard address={address.value} /> */}
            {tabValue.value === 'standard' && <Standard address={address.value} />}
          </Tab>
          <Tab title="自定义训练" name="practice">
            {/* <Practice address={address.value} /> */}
            {tabValue.value === 'practice' && <Practice address={address.value} />}
          </Tab>
        </Tabs>

        {/* {tabValue.value === 'standard' && <Standard address={address.value} />}
        {tabValue.value === 'practice' && <Practice address={address.value} />} */}
      </div>
    )
  }
})