<template>
  <div class="help-content">
    <div class="content-header">
      <h2>平台对接概述与集成逻辑</h2>
    </div>
    
    <p class="intro">
      本节帮助开发者快速梳理统一认证平台与业务系统的对接流程，包括应用创建、用户同步策略以及账号映射规则。
    </p>

    <div class="section">
      <h3>1. 核心对接流程</h3>
      <ol>
        <li><strong>创建应用：</strong> 首先需要在本平台创建一个应用，获取 App ID 和 Secret。</li>
        <li><strong>用户同步（初始化）：</strong> 
          <ul>
            <li>将现有业务系统的用户数据同步到本平台（映射表），可以省去后续逐个初始化的烦恼。</li>
            <li>建议在系统上线前进行一次全量同步。</li>
          </ul>
        </li>
        <li><strong>统一认证登录与账号自动创建：</strong>
          <ul>
            <li>当用户通过统一认证平台登录您的业务系统时，如果您的系统中尚无该用户信息（例如新注册用户）：
              <p>您可以直接在业务系统中创建一个无权限的初始账号，完成“自动注册”。</p>
            </li>
            <li><strong>场景示例：</strong> 用户在统一认证平台已有账号（或通过短信注册），但在您的业务平台数据库中不存在（即该平台还没有这个手机号码或映射账号数据）。
              <ul>
                 <li>此时，您可以通过接口获取用户信息。</li>
                 <li>开发者可以先创建该用户（相当于同步到您的平台来）。</li>
              </ul>
            </li>
          </ul>
        </li>
      </ol>
    </div>

    <div class="section">
      <h3>2. 账号同步与映射规则</h3>
      <p>在使用账号同步功能时，请注意以下关键规则：</p>
      <ul>
        <li><strong>手机号码（唯一标识）：</strong> 用户的手机号码是统一认证平台的核心标识，<strong>同步后不能修改</strong>。</li>
        <li><strong>可修改字段：</strong> 您只能修改用户的 <strong>映射账号</strong> (Mapped Account/ID) 和 <strong>邮箱</strong>。这允许您在业务系统账号变更时更新映射关系。</li>
      </ul>

      <div class="feature-card" style="margin-top: 20px;">
        <h4>📌 同步接口使用场景</h4>
        <p>普通对接的平台可以在自己平台的账号管理模块中使用同步接口，实现用户信息的实时同步：</p>
        <ul>
          <li><strong>新增用户：</strong> 当您的平台新增用户时，可以调用同步接口（<code>sync_action: UPSERT</code>）同步映射信息。此时支持传输手机号码、姓名等用户基本信息。</li>
          <li><strong>修改用户：</strong> 当您的平台修改用户信息时，可以调用同步接口（<code>sync_action: UPSERT</code>）更新映射信息。注意：修改操作<strong>只支持更新映射信息</strong>（<code>mapped_key</code>、<code>mapped_email</code>、<code>is_active</code>），不支持修改手机号码、姓名等用户基本信息。</li>
          <li><strong>删除用户：</strong> 当您的平台删除用户时，可以调用同步接口（<code>sync_action: DELETE</code>）删除映射关系。删除操作<strong>只删除映射关系</strong>，不会删除统一认证平台上的用户账号。</li>
        </ul>
        <p class="note" style="margin-top: 10px;">
          <strong>重要提示：</strong> 同步接口只有在新增用户（用户不存在时）时才支持传输手机号码、姓名等用户信息；修改和删除操作仅支持映射信息的更新或删除。
        </p>
      </div>
    </div>

    <div class="section">
      <h3>3. 用户管理数据说明</h3>
      <ul>
        <li><strong>姓名与英文名：</strong> 在"用户管理"中维护的姓名和英文名称字段，<strong>不与特定应用的账号映射强行关联</strong>。</li>
        <li><strong>设计目的：</strong> 这部分是为了方便平台数据初始化和展示，方便管理员识别用户身份，而不作为业务系统的强校验字段。</li>
      </ul>

      <div class="feature-card" style="margin-top: 20px;">
        <h4>⚠️ 用户信息修改权限说明</h4>
        <p><strong>用户数据管理接口（能够修改用户基本信息的接口）只能由人力资源类平台进行对接，用于修改用户信息。</strong></p>
        <p>普通业务平台只能通过账号同步接口同步映射关系，无法修改用户的手机号码、姓名等基本信息。只有人力资源类平台（如 HR 系统、人事管理系统等）才被授权使用用户数据管理接口，以便在组织架构调整、人员信息变更时同步更新统一认证平台上的用户基本信息。</p>
      </div>
    </div>

    <div class="section">
      <h3>4. 快速对接统一登录平台</h3>
      <p>这是最简单的集成方式，只需实现一个回调接口并配置用户映射信息，被配置的用户即可在快捷导航中看到该应用。</p>

      <h4>4.1 准备工作</h4>
      <ol>
        <li>在 UAP 管理后台创建应用，获取 <code>App ID</code> 和 <code>App Secret</code></li>
        <li><strong>关键配置：</strong> 在应用配置中填写合法的 <strong>回调地址 (Redirect URIs)</strong>，例如：<code>http://your-app.com/callback</code></li>
      </ol>

      <h4>4.2 实现回调接口</h4>
      <p>用户登录成功后，统一认证平台会将用户重定向到您配置的回调地址，URL 格式如下：</p>
      <div class="code-block">
        <pre>http://your-app.com/callback?ticket=TICKET-xxxxx</pre>
      </div>

      <p>您的后端需要接收 <code>ticket</code> 参数，并调用 UAP 的验证接口换取用户信息。具体实现方式请参考：</p>
      <p>
        <a href="#" @click.prevent="switchToFastIntegration" class="help-link">
          <el-icon style="margin-right: 5px;"><Link /></el-icon>
          快速对接指南 (Redirect SSO)
        </a>
      </p>

      <div class="feature-card">
        <h4>📋 验证接口说明</h4>
        <ul>
          <li><strong>接口地址：</strong> <code>POST /api/v1/simple/validate</code></li>
          <li><strong>请求参数：</strong>
            <ul>
              <li><code>app_id</code> (string, 必填): 您的应用 ID</li>
              <li><code>ticket</code> (string, 必填): 接收到的票据</li>
              <li><code>timestamp</code> (int, 必填): 当前时间戳（秒）</li>
              <li><code>sign</code> (string, 必填): 签名（使用 App Secret 计算）</li>
            </ul>
          </li>
          <li><strong>签名算法：</strong> HMAC-SHA256，详细说明请查看 <a href="#" @click.prevent="switchToFastIntegration" class="help-link">快速对接指南</a></li>
        </ul>
      </div>

      <h4>4.3 配置用户映射信息</h4>
      <p>为了让用户在快捷导航中看到您的应用，需要为该用户配置映射关系。有两种方式：</p>

      <div class="feature-card">
        <h4>方式一：通过账号同步接口（推荐）</h4>
        <p>使用 M2M 账号同步接口批量配置用户映射关系，详见 <a href="#" @click.prevent="switchToAccountSync" class="help-link">账号同步 (M2M) 使用说明</a>。</p>
        <p><strong>接口地址：</strong> <code>POST /api/v1/apps/mapping/sync</code></p>
      </div>

      <div class="feature-card">
        <h4>方式二：通过管理后台手动配置</h4>
        <ol>
          <li>登录 UAP 管理后台，进入「应用管理」</li>
          <li>选择您的应用，进入「账号映射」页面</li>
          <li>点击「创建映射」，填写用户手机号和映射信息（<code>mapped_key</code>、<code>mapped_email</code>）</li>
          <li>保存后，该用户即可在快捷导航中看到该应用</li>
        </ol>
      </div>

      <h4>4.4 快捷导航显示规则</h4>
      <ul>
        <li>用户登录统一认证平台后，在「快捷导航」页面可以看到所有已配置映射关系的应用</li>
        <li>只有 <code>is_active = true</code> 的映射关系才会显示</li>
        <li>点击应用图标后，系统会自动跳转到统一登录页面，完成 SSO 登录</li>
      </ul>

      <el-alert title="提示" type="info" :closable="false" show-icon style="margin-top: 20px;">
        <div>
          <strong>完整对接流程：</strong>
          <ol style="margin-top: 10px; padding-left: 20px;">
            <li>创建应用并配置回调地址</li>
            <li>实现回调接口，验证 ticket 并获取用户信息（详见 <a href="#" @click.prevent="switchToFastIntegration" class="help-link">快速对接指南</a>）</li>
            <li>配置用户映射关系（通过同步接口或管理后台）</li>
            <li>用户在快捷导航中点击应用，完成 SSO 登录</li>
          </ol>
        </div>
      </el-alert>
    </div>

    <div class="section">
      <h3>5. 登录页面选择</h3>
      <p>对接统一登录平台时，您可以选择以下两种方式之一：</p>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>方式一：使用统一登录平台的登录页面（推荐）</h4>
        <p>直接使用统一登录平台提供的标准登录页面，用户访问时跳转到：</p>
        <div class="code-block">
          <pre>{{ currentOrigin }}/login?app_id=YOUR_APP_ID</pre>
        </div>
        <p class="note" style="margin-top: 10px;">
          <strong>优点：</strong> 无需开发前端登录页面，集成简单快速，统一用户体验，支持密码登录和短信验证码登录。
        </p>
      </div>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>方式二：自定义登录页面</h4>
        <p>如果您需要自定义登录页面的样式和交互，可以自己开发登录页面，但需要调用统一登录平台的认证接口完成登录。详细说明请查看：</p>
        <p>
          <a href="#" @click.prevent="switchToCustomLogin" class="help-link">
            <el-icon style="margin-right: 5px;"><Link /></el-icon>
            自定义登录页面指南
          </a>
        </p>
        <p class="note" style="margin-top: 10px;">
          <strong>适用场景：</strong> 需要与现有系统 UI 风格保持一致，或需要特殊的登录流程定制。
        </p>
      </div>

      <el-alert title="建议" type="success" :closable="false" show-icon style="margin-top: 20px;">
        <div>
          对于大多数场景，<strong>推荐使用方式一</strong>（统一登录平台的登录页面），这样可以减少开发工作量，同时确保登录体验的一致性。
        </div>
      </el-alert>
    </div>

    <div class="section">
      <h3>6. 新平台用户对接流程</h3>
      <p>对于新开发的平台，当需要新增用户时，推荐使用以下流程：</p>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>📋 推荐流程</h4>
        <ol>
          <li><strong>搜索用户：</strong> 调用用户搜索接口 <code>GET /api/v1/users/search</code>，通过手机号、姓名或英文名搜索统一认证平台中的用户。</li>
          <li><strong>获取用户信息：</strong> 从搜索结果中获取用户的基本信息（手机号、姓名、英文名等）。</li>
          <li><strong>新增平台账号：</strong> 根据获取到的用户信息，在您自己的平台中创建对应的账号。</li>
          <li><strong>同步映射关系：</strong> 调用 M2M 账号同步接口（<code>POST /api/v1/apps/mapping/sync</code>），同步用户与您应用的映射关系，详见 <a href="#" @click.prevent="switchToAccountSync" class="help-link">账号同步 (M2M) 使用说明</a>。</li>
        </ol>
      </div>

      <h4>6.1 用户搜索接口说明</h4>
      <table class="param-table">
        <thead>
          <tr><th>字段</th><th>类型</th><th>必填</th><th>说明</th></tr>
        </thead>
        <tbody>
          <tr><td><code>q</code></td><td>string</td><td><span class="tag-optional">否</span></td><td>搜索关键词（支持手机号、姓名、英文名）</td></tr>
          <tr><td><code>limit</code></td><td>int</td><td><span class="tag-optional">否</span></td><td>返回数量限制（默认 20，最大建议 100）</td></tr>
        </tbody>
      </table>

      <p><strong>请求示例：</strong></p>
      <div class="code-block">
        <pre>
