<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteApiRequestById, getApiRequestByPage } from '@/api/paas/apiReqApi'
const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()

interface TreeNode {
  label: string
  groupId: number
  children?: TreeNode[]
}
const state = reactive({
  loading: false,
  curGroupId: 0,
  menu: [] as TreeNode[],
  userList: [],
  search: {
    keywords: '',
  },
})

// 查询日志列表
const getLogData = async () => {
  const params = getParams()
  params.keywords = state.search.keywords
  state.loading = true
  const { data } = await getApiRequestByPage(params)
  state.loading = false
  state.userList = data
  state.loading = false
}
// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getLogData())
}

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

// 删除日志
const onLogDelete = async (data: { logTitle: any; logId: number }) => {
  ElMessageBox.confirm(`确认删除「${data.logTitle}」吗？`, '确认信息').then(async () => {
    await deleteApiRequestById(data.logId)
    await getLogData()
    ElMessage.success({
      message: '删除成功',
      center: true,
    })
  })
}

onMounted(() => {
  getLogData()
})
</script>

<template>
  <div class="absolute-container">
    <page-header title="日志管理" content="日志调用管理" />
    <div class="page-main">
      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
        <template #leftSide>
          <el-scrollbar class="tree">
            <ElTree ref="menuRef" :data="state.menu" default-expand-all>
              <template #default="{ data }">
                <div class="custom-tree-node">
                  <div class="label" :title="data.meta.title">
                    <el-icon v-if="data.meta.icon" size="16px" style="margin-right: 5px;">
                      <svg-icon :name="data.meta.icon" />
                    </el-icon>
                    <div class="text">
                      {{ data.meta.title }}
                    </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="accountTableRef" v-loading="state.loading" class="list-table" :data="state.userList" border stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号" width="60" />
            <el-table-column align="center" width="100" label="接口名称" prop="ip" />
            <el-table-column align="center" label="调用者IP" prop="ip" />
            <el-table-column align="center" label="创建时间" prop="createTime" />
            <el-table-column align="center" label="调用次数" prop="time" />
            <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="onLogDelete(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>
</style>
