import { Tabs, Tab } from 'vant'
import { defineComponent, reactive, ref } from 'vue'
import styles from './index.module.less'
import { useRouter } from 'vue-router'
import MyApproval from './MyApproval'
import Agency from './agency'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'
const activeName = ref('wait')
export default defineComponent({
  name: 'approval-manage',
  setup() {
    const router = useRouter()
    const state = reactive({})
    const headerHeight = ref(0)
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            headerHeight.value = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader />
        </OSticky>
        <Tabs
          v-model:active={activeName.value}
          class={styles.approvalTab}
          animated
          sticky
          offsetTop={headerHeight.value}
          swipeable
        >
          <Tab name="wait" title="处理事项">
            <Agency />
          </Tab>
          <Tab name="end" title="我的审批">
            <MyApproval />
          </Tab>
        </Tabs>
      </div>
    )
  }
})