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

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import PSModule from './components/Module/index.vue'
import PSApi from './components/Api/index.vue'
import { deleteApiById, getApiByList, updateApiStatus } from '@/api/paas/apiApi'
import { deleteModuleById, getModuleByList } from '@/api/paas/moduleApi'

interface TreeNode {
  label: string
  isLeaf: boolean
  modId: number
  children?: TreeNode[]
}

interface Object {
  modId: number
  objectId: number
  objectTitle: string
  objectCode: string
  comment: string
}

const state = reactive({
  loading: false,
  keywords: '',
  Modules: [] as TreeNode[],
  curModuleId: 0,
  objectList: [] as Object[],
  dialogState: 1,
  search: {
    keywords: '',
  },
})

const leftTreeRef = ref()
const ModuleRef = ref()
const getApiData = async () => {
  const curModuleId = state.curModuleId
  if (curModuleId > 0) {
    state.loading = true
    const { data } = await getApiByList({ modId: curModuleId })
    state.objectList = data
    state.loading = false
  }
}

const getModuleData = async () => {
  const { data } = await getModuleByList('')
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.modTitle,
      modId: item.modId,
      isLeaf: true,
    })
  })
  state.Modules = [
    {
      label: 'API模块列表',
      isLeaf: false,
      modId: -1,
      children,
    },
  ]

  if (data && data.length > 0) {
    state.curModuleId = data[0].modId
    nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].modId)
    })
    await getApiData()
  }
}
// 模型新增
const onModuleAdd = () => {
  ModuleRef.value.showAddModule()
}

// 模型编辑
const onModuleEdit = (data: { ModuleId: number }) => {
  const ModuleId = data.ModuleId
  ModuleRef.value.showEditModule(ModuleId)
}

// 模型删除
const onModuleDelete = (data: any) => {
  ElMessageBox.confirm(`确认删除「${data.modTitle}」吗？`, '确认信息').then(async () => {
    await deleteModuleById(data.modId)
    await getModuleData()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}

// 模型选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curModuleId = node.modId
    getApiData()
  }
}

const objectTableRef = ref()
const apiRef = ref()

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

// 新增API
const onApiAdd = () => {
  apiRef.value.showAddApi(state.curModuleId)
}

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

// 删除API
const onApiDelete = (row: any) => {
  const { apiId, apiTitle } = row
  ElMessageBox.confirm(`确认删除「${apiTitle}」吗？`, '确认信息').then(async () => {
    await deleteApiById(apiId)
    await getApiData()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}
async function onChangeStatus(row: { modId: number;apiId: number; status: number }) {
  await updateApiStatus(row.modId, row.apiId, row.status)
}
onMounted(() => {
  getModuleData()
})
</script>

<template>
  <div class="absolute-container">
    <tool-header title="API接口">
      <template #right>
        <el-button plain @click="onModuleAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
          新增API模块
        </el-button>
      </template>
    </tool-header>

    <div class="page-main">
      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
        <template #leftSide>
          <el-scrollbar class="tree">
            <ElTree ref="leftTreeRef" :data="state.Modules" default-expand-all node-key="modId" @node-click="onTreeNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="label" :title="node.label">
                    <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
                      <svg-icon name="uim:box" />
                    </el-icon>
                    <div class="text">
                      {{ data.label }}
                    </div>
                  </div>
                  <div v-if="data.isLeaf" class="actions">
                    <el-button-group>
                      <el-button type="info" plain size="small" @click.stop="onModuleEdit(data)">
                        <template #icon>
                          <el-icon>
                            <svg-icon name="i-ep:edit" />
                          </el-icon>
                        </template>
                      </el-button>
                      <el-button type="danger" plain size="small" @click.stop="onModuleDelete(data)">
                        <template #icon>
                          <el-icon>
                            <svg-icon name="i-ep:delete" />
                          </el-icon>
                        </template>
                      </el-button>
                    </el-button-group>
                  </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>

              <el-button plain size="default" @click.stop="onApiAdd">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
                新增API
              </el-button>
            </template>
          </tool-bar>

          <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" 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="200" />

            <el-table-column prop="apiCode" label="代码" header-align="center" align="center" width="150" />
            <el-table-column prop="status" label="status" header-align="center" align="center" width="150">
              <template #default="{ row }">
                <el-switch
                  v-model="row.status"
                  :active-value="0"
                  :inactive-value="1"
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                  @change="(status) => onChangeStatus(row)"
                />
              </template>
            </el-table-column>

            <el-table-column prop="apiDesc" label="说明" header-align="center" align="left" />

            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template #default="scope">
                <el-button type="primary" size="small" plain @click="onApiEdit(scope.row)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" plain @click="onApiDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </LayoutContainer>
    </div>
    <PSModule ref="ModuleRef" @success="getModuleData" />
    <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>
