<template>
  <div class="art-page-view">
    <ElTabs v-model="activeTab" class="quota-tabs">
      <ElTabPane :label="$t('quotaPackage.tabs.packages')" name="packages">
        <QuotaPackageListPanel />
      </ElTabPane>
      <ElTabPane :label="$t('quotaPackage.tabs.purchases')" name="purchases">
        <TenantQuotaPurchaseList />
      </ElTabPane>
      <ElTabPane :label="$t('quotaPackage.tabs.dashboard')" name="dashboard">
        <TenantQuotaUsageDashboard />
      </ElTabPane>
      <ElTabPane :label="$t('quotaPackage.tabs.alertConfig')" name="alertConfig">
        <QuotaAlertConfigPanel />
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { ElTabPane, ElTabs } from 'element-plus'
  import QuotaPackageListPanel from './components/QuotaPackageListPanel.vue'
  import TenantQuotaPurchaseList from './components/TenantQuotaPurchaseList.vue'
  import TenantQuotaUsageDashboard from './components/TenantQuotaUsageDashboard.vue'
  import QuotaAlertConfigPanel from './components/QuotaAlertConfigPanel.vue'

  defineOptions({ name: 'QuotaPackageIndex' })

  // 1. 标签页状态
  const activeTab = ref<'packages' | 'purchases' | 'dashboard' | 'alertConfig'>('packages')
</script>

<style scoped>
  .quota-tabs :deep(.el-tabs__header) {
    margin-bottom: 16px;
  }
</style>
