<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"
  />

  <!-- 表单弹窗：详情 -->
  <OperateLogDetail ref="detailRef" />
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as OperateLogApi from '@/api/system/operatelog'
import OperateLogDetail from './OperateLogDetail.vue'
import * as UserApi from '@/api/system/user'
import TableList from '@/components/TableList/index.vue'
import type { TableListConfig } from '@/components/TableList/types'
import { checkPermi } from '@/utils/permission'
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const tableListRef = ref<InstanceType<typeof TableList>>() // TableList组件引用

defineOptions({ name: 'SystemOperateLog' })

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

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

// 搜索表单配置
const operateLogSearchFormConfig = ref({
  items: [
    {
      field: 'creatorName',
      label: '操作人',
      type: 'input' as const,
      // type: 'select' as const,
      placeholder: '请输入操作人员',
      // options: userList.value?.map((user: any) => ({
      //   label: user.nickname,
      //   value: user.id
      // })) || []
    },
    {
      field: 'type',
      label: '操作模块',
      type: 'input' as const,
      placeholder: '请输入操作模块'
    },
    {
      field: 'subType',
      label: '操作名',
      type: 'input' as const,
      placeholder: '请输入操作名'
    },
    {
      field: 'action',
      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')],
    },
    {
      field: 'bizId',
      label: '业务编号',
      type: 'input' as const,
      placeholder: '请输入业务编号'
    }
  ]
})

// 表格列配置
const operateLogTableColumns = [
  {
    prop: 'id',
    label: '日志编号',
    width: 100,
    align: 'center' as const
  },
  {
    prop: 'userName',
    label: '操作人',
    width: 120,
    align: 'center' as const
  },
  {
    prop: 'type',
    label: '操作模块',
    width: 120,
    align: 'center' as const
  },
  {
    prop: 'subType',
    label: '操作名',
    width: 160,
    align: 'center' as const
  },
  {
    prop: 'action',
    label: '操作内容',
    minWidth: 220,
    align: 'center' as const,
    showOverflowTooltip: true
  },
  {
    prop: 'createTime',
    label: '操作时间',
    width: 180,
    align: 'center' as const,
    formatter: (row: any) => dateFormatter(row, {}, row.createTime)
  },
  {
    prop: 'bizId',
    label: '业务编号',
    width: 120,
    align: 'center' as const
  },
  {
    prop: 'userIp',
    label: '操作 IP',
    width: 120,
    align: 'center' as const
  }
]

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

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

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

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

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

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await OperateLogApi.exportOperateLog(queryParams)
    download.excel(data, '操作日志.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// TableList 配置
const tableListConfig: TableListConfig = {
  searchForm: operateLogSearchFormConfig.value,
  actions: operateLogTableActions,
  settings: {
    refresh: true, // 显示刷新按钮
    download: false, // 传递导出方法
    print: true, // 不显示打印按钮
    size: true, // 显示大小设置按钮
    columns: true, // 显示列设置按钮
    fullscreen: true // 暂时不显示全屏按钮
  },
  table: {
    loading: false,
    data: list.value,
    selection: false, // 不显示选择框
    actionsWidth: 0, // 不显示操作列
    columns: [...operateLogTableColumns]
  },
  pagination: {
    show: true,
    pageSize: 10
  },
  api: {
    getList: async (params) => {
      const response = await OperateLogApi.getOperateLogPage(params)
      return response
    }
  },
  queryParams: queryParams,
  onSearch: () => {
    handleQuery()
  },
  onReset: () => {
    resetQuery()
  }
}
/** 初始化 **/
onMounted(async () => {
  // 初始化时调用 getList()
  tableListRef.value.getList()
  // await getList()
  // 获得用户列表
  userList.value = await UserApi.getSimpleUserList()
  operateLogSearchFormConfig.value.items[0].options = userList.value.map((user: any) => ({
    label: user.nickname,
    value: user.id
  }))
})
</script>
