<!--
@description: 未安装 Versatile 时，使用 KPC 原生组件组合带 Tab 的详情页。
-->
<script setup lang="ts">
import { ref } from 'vue';
import {
  Body,
  Button,
  Header,
  Icon,
  Layout,
  Tab,
  Tabs,
} from '@king-design/vue';

const activeTab = ref('basic');

function goBack(): void {
  history.back();
}

function openDocumentation(): void {
  window.open(
    'https://docs.ksyun.com',
    '_blank',
    'noopener,noreferrer',
  );
}
</script>

<template>
  <Layout class="detail-page">
    <Header class="detail-header" theme="light" :height="64">
      <div class="header-inner">
        <div class="header-main">
          <Button
            class="back-button"
            type="none"
            icon
            aria-label="返回"
            @click="goBack"
          >
            <Icon class="k-icon-left" />
          </Button>
          <span class="page-title">资源详情</span>
        </div>
        <Button
          class="doc-button"
          type="link"
          @click="openDocumentation"
        >
          <Icon class="k-icon-paper" />
          <span>相关文档</span>
        </Button>
      </div>
    </Header>

    <div class="tabs-bar">
      <Tabs v-model="activeTab">
        <Tab value="basic">基本信息</Tab>
        <Tab value="nodes">节点列表</Tab>
      </Tabs>
    </div>

    <Body class="detail-body">
      <section class="detail-content">
        <div v-if="activeTab === 'basic'">基本信息内容</div>
        <div v-else-if="activeTab === 'nodes'">节点列表内容</div>
      </section>
    </Body>
  </Layout>
</template>

<style scoped>
.detail-page {
  min-height: 100vh;
  background: #fff;
}

.detail-header {
  box-sizing: border-box;
  padding: 0 24px;
}

.header-inner,
.header-main {
  display: flex;
  align-items: center;
}

.header-inner {
  width: 100%;
  justify-content: space-between;
}

.back-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: 8px;
  padding: 0 !important;
}

.page-title {
  color: #151b1e;
  font-size: 14px;
  font-weight: 500;
}

.doc-button {
  padding: 0 !important;
  line-height: 1;
}

.tabs-bar {
  padding: 0 24px;
}

.detail-body {
  padding: 0 24px;
  background: #fff;
}

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