<!--
@description: 带步骤 Tab、主体内容和底部提交栏的购买/创建页面。
@source: king-design-rag-server/template/buy/Layout.vue
-->
<script setup lang="ts">
import { ref } from 'vue';
import { Button, Spin } from '@king-design/vue';
import { LayoutContent } from '@ksyun-internal/versatile';

const activeTab = ref('basic');
const submitting = ref(false);
const tabs = [
  { label: '基础配置', value: 'basic' },
  { label: '确认配置', value: 'confirm' },
];
const headerProps = {
  title: '创建云服务器',
  doc: {
    indexUrl: 'https://docs.ksyun.com',
    indexEnUrl: 'https://docs.ksyun.com',
  },
};
</script>

<template>
  <LayoutContent
    :header-props="headerProps"
    :tabs="tabs"
    :tabs-props="{}"
    v-model:tab="activeTab"
    newable
  >
    <main class="purchase-content">
      <div v-if="activeTab === 'basic'">配置区块</div>
      <div v-else>配置确认</div>
    </main>

    <template #footerLeft>
      <div class="footer-summary">
        <Button>配置明细</Button>
        <Spin v-if="submitting" size="small" />
      </div>
    </template>
    <template #footerRight>
      <Button type="warning" size="large" :disabled="submitting">
        立即购买
      </Button>
    </template>
  </LayoutContent>
</template>

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

.footer-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
