import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { useRect } from '@vant/use'

import { Tabs, Tab } from 'vant'
import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import AttendStudent from './components/attend-student'
import AttendTeacher from './components/attend-teacher'
const activeName = ref('student')
export default defineComponent({
  name: 'school-attendance',
  setup() {
    const router = useRouter()
    const state = reactive({
      heightV: 0 as number
    })
    const stickyRef = ref()

    const getHeight = (dataHeight: number) => {
      state.heightV = dataHeight
      console.log(state.heightV, '获取高度')
    }
    return () => (
      <>
        <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight} ref={stickyRef}>
          <OHeader></OHeader>
          <Tabs v-model:active={activeName.value}>
            <Tab name="student" title="学生考勤"></Tab>
            <Tab name="teacher" title="伴学指导考勤"></Tab>
          </Tabs>
        </OSticky>

        {activeName.value == 'student' ? (
          <AttendStudent toHeight={state.heightV}></AttendStudent>
        ) : (
          <AttendTeacher toHeight={state.heightV}></AttendTeacher>
        )}
      </>
    )
  }
})
