<script lang="ts" setup name="apiLog">
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteApiLogById, getApiLogByPage } from '@/api/api/apiLogApi'
import { getBizData } from '@/api/biz/bizApi'
const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()

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

interface ApiLog {
  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,
  logList: [] as ApiLog[],
  dialogState: 1,
  search: {
    bizId: 0,
    objectId: 0,
    keywords: '',
  },
})

// 查询日志列表
const leftTreeRef = ref()

const getApiLogData = async () => {
  const curBizId = state.curBizId
  const curObjectId = state.curObjectId
  if (curBizId > 0 && curObjectId > 0) {
    state.loading = true
    state.search.bizId = curBizId
    state.search.objectId = curObjectId
    const { data } = await getApiLogByPage(state.search)
    state.logList = data
    state.loading = false
  }
}

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

  if (data && data.length > 0) {
    state.curBizId = data[0].bizId

    data.forEach((biz: { label: string; bizTitle: string; objects: any; children: any; isLeaf: boolean }) => {
      biz.label = biz.bizTitle
      biz.isLeaf = false
      const objects = biz.objects
      objects.forEach((object: { label: string; objectTitle: string; isLeaf: boolean }) => {
        object.label = object.objectTitle
        object.isLeaf = true
      })
      biz.children = objects
    })

    await getApiLogData()
    await nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].bizId)
    })
  }
}

// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getApiLogData())
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getApiLogData())
}
// 查询
const onSearch = () => {
  getApiLogData()
}

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

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

// 删除日志
const onReqDel = async (data: { apiTitle: any; reqId: number }) => {
  ElMessageBox.confirm('确认删除吗？', '确认信息').then(async () => {
    await deleteApiLogById(data.reqId)
    await getApiLogData()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}
</script>

<template>
  <div class="absolute-container">
    <tool-header title="Api日志" />
    <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" 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" />
                </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="apiReqTableRef" v-loading="state.loading" class="list-table" :data="state.logList" size="small" border stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号" width="60" />

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

            <el-table-column align="center" label="调用者IP" prop="appTitle">
              <template #default="scope">
                <span>{{ scope.row.appTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="创建时间" prop="reqTime">
              <template #default="scope">
                <span>{{ scope.row.reqTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" header-align="center" align="center" width="220">
              <template #default="scope">
                <el-button v-if="scope.row.isFixed !== 1" size="small" type="danger" @click="onReqDel(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @current-change="currentChange" @size-change="sizeChange" />
        </div>
      </LayoutContainer>
    </div>
  </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>
