<template>
  <div class="system-log">
    <el-card class="!border-none" shadow="never">
      <el-form class="mb-[-16px]" ref="queryFormRef" :model="queryParams" inline>
        <el-form-item class="w-[280px]" label="管理员" prop="admin_name">
          <el-input placeholder="请输入" v-model="queryParams.admin_name" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item class="w-[280px]" label="访问方式" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择" clearable>
            <el-option v-for="(item, index) in visitType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="w-[280px]" label="来源IP" prop="ip">
          <el-input placeholder="请输入" v-model="queryParams.ip" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="访问时间">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <!-- <export-data class="ml-2.5" :fetch-fun="systemLogLists" :params="queryParams" :page-size="pager.size" /> -->
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never" v-loading="isLoading">
      <el-table :data="tableData" size="large">
        <el-table-column label="ID" prop="id" width="80" align="center" />
        <el-table-column label="操作" prop="action" min-width="120" />
        <el-table-column label="管理员" prop="admin_name" min-width="120" />
        <el-table-column label="访问链接" prop="url" min-width="160" />
        <el-table-column label="访问方式" prop="type" min-width="90" align="center" />
        <el-table-column label="访问参数" prop="params" min-width="160" />
        <el-table-column label="来源IP" prop="ip" min-width="150" />
        <el-table-column label="操作地址" prop="location" min-width="120" />
        <el-table-column label="日志时间" prop="create_time" min-width="168" />
      </el-table>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="SystemLog">
import type { FormInstance } from 'element-plus'
import { logLists } from '@/api/system/log'

// 组件参数
const queryFormRef = shallowRef<FormInstance>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  admin_name: '',
  type: '',
  ip: ''
})
const dateRange = ref<string[] | null>(null)
const total = ref(0)
const isLoading = ref(false)
const tableData = ref<any[]>([])
const visitType = reactive([
  { label: '全部', value: '' },
  { label: 'get', value: 'get' },
  { label: 'post', value: 'post' },
  { label: 'put', value: 'put' },
  { label: 'delete', value: 'delete' },
  { label: 'option', value: 'option' }
])

// 获取列表
const getLists = async () => {
  isLoading.value = true
  logLists({
    ...queryParams,
    start_time: dateRange.value?.[0] || '',
    end_time: dateRange.value?.[1] || ''
  })
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  dateRange.value = null
  handleQuery()
}

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

<style lang="scss" scoped>
:deep(.el-date-editor) {
  @media screen and (max-width: 768px) {
    --el-date-editor-datetimerange-width: 280px;
  }
}
</style>
