<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout :model="state.model" label-position="left" :colSpan="6" ref="formRef">
        <el-form-item label="关键词">
          <el-input v-model="state.model.keyword"></el-input>
        </el-form-item>
        <el-form-item label="创建日期" prop="begDate">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.begDate" placeholder="" />
        </el-form-item>
        <el-form-item label="到" prop="endDate">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.endDate" placeholder="" />
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>
    <cacp-complex-table
      :actions="actions"
      :data="tableData"
      v-loading="loading"
      :pagination="tablePagination"
      @on-page-change="onPageChange"
      @on-size-change="onSizeChange"
    >
      <template #title>
        <div class="cacp-group__title">用户日志列表</div>
      </template>
      <el-table-column prop="userId" label="用户GUID" />
      <el-table-column prop="fullPathName" label="用户全路径" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="ipAddress" label="客户端IP" />
      <el-table-column prop="viewCode" label="视角" />
      <el-table-column prop="operTime" label="操作时间" />
      <el-table-column prop="operResult" label="操作结果" />
      <el-table-column prop="recCreateTime" label="创建日期" />
    </cacp-complex-table>
  </cacp-search-layout>

  <log-view :log-id="state.current.logId" :visible="state.current.visible" @on-close="onCloseView" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

import {
  SuccessResultCode,
  useComplexTable,
  useLoading,
  type TableAction,
  type SearchPanelLayoutInstance
} from '@cacp/ui'
import type { AuditLogInfo, AuditLogQuery } from '@/types/auditLog'
import config from '@/config'
import * as apis from '@/apis/audit'
import LogView from './AuditLogView.vue'

const { loading, setLoading } = useLoading()
const { tableData, tablePagination, setPagination, setPageIndex, setPageSizes } = useComplexTable(config)
const formRef = ref<SearchPanelLayoutInstance>()
const actions: Array<TableAction> = [
  {
    key: 'view',
    type: 'primary',
    icon: 'View',
    tooltip: '详情',
    limit: 'one',
    onclick: onOpenView
  }
]
const state = reactive<{
  model: AuditLogQuery
  current: {
    visible: boolean
    logId: string
  }
}>({
  model: {
    begDate: dayjs().startOf('month').format('YYYY-MM-DD'),
    endDate: dayjs().format('YYYY-MM-DD'),
    keyword: '',
    pageIndex: tablePagination.currentPage,
    pageSize: tablePagination.pageSize
  },
  current: {
    visible: false,
    logId: ''
  }
})

async function onQuery(): Promise<void> {
  setLoading(true)
  const res = await apis.getPage(state.model)
  if (res.code === SuccessResultCode && res.data) {
    setPagination(res.data)
  } else {
    ElMessage.error({
      message: res.message,
      showClose: true
    })
  }

  setLoading(false)
}

async function onReset() {
  formRef.value.resetFields()
  onPageChange(1)
}

function onOpenView(info: AuditLogInfo) {
  state.current.logId = info.logId
  state.current.visible = true
}
async function onCloseView() {
  state.current.logId = ''
  state.current.visible = false
}

async function onPageChange(index: number) {
  setPageIndex(index)
  state.model.pageIndex = index
  await onQuery()
}

async function onSizeChange(size: number) {
  setPageSizes(size)
  state.model.pageSize = size
  await onQuery()
}
</script>
