<template>
  <el-dialog
    :model-value="visible"
    title="用户日志详情"
    width="800px"
    :append-to-body="true"
    :destroy-on-close="true"
    @open="onOpen"
    @close="onClose"
  >
    <el-scrollbar v-if="info" v-loading="loading">
      <el-row class="cacp-complex__table" v-for="(item) in config" :key="item.key">
        <el-col class="cacp-complex__label--title" :span="6">{{ item.name }}</el-col>
        <el-col class="cacp-complex__value--grey01" :span="18">{{ info[item.key] }}</el-col>
      </el-row>
    </el-scrollbar>
    <template #footer>
      <div>
        <el-button @click="onClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { SuccessResultCode, useLoading } from '@cacp/ui'
import * as apis from '@/apis/audit'
import type { AuditLogInfo } from '@/types/auditLog'

const emits = defineEmits<{
  (e: 'on-close'): void
}>()
const props = defineProps<{
  visible: boolean
  logId: string
}>()

const { loading, setLoading } = useLoading()
const info = ref<AuditLogInfo>()

const config: Array<{ name: string; key: keyof AuditLogInfo }> = [
  { name: 'id', key: 'logId' },
  { name: '部门Id', key: 'parentId' },
  { name: '用户GUID', key: 'userId' },
  { name: '用户全路径', key: 'fullPathName' },
  { name: '用户名', key: 'userName' },
  { name: '关区', key: 'customsCode' },
  { name: '客户端IP', key: 'ipAddress' },
  { name: '视角', key: 'viewCode' },
  { name: '应用编码', key: 'appCode' },
  { name: '应用特征码', key: 'appFeatureCode' },
  { name: '业务系统日志Id', key: 'orgId' },
  { name: '业务ID', key: 'bizId' },
  { name: '环节ID', key: 'stepId' },
  { name: '操作时间', key: 'operTime' },
  { name: '操作对象表及字段名称', key: 'operDbItems' },
  { name: '操作类型编码', key: 'operType' },
  { name: '操作内容', key: 'operContent' },
  { name: '操作数据量', key: 'operDataQty' },
  { name: '操作描述', key: 'operDesc' },
  { name: '操作结果', key: 'operResult' },
  { name: 'sm3加密数据', key: 'hashCode' },
  { name: '创建日期', key: 'recCreateTime' }
]

async function onOpen() {
  setLoading(true)
  const res = await apis.get(props.logId)
  if (res.code === SuccessResultCode && res.data) {
    info.value = res.data
  }
  setLoading(false)
}

function onClose() {
  emits('on-close')
}
</script>

<style scoped lang="less">
.cacp-group__box {
  :deep(.cacp-group__header) {
    justify-content: space-between;
  }
}
</style>
