<template>
  <div class="p-4">
    <!-- 操作日志基本信息 -->
    <el-card class="mb-4">
      <el-descriptions title="操作日志详情" border>
        <el-descriptions-item label="操作名称">{{
          log.operation_name
        }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{
          log.operation_type
        }}</el-descriptions-item>
        <el-descriptions-item label="请求路径">{{
          log.request_path
        }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{
          log.request_method
        }}</el-descriptions-item>
        <el-descriptions-item label="操作人ID">{{
          log.operator_id
        }}</el-descriptions-item>
        <el-descriptions-item label="操作人姓名">{{
          log.operator_name
        }}</el-descriptions-item>
        <el-descriptions-item label="操作人昵称">{{
          log.operator_nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="部门ID">{{
          log.department_id
        }}</el-descriptions-item>
        <el-descriptions-item label="部门名称">{{
          log.department_name
        }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{
          log.operation_time
        }}</el-descriptions-item>
        <el-descriptions-item label="耗时"
          >{{ log.cost_time }} 秒</el-descriptions-item
        >
        <el-descriptions-item label="IP地址">{{
          log.host
        }}</el-descriptions-item>
        <el-descriptions-item label="地理位置">{{
          log.location
        }}</el-descriptions-item>
        <el-descriptions-item label="浏览器">{{
          log.browser
        }}</el-descriptions-item>
        <el-descriptions-item label="操作系统">{{
          log.os
        }}</el-descriptions-item>
        <el-descriptions-item label="User-Agent">{{
          log.user_agent
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 折叠面板 -->
    <el-card>
      <el-collapse v-model="activeCollapse">
        <!-- 请求参数 -->
        <el-collapse-item title="请求参数" name="requestParams">
          <vue-json-pretty :data="parsedRequestParams" />
        </el-collapse-item>
        <!-- 响应结果 -->
        <el-collapse-item title="响应结果" name="responseResult">
          <vue-json-pretty :data="parsedResponseResult" />
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

// 操作日志数据
const log = ref({
  id: "9d40633c-677b-4adc-9a2e-7676fc6924df",
  operation_name: "获取用户列表",
  operation_type: 1,
  request_path: "/user/list",
  request_method: "GET",
  request_params: "{}",
  response_result:
    '{"code": 200, "msg": "操作成功", "success": true, "time": "2025-01-29T00:26:23.979927", "data": {"result": [{"id": "8242939b-01af-4e4f-be6a-045ff95b51b6", "create_time": "2025-01-20T21:43:45.800419+08:00", "update_time": "2025-01-27T02:05:34.436735+08:00", "username": "admin", "email": "zhangsan@example.com", "phone": "13888888888", "nickname": "张三", "gender": 0, "status": 1, "department_id": "74aae292-f318-4e07-93b8-3772d9792351"}], "total": 1, "page": 1}}',
  host: "127.0.0.1",
  location: "",
  browser: "Edge 132",
  os: "Windows 10",
  user_agent:
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0",
  operator_id: "8242939b-01af-4e4f-be6a-045ff95b51b6",
  operator_name: "admin",
  operator_nickname: "张三",
  department_id: "74aae292-f318-4e07-93b8-3772d9792351",
  department_name: "系统管理",
  status: 1,
  operation_time: "2025-01-29T00:26:23.982990+08:00",
  cost_time: 0.7223844528198242
});

// 解析请求参数
const parsedRequestParams = computed(() => {
  try {
    return JSON.parse(log.value.request_params);
  } catch (e) {
    return {};
  }
});

// 解析响应结果
const parsedResponseResult = computed(() => {
  try {
    return JSON.parse(log.value.response_result);
  } catch (e) {
    return {};
  }
});

// 折叠面板的激活项
const activeCollapse = ref(["requestParams", "responseResult"]);
</script>

<style scoped lang="scss">
.el-descriptions {
  margin-bottom: 20px;
}

.el-collapse {
  margin-top: 20px;
}
</style>
