<script setup name="systemLog">
import { reactive, ref, h, onMounted } from 'vue'
import { list } from '@/http/apis/systemManage/systemLog'
const searchForm = reactive({
    userName: undefined,
    times: undefined,
    finishTime: undefined,
    startTime: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  column = reactive([
    {
      type: 'expand'
    },
    {
      label: '用户姓名',
      key: 'userName',
      prop: 'userName',
      width: '180'
    },
    {
      label: 'IP',
      key: 'requestIp',
      prop: 'requestIp',
      width: '180'
    },
    {
      label: 'IP来源',
      key: 'regionByIp',
      prop: 'regionByIp',
      width: '150',
      showOverflowTooltip: true
    },
    {
      label: '描述',
      key: 'description',
      prop: 'description',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '请求耗时',
      key: 'consumingTime',
      render: row => h('span', `${row.consumingTime}ms`),
      width: '100'
    },
    {
      label: '操作时间',
      key: 'startTime',
      prop: 'startTime',
      width: '180'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm,
      startTime:
        searchForm.times && searchForm.times.length
          ? searchForm.times[0]
          : undefined,
      finishTime:
        searchForm.times && searchForm.times.length
          ? searchForm.times[1]
          : undefined
    })
    total.value = res.data.total
    data.value = res.data.records
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.userName = undefined
    searchForm.times = undefined
    getTableData({ pageNumber: 1, pageSize: 10 })
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-card shadow="never" class="search mb-16">
    <el-form label-suffix=":" :model="searchForm" size="small">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="用户姓名">
            <el-input v-model="searchForm.userName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="searchForm.times"
              :editable="false"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="btn">
            <el-button type="primary" size="small" @click="search">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card shadow="never">
    <template #header>日志列表</template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #expand="{ scope }">
        <div class="px-50 text-info">
          <div>请求地址：{{ scope.row.requestUri }}</div>
          <div>请求方法：{{ scope.row.httpMethod }}</div>
          <div>请求参数：{{ scope.row.params||'-' }}</div>
          <div>请求结果：{{ scope.row.result||'-' }}</div>
        </div>
      </template>
    </table-list>
  </el-card>
</template>
