import { Tab, Tabs } from 'vant'
import { defineComponent, reactive } 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'
    })
    return () => (
      <div class={styles.attendanceRules}>
        <Tabs
          sticky
          lineWidth={20}
          lineHeight={4}
          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>
    )
  }
})