<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="apiIndex">
import { ElMessage } from 'element-plus'
import PSApi from './components/Api.vue'
import { getBizData } from '@/api/biz/bizApi'
import { getApiByList, updateApiStatus } from '@/api/api/apiApi'
import useSettingsStore from '@/store/modules/settings'
import { httpMethod } from '@/utils/tool'

const settingsStore = useSettingsStore()
const router = useRouter()
const tabbar = useTabbar()

interface TreeNode {
  label: string
  isLeaf: boolean
  value: number
  bizId: number
  objectId: number
  children?: TreeNode[]
}

interface Api {
  bizId: number
  objectId: number
  oamId: number
  apiId: number
  apiMethod: number
  apiType: number
  apiTitle: string
  apiCode: string
  apiDesc: string
  apiParams: string
  status: number
}

const state = reactive({
  loading: false,
  keywords: '',
  treeData: [] as TreeNode[],
  curBizId: 0,
  curObjectId: 0,
  apiList: [] as Api[],
  dialogState: 1,
  search: {
    keywords: '',
  },
})

const leftTreeRef = ref()
const getApiData = async () => {
  const curBizId = state.curBizId
  const curObjectId = state.curObjectId
  if (curBizId > 0 && curObjectId > 0) {
    state.loading = true
    const { data } = await getApiByList({ bizId: curBizId, objectId: curObjectId })
    state.apiList = data
    state.loading = false
  }
}

const getData = async () => {
  const { data } = await getBizData()
  state.treeData = data

  if (data && data.length > 0) {
    state.curBizId = data[0].bizId
    const objectList = data[0].children
    if (objectList && objectList.length > 0) {
      const obj = objectList[0]
      state.curObjectId = obj.objectId
      await getApiData()
      await nextTick(() => {
        leftTreeRef.value.setCurrentKey(obj.objectId)
      })
    }
  }
}

onMounted(() => {
  getData()
})

// 模块选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curObjectId = node.objectId
    getApiData()
  }
}

const apiRef = ref()
const apiTableRef = ref()

// 检索对象
const onSearch = () => {
  getApiData()
}

// 编辑API
const onApiEdit = (data: { apiId: number }) => {
  const apiId = data.apiId
  apiRef.value.showEditApi(apiId)
}

// 编辑对象
const onApiDebug = (row: { apiId: number }) => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'apiDebug',
      params: {
        apiId: row.apiId,
      },
    })
  }
  else {
    router.push({
      name: 'apiDebug',
      params: {
        apiId: row.apiId,
      },
    })
  }
}

async function onChangeStatus(row: { apiId: number; status: number }) {
  const { msg } = await updateApiStatus(row.apiId, row.status)
  ElMessage.success(msg)
}
</script>

<template>
  <div class="absolute-container">
    <tool-header title="API管理">
      <template #right>
      </template>
    </tool-header>

    <div class="page-main">
      <LayoutContainer left-side-width="250px" hide-left-side-toggle>
        <template #leftSide>
          <el-scrollbar class="tree">
            <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="moduleId" @node-click="onTreeNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="label" :title="node.label">
                    <el-icon v-if="data.isLeaf > 0" size="16px" style="margin-right: 5px;">
                      <svg-icon name="uim:box" />
                    </el-icon>
                    <div class="text">
                      {{ data.label }}
                    </div>
                  </div>
                </div>
              </template>
            </ElTree>
          </el-scrollbar>
        </template>

        <div class="container">
          <tool-bar>
            <template #right>
              <el-input v-model="state.search.keywords" placeholder="请输入关键字" style="padding-right: 10px;" clearable />
              <el-button type="primary" @click="onSearch">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:search" />
                  </el-icon>
                </template>
              </el-button>
            </template>
          </tool-bar>

          <el-table ref="apiTableRef" v-loading="state.loading" class="list-table" :data="state.apiList" size="small" border stripe highlight-current-row height="100%">
            <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />

            <el-table-column prop="apiTitle" label="名称" header-align="center" align="center" width="150">
              <template #default="scope">
                <span> {{ scope.row.apiTitle }} </span>
              </template>
            </el-table-column>

            <el-table-column prop="apiMethod" label="请求" header-align="center" align="center" width="100">
              <template #default="scope">
                <span> {{ httpMethod(scope.row.apiMethod) }} </span>
              </template>
            </el-table-column>

            <el-table-column prop="apiCode" label="url" header-align="left" align="left" width="120">
              <template #default="scope">
                <span> /{{ scope.row.objectCode }}/{{ scope.row.oamCode }} </span>
              </template>
            </el-table-column>

            <el-table-column prop="apiDesc" label="说明" header-align="center" align="left">
              <template #default="scope">
                <span> {{ scope.row.apiDesc }} </span>
              </template>
            </el-table-column>

            <el-table-column prop="status" label="状态" header-align="center" align="center" width="100">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  :loading="scope.row.loading"
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                  @change="(status) => onChangeStatus(scope.row)"
                />
              </template>
            </el-table-column>

            <el-table-column label="操作" header-align="center" align="center" width="120">
              <template #default="scope">
                <el-button type="primary" size="small" plain @click="onApiDebug(scope.row)">在线调试</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </LayoutContainer>
    </div>
    <PSApi ref="apiRef" @success="getApiData" />
  </div>
</template>

<style lang="scss" scoped>
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .absolute-container {
    :deep(.left-side) {
      display: flex;
      flex-direction: column;
      height: 100%;

      .btns {
        display: inline-flex;
        width: 100%;
        margin-bottom: var(--container-padding);

        .add {
          width: 100%;
        }
      }

      .tree {
        flex: 1;
        overflow-y: auto;

        .el-tree {
          .el-tree-node__content {
            height: 40px;
          }

          .is-current > .el-tree-node__content {
            background-color: var(--el-color-primary-light-9);
          }

          .custom-tree-node {
            flex: 1;
            position: relative;
            width: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .label {
              display: inline-flex;
              align-items: center;
              width: calc(100% - 10px);
              color: var(--el-text-color-primary);

              .text {
                @include text-overflow;
              }
            }

            &:hover {
              .actions {
                display: block;
              }
            }

            .actions {
              display: none;
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);

              .el-button {
                padding: 5px 8px;
              }
            }
          }
        }
      }
    }
  }
</style>