GET /api/v1/users/search?q=13800138000&limit=50
Authorization: Bearer YOUR_ACCESS_TOKEN

// 响应示例
[
  {
    "id": 1001,
    "mobile": "13800138000",
    "name": "张三",
    "english_name": "zhangsan",
    "status": "ACTIVE"
  }
]
        </pre>
      </div>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>💡 注意事项</h4>
        <ul>
          <li>用户搜索接口需要用户登录认证（Bearer Token），所有登录用户都可以使用。</li>
          <li>搜索接口只返回活跃用户（<code>status == "ACTIVE"</code>），且会自动排除当前用户自己。</li>
          <li>获取到用户信息后，务必调用 M2M 接口同步映射关系，这样用户才能在快捷导航中看到您的应用。</li>
          <li>如果搜索不到用户，说明该用户尚未在统一认证平台注册，需要先引导用户完成注册。</li>
        </ul>
      </div>
    </div>

    <div class="section">
      <h3>7. 消息通知</h3>
      <p>平台可以调用接口向用户发送通知消息，适用于多种业务场景：</p>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>📢 应用场景</h4>
        <ul>
          <li><strong>任务下发：</strong> 向用户发送任务分配、任务提醒等通知</li>
          <li><strong>告警信息：</strong> 系统告警、异常提醒等紧急通知</li>
          <li><strong>待办事件：</strong> 待处理事项、审批流程等业务通知</li>
          <li><strong>其他业务通知：</strong> 系统公告、活动通知等各类消息</li>
        </ul>
      </div>

      <p>统一认证平台提供了完整的消息中心功能，支持应用向用户发送通知消息，用户可以在消息中心查看和管理这些通知。具体接口说明和使用方法请查看：</p>
      <p>
        <a href="#" @click.prevent="switchToMessageIntegration" class="help-link">
          <el-icon style="margin-right: 5px;"><Link /></el-icon>
          消息中心对接指南
        </a>
      </p>

      <div class="feature-card" style="margin-top: 15px;">
        <h4>💡 功能特点</h4>
        <ul>
          <li>支持用户认证和应用认证两种方式发送消息</li>
          <li>支持 WebSocket 实时推送，用户可即时收到通知</li>
          <li>支持 SSO 跳转，点击通知可直接跳转到相关业务页面</li>
          <li>消息中心统一管理，用户可在统一认证平台查看所有应用的通知</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { Link } from '@element-plus/icons-vue'

// 从父组件注入切换tab的方法
const switchHelpTab = inject<(value: string) => void>('switchHelpTab')

const currentOrigin = window.location.origin

const switchToFastIntegration = () => {
  if (switchHelpTab) {
    switchHelpTab('fast-integration')
  }
}

const switchToAccountSync = () => {
  if (switchHelpTab) {
    switchHelpTab('account-sync')
  }
}

const switchToCustomLogin = () => {
  if (switchHelpTab) {
    switchHelpTab('custom-login')
  }
}

const switchToMessageIntegration = () => {
  if (switchHelpTab) {
    switchHelpTab('message-integration')
  }
}
</script>

<style scoped>
@import './help.css';

.help-link {
  color: #409eff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  transition: color 0.3s;
  cursor: pointer;
}

.help-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>
