<template>
  <div class="mx-auto max-w-screen-xl px-4 py-12">
    <a-typography-title :level="1" class="!mb-2">业务流程（开通链路）</a-typography-title>
    <a-typography-paragraph class="!text-gray-600 !mb-8">
      面向“产品售卖 + 自动交付”的业务模型：客户选择产品并支付后，平台自动创建租户、初始化模块与数据并完成交付上线。
    </a-typography-paragraph>

    <a-row :gutter="[24, 24]">
      <a-col :xs="24" :lg="12">
        <a-card title="对外流程（客户视角）">
          <a-steps direction="vertical" :current="-1">
            <a-step title="选择产品/套餐" description="选择产品矩阵中的产品与套餐，按需加购模板/插件" />
            <a-step title="支付下单" description="支付成功后触发开通编排任务" />
            <a-step title="收到交付入口" description="获取管理员账号、访问地址与基础指引" />
            <a-step title="开始配置与运营" description="基于模板与默认配置快速上线，按需启用插件" />
          </a-steps>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card title="平台内部自动化（系统视角）">
          <a-timeline>
            <a-timeline-item>订单校验：产品/套餐/加购项与授权生成</a-timeline-item>
            <a-timeline-item>创建租户：租户信息、域名/应用信息、管理员生成</a-timeline-item>
            <a-timeline-item>模块装配：按所购产品组合模块并初始化菜单/权限</a-timeline-item>
            <a-timeline-item>数据初始化：基础字典、默认配置、可选演示数据</a-timeline-item>
            <a-timeline-item>交付通知：发送入口、账号、初始化结果与下一步指引</a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>
    </a-row>

    <a-card class="mt-10" title="常见问题">
      <a-collapse>
        <a-collapse-panel key="1" header="如何支持私有化部署？">
          <div class="text-gray-600">
            私有化交付可提供部署包/镜像、部署文档、初始化脚本与验收清单；按客户环境对接域名、存储、日志与监控体系。
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="模板/插件购买后如何生效？">
          <div class="text-gray-600">
            支付成功后生成授权，并在租户侧自动装配：模板应用到站点与配置；插件完成安装/启用与默认配置写入。
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="初始化哪些数据？">
          <div class="text-gray-600">
            可按产品套餐选择：基础字典、默认配置、菜单与权限、可选演示数据/示例内容；便于“开通即验收”。
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-card>

    <div class="mt-10">
      <a-space>
        <a-button @click="navigateTo('/products')">选择产品</a-button>
        <a-button type="primary" @click="navigateTo('/contact')">咨询开通与交付</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '开通流程 - 选品支付 / 创建租户 / 初始化模块与数据',
  description:
    '客户选择产品并支付后，平台自动创建租户、装配模块、初始化菜单权限与基础数据，并完成交付上线；支持 SaaS 与私有化交付。',
  path: '/flow'
})
</script>

