<template>
  <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />

  <!-- 使用 TableList 组件 -->
  <TableList
    ref="tableListRef"
    :config="tableListConfig"
    @update:data="list = $event"
    @update:loading="loading = $event"
  />

  <!-- 表单弹窗：详情 -->
  <LoginLogDetail ref="detailRef" />
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as LoginLogApi from '@/api/system/loginLog'
import LoginLogDetail from './LoginLogDetail.vue'
import TableList from '@/components/TableList/index.vue'
import type { TableListConfig } from '@/components/TableList/types'
import { checkPermi } from '@/utils/permission'
const tableListRef = ref<InstanceType<typeof TableList>>() // TableList组件引用

defineOptions({ name: 'SystemLoginLog' })

const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  userIp: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

// 搜索表单配置
const loginLogSearchFormConfig = {
  items: [
    {
      field: 'username',
      label: '用户名称',
      type: 'input' as const,
      placeholder: '请输入用户名称'
    },
    {
      field: 'userIp',
      label: '登录地址',
      type: 'input' as const,
      placeholder: '请输入登录地址'
    },
    {
      field: 'createTime',
      label: '登录日期',
      type: 'date-range' as const,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
    }
  ]
}

// 表格列配置
const loginLogTableColumns = [
  {
    prop: 'id',
    label: '日志编号',
    width: 120,
    align: 'center' as const
  },
  {
    prop: 'logType',
    label: '操作类型',
    width: 120,
    align: 'center' as const,
    dictType: DICT_TYPE.SYSTEM_LOGIN_TYPE
  },
  {
    prop: 'username',
    label: '用户名称',
    width: 180,
    align: 'center' as const
  },
  {
    prop: 'userIp',
    label: '登录地址',
    width: 180,
    align: 'center' as const
  },
  {
    prop: 'userAgent',
    label: '浏览器',
    minWidth: 220,
    align: 'center' as const,
    showOverflowTooltip: true
  },
  {
    prop: 'result',
    label: '登陆结果',
    width: 120,
    align: 'center' as const,
    dictType: DICT_TYPE.SYSTEM_LOGIN_RESULT
  },
  {
    prop: 'createTime',
    label: '登录日期',
    width: 180,
    align: 'center' as const,
    formatter: (row: any) => dateFormatter(row, {}, row.createTime)
  }
]

// 表格操作按钮配置
const loginLogTableActions = [
  {
    label: '导出',
    type: 'success' as const,
    icon: 'ep:download',
    loading: exportLoading,
    permission: 'system:login-log:export',
    handler: () => handleExport()
  }
]

/** 查询列表 - 由 TableList 组件处理 */

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  tableListRef.value?.getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.pageNo = 1
  queryParams.username = undefined
  queryParams.userIp = undefined
  queryParams.createTime = []
  tableListRef.value?.getList()
}

/** 详情操作 */
const detailRef = ref<InstanceType<typeof LoginLogDetail>>()
const openDetail = (data: LoginLogApi.LoginLogVO) => {
  detailRef.value?.open(data)
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await LoginLogApi.exportLoginLog(queryParams)
    download.excel(data, '登录日志.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// TableList 配置
const tableListConfig: TableListConfig = {
  searchForm: loginLogSearchFormConfig,
  actions: loginLogTableActions,
  settings: {
    refresh: true, // 显示刷新按钮
    download: false,
    // download: handleExport, // 传递导出方法
    print: true, // 不显示打印按钮
    size: true, // 显示大小设置按钮
    columns: true, // 显示列设置按钮
    fullscreen: true // 暂时不显示全屏按钮
  },
  table: {
    loading: false,
    data: list.value,
    selection: false, // 不显示选择框
    actionsWidth: 0, // 不显示操作列
    columns: [...loginLogTableColumns]
  },
  pagination: {
    show: true,
    pageSize: 10
  },
  api: {
    getList: async (params) => {
      const response = await LoginLogApi.getLoginLogPage(params)
      return response
    }
  },
  queryParams: queryParams,
  onSearch: () => {
    handleQuery()
  },
  onReset: () => {
    resetQuery()
  }
}
onMounted(() => {
  // 初始化时调用 getList()
  tableListRef.value.getList()
})
</script>
