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'
import { state } from '@/state'
const activeName = ref('wait')
export const approvalManageStrips = reactive({
  agencty: 0,
  approval: 0
})
export default defineComponent({
  name: 'approval-manage',
  setup() {
    const router = useRouter()
    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
          titleActiveColor='var(--van-primary)'
        >
          {state.user?.data?.manageAdmin && (
            <Tab name="wait" title={`处理事项${approvalManageStrips.agencty ? " (" + approvalManageStrips.agencty +")" : ''}`}>
              <Agency />
            </Tab>
          )}
          <Tab name="end" title={`我的审批${approvalManageStrips.approval ? " (" + approvalManageStrips.approval +")" : ''}`}>
            <MyApproval />
          </Tab>
        </Tabs>
      </div>
    )
  }
})
