<!--
@description: 带返回、标题、文档链接和 Tab 的标准详情页。
-->
<script setup lang="ts">
import { ref } from 'vue';
import { LayoutContent } from '@ksyun-internal/versatile';

const activeTab = ref('basic');
const tabs = [
  { label: '基本信息', value: 'basic' },
  { label: '节点列表', value: 'nodes' },
];
const headerProps = {
  title: '资源详情',
  doc: {
    indexUrl: 'https://docs.ksyun.com',
    indexEnUrl: 'https://docs.ksyun.com',
  },
  back() {
    history.back();
  },
};
</script>

<template>
  <LayoutContent
    :header-props="headerProps"
    :tabs="tabs"
    :tabs-props="{}"
    v-model:tab="activeTab"
  >
    <section class="detail-content">
      <div v-if="activeTab === 'basic'">基本信息内容</div>
      <div v-else-if="activeTab === 'nodes'">节点列表内容</div>
    </section>
  </LayoutContent>
</template>

<style scoped>
.detail-content {
  padding: 16px;
}
</style>
