<template>
  <div class="main-content">
    <BaseTable
      :tableHeader="tableHeader"
      :tableData="tableData"
      :searchParams="searchParams"
      :control="false"
      @searchFn="searchFn"
      @resetFn="resetFn"
    >
      <template #search>
        <el-form-item label="请求路径">
          <el-input v-model.trim="searchParams.path" placeholder="请输入请求路径" />
        </el-form-item>
      </template>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { fetch } from '@/api/index'

const defaultSearch = { current: 1, size: 10, total: 0 }

const searchParams = reactive<any>({
  ...defaultSearch,
  path: ''
})

const tableHeader = [
  { label: '请求路径', prop: 'path', align: 'center' as const, minWidth: 200 },
  { label: '请求方法', prop: 'method', align: 'center' as const, width: 100 },
  { label: '状态码', prop: 'status', align: 'center' as const, width: 100 },
  { label: '请求时间', prop: 'requestTime', align: 'center' as const, minWidth: 160 }
]

const tableData = ref<any[]>([])

function searchFn(isReset = false) {
  if (isReset) Object.assign(searchParams, defaultSearch)
  fetch({ url: '/upms/nginx-log/page', params: searchParams }).then(
    (res: any) => {
      tableData.value = res.data?.records || []
      searchParams.total = res.data?.total || 0
    },
    () => {}
  )
}

function resetFn() {
  Object.assign(searchParams, defaultSearch, { path: '' })
  searchFn()
}

searchFn()
</script>
