<template>
  <view class="admin-page api-management">
      <!-- 左侧分类树 -->
      <view class="sidebar-tree">
        <view class="sidebar-header">
          <button class="btn-primary-sm">新增分类</button>
          <button class="btn-success-sm ml-10">同步</button>
        </view>
        <scroll-view class="tree-scroll" scroll-y="true">
          <view class="tree-node" v-for="(group, gIndex) in apiGroups" :key="gIndex">
            <view class="node-label">
              <text class="arrow">▼</text>
              <text class="folder-icon">📁</text>
              <text class="label-text">{{ group.name }}</text>
            </view>
            <view class="node-children">
              <view 
                class="child-item" 
                v-for="(api, aIndex) in group.children" 
                :key="aIndex"
                :class="{ active: selectedApiId === api.id }"
                @click="selectedApiId = api.id"
              >
                <text class="method-tag" :class="api.method.toLowerCase()">{{ api.method }}</text>
                <text class="api-name">{{ api.name }}</text>
                <text class="more-icon">...</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 右侧接口详情 -->
      <view class="api-content">
        <view class="content-header">
          <text class="current-api-title">分销员列表</text>
          <view class="header-actions">
            <button class="btn-secondary-sm">调试</button>
            <button class="btn-primary-sm ml-10">编辑</button>
          </view>
        </view>
        
        <view class="info-section">
          <view class="info-title">接口信息</view>
          <view class="info-list">
            <view class="info-item">
              <text class="info-label">接口名称：</text>
              <text class="info-value">分销员列表</text>
            </view>
            <view class="info-item">
              <text class="info-label">请求类型：</text>
              <text class="method-badge get">GET</text>
            </view>
            <view class="info-item">
              <text class="info-label">功能描述：</text>
              <text class="info-value">--</text>
            </view>
            <view class="info-item">
              <text class="info-label">是否公共：</text>
              <text class="info-value">否</text>
            </view>
          </view>
        </view>

        <view class="info-section">
          <view class="info-title">调用方式</view>
          <view class="info-list">
            <view class="info-item">
              <text class="info-label">路由地址：</text>
              <text class="info-value">agent/index</text>
            </view>
            <view class="info-item">
              <text class="info-label">文件地址：</text>
              <text class="info-value">app/adminapi/controller/v1/agent/AgentManage.php</text>
            </view>
            <view class="info-item">
              <text class="info-label">方法名：</text>
              <text class="info-value">index</text>
            </view>
          </view>
        </view>

        <!-- 参数表格 -->
        <view class="params-section">
          <view class="info-title">header参数：</view>
          <view class="params-table">
            <view class="table-head">
              <view class="th p-attr">属性</view>
              <view class="th p-type">类型</view>
              <view class="th p-required">必须</view>
              <view class="th p-desc">说明</view>
            </view>
            <view class="table-row">
              <view class="td p-attr">Authori-zation</view>
              <view class="td p-type">string</view>
              <view class="td p-required">否</view>
              <view class="td p-desc">--</view>
            </view>
          </view>
        </view>

        <view class="params-section mt-20">
          <view class="info-title">query参数：</view>
          <view class="params-table">
            <view class="table-head">
              <view class="th p-attr">属性</view>
              <view class="th p-type">类型</view>
              <view class="th p-required">必须</view>
              <view class="th p-desc">说明</view>
            </view>
            <view class="table-row" v-for="(p, i) in queryParams" :key="i">
              <view class="td p-attr">{{ p.attr }}</view>
              <view class="td p-type">{{ p.type }}</view>
              <view class="td p-required">{{ p.required }}</view>
              <view class="td p-desc">{{ p.desc }}</view>
            </view>
          </view>
        </view>
      </view>
    </view></template>
<script setup lang="uts">
import { ref } from 'vue'

const selectedApiId = ref('1-1')

const apiGroups = ref([
  {
    name: '分销员管理',
    children: [
      { id: '1-1', name: '分销员列表', method: 'GET' },
      { id: '1-2', name: '修改上级推广人', method: 'PUT' },
      { id: '1-3', name: '分销员列表头部统计', method: 'GET' },
      { id: '1-4', name: '推广人列表', method: 'GET' },
      { id: '1-5', name: '推广订单列表', method: 'GET' }
    ]
  },
  {
    name: '分销设置',
    children: []
  },
  {
    name: '分销等级',
    children: []
  }
])

const queryParams = ref([
  { attr: 'page', type: 'string', required: '是', desc: '页码' },
  { attr: 'limit', type: 'string', required: '是', desc: '每页条数' },
  { attr: 'nickname', type: 'string', required: '是', desc: '用户昵称/用户id/手机号码' }
])
</script>

<style scoped>
.api-management {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 64px);
  background-color: #fff;
}

.sidebar-tree {
  width: 260px;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: row;
}

.tree-scroll {
  flex: 1;
}

.tree-node {
  padding: 5px 0;
}

.node-label {
  padding: 8px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.label-text {
  font-size: 14px;
  font-weight: 500;
  margin-left: 5px;
}

.node-children {
  padding-left: 20px;
}

.child-item {
  padding: 8px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.child-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.method-tag {
  font-size: 10px;
  padding: 0 4px;
  border-radius: 2px;
  margin-right: 8px;
  min-width: 30px;
  text-align: center;
}

.method-tag.get { color: #52c41a; border: 1px solid #b7eb8f; background: #f6ffed; }
.method-tag.put { color: #faad14; border: 1px solid #ffe58f; background: #fffbe6; }

.api-name {
  font-size: 13px;
  flex: 1;
}

.api-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.current-api-title {
  font-size: 20px;
  font-weight: 500;
}

.info-section {
  margin-bottom: 30px;
}

.info-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 15px;
}

.info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info-label {
  font-size: 14px;
  color: #666;
  width: 80px;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.method-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.method-badge.get { background-color: #e6f7ff; color: #1890ff; }

.params-table {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.table-head {
  background-color: #f8f8f9;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
}

.th, .td {
  padding: 12px;
  font-size: 13px;
}

.p-attr { flex: 2; }
.p-type { flex: 1; }
.p-required { flex: 1; }
.p-desc { flex: 3; }

.btn-primary-sm { background-color: #1890ff; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 4px; border: none; }
.btn-success-sm { background-color: #52c41a; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 4px; border: none; }
.btn-secondary-sm { background-color: #fff; color: #666; border: 1px solid #d9d9d9; font-size: 12px; padding: 5px 10px; border-radius: 4px; }

.ml-10 { margin-left: 10px; }
.mt-20 { margin-top: 20px; }
</style>


