<template>
  <v-card class="card-box pa-5">
    <div class="default-width">
      <div class="resume-header mb-5">
        <div class="resume-title">{{ inviteType ? $t('enterprise.userManagement.addBranchOffice') : $t('enterprise.userManagement.inviteNewColleagues') }}</div>
      </div>
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
        <v-tab v-for="val in tabList" :key="val.value" :value="val.value"> {{ val.label }}</v-tab>
      </v-tabs>
      <v-window v-model="tab" class="mt-3">
        <v-window-item :value="1">
          <linkPage :inviteType="inviteType" style="min-height: 500px;"></linkPage>
        </v-window-item>
        <v-window-item :value="2">
          <record :inviteType="inviteType" style="min-height: 500px;"></record>
        </v-window-item>
      </v-window>
    </div>
  </v-card>
</template>

<script setup>
import linkPage from './components/link.vue'
import record from './components/record.vue'
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import { useRouter } from 'vue-router'; const router = useRouter()
import { ref } from 'vue'
defineOptions({name: 'groupAccount-invite'})
const inviteType = ref(+router.currentRoute.value?.params?.type - 0 || 0) // 类型(0 邀请同事 | 1 邀请子公司)
const tabList = [
  { label: t('enterprise.userManagement.initiateInvitation'), value: 1 },
  { label: t('enterprise.userManagement.invitationRecord'), value: 2 },
]
const tab = ref(1)
// 切换
const handleChangeTab = () => {
  
}
</script>
<style lang="scss" scoped>
</style>
