import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tab, Tabs } from 'vant'
import { defineComponent, reactive, ref } from 'vue'
import Range from './component/range'
import SiginInRule from './component/sigin-in-rule'
import SiginOutRule from './component/sigin-out-rule'
import styles from './index.module.less'

export default defineComponent({
  name: 'attendance-rules',
  setup() {
    const forms = reactive({
      tabValue: 'range',
      heightV: 0 as number
    })
    const stickyRef = ref()
    const getHeight = (dataHeight: number) => {
      forms.heightV = dataHeight
      console.log(forms.heightV, '获取高度')
      document.documentElement.style.setProperty('--header-height', dataHeight + 'px')
    }
    return () => (
      <div class={styles.attendanceRules}>
        <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight} ref={stickyRef}>
          <OHeader border={false} />
        </OSticky>
        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          offsetTop={forms.heightV}
          swipeable
          animated
          v-model:active={forms.tabValue}
        >
          <Tab title="考勤范围" name="range">
            {forms.tabValue === 'range' && <Range />}
          </Tab>
          <Tab title="签到规则" name="signin-rule">
            {forms.tabValue === 'signin-rule' && <SiginInRule />}
          </Tab>
          <Tab title="签退规则" name="signout-rule">
            {forms.tabValue === 'signout-rule' && <SiginOutRule />}
          </Tab>
        </Tabs>
      </div>
    )
  }
})
