import { Tab, Tabs } from 'vant'
import { defineComponent, reactive } from 'vue'
import Range from './component/range'
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">
            <Range />
          </Tab>
          <Tab title="签到规则" name="signin-rule">
            1212
          </Tab>
          <Tab title="签退规则" name="signout-rule">
            签退规则
          </Tab>
        </Tabs>
      </div>
    )
  }
})