<template>
  <div>
    <Breadcrumb />
    <TabFilter v-model="activeTab" :options="options" style="margin-bottom: 20px;" @change="handleTabChange">
      <template #actions>
        <el-button :icon="ArrowLeft" type="primary" class="is-gradient" @click="goBack">返回</el-button>
      </template>
    </TabFilter>
    <component :is="currentComponent" />
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import ForwardRules from './components/ForwardRules.vue'
import SDKDetail from './components/SDKDetail.vue'
import ConnectionList from './components/ConnectionList.vue'
import UsageAnalysis from './components/UsageAnalysis.vue'
import MultiOpenRestriction from './components/MultiOpenRestriction.vue'
import RiskIpSegments from './components/RiskIpSegments.vue'
import BlockedIpSegments from './components/BlockedIpSegments.vue'
import GenerateSdk from './components/GenerateSdk.vue'

const componentMap = {
  sdkDetail: SDKDetail,
  forwardRules: ForwardRules,
  connectionList: ConnectionList,
  usageAnalysis: UsageAnalysis,
  multiOpenRestriction: MultiOpenRestriction,
  riskIpSegments: RiskIpSegments,
  blockedIpSegments: BlockedIpSegments,
  generateSdk: GenerateSdk,
}

type TabKey = keyof typeof componentMap

const router = useRouter()
const activeTab = ref<TabKey>('sdkDetail')

const options: Array<{ label: string; value: TabKey }> = [
  { label: 'SDK详情', value: 'sdkDetail' },
  { label: '转发规则', value: 'forwardRules' },
  { label: '连接清单', value: 'connectionList' },
  { label: '用量分析', value: 'usageAnalysis' },
  { label: '限制多开', value: 'multiOpenRestriction' },
  { label: '风险IP段', value: 'riskIpSegments' },
  { label: '封禁IP段', value: 'blockedIpSegments' },
  { label: '生成SDK', value: 'generateSdk' },
]

const currentComponent = computed(() => componentMap[activeTab.value] ?? SDKDetail)

function handleTabChange(_value: TabKey) { }

function goBack() {
  router.back()
}
</script>

<style lang="scss" scoped></style>
