<template>
  <div class="space-y-4">
    <a-page-header title="管理中心" sub-title="产品开通、使用与续费" :ghost="false" class="page-header">
      <template #extra>
        <a-segmented
          :value="active"
          :options="[
            { label: '已开通', value: 'index' },
            { label: '未开通', value: 'unopened' }
          ]"
          @update:value="onSwitch"
        />
      </template>
    </a-page-header>

    <a-card :bordered="false" class="card">
      <a-empty description="待接入：未开通产品列表" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ layout: 'console' })

const route = useRoute()
const active = computed(() => (route.path.includes('/console/tenant/unopened') ? 'unopened' : ''))
function onSwitch(value: string | number) {
  navigateTo(`/console/tenant/${String(value)}`)
}
</script>

<style scoped>
.page-header {
  border-radius: 12px;
}

.card {
  border-radius: 12px;
}
</style>
