<script setup lang="ts">
import type { LogEntity } from '@vben/types';

import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { getLogDetailApi } from '#/api/log';

const data = ref();
const logDetail = ref<LogEntity | null>(null);
const loading = ref(false);

const getTitle = computed(() => '日志详情');

const [Modal, modalApi] = useVbenModal({
  class: 'w-10/12',
  async onOpenChange(isOpen) {
    if (isOpen) {
      data.value = modalApi.getData();
      await fetchLogDetail();
    }
  },
});

async function fetchLogDetail() {
  if (!data.value?.row?.id) return;

  try {
    loading.value = true;
    const res = await getLogDetailApi({
      id: data.value.row.id,
    });
    logDetail.value = res;
  } catch (error) {
    console.error('获取日志详情失败', error);
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <Modal :title="getTitle">
    <div v-loading="loading" class="p-4">
      <el-descriptions v-if="logDetail" :column="2" border class="mb-4">
        <el-descriptions-item label="流水号">
          {{ logDetail.id }}
        </el-descriptions-item>
        <el-descriptions-item label="方法名">
          {{ logDetail.method }}
        </el-descriptions-item>
        <el-descriptions-item label="终端">
          {{ logDetail.terminal }}
        </el-descriptions-item>
        <el-descriptions-item label="IP地址">
          {{ logDetail.ip }}
        </el-descriptions-item>
        <el-descriptions-item label="执行时间(ms)">
          {{ logDetail.extime }}
        </el-descriptions-item>
        <el-descriptions-item label="账号">
          {{ logDetail.account }}
        </el-descriptions-item>
        <el-descriptions-item label="生成时间">
          {{ logDetail.createtime }}
        </el-descriptions-item>
        <el-descriptions-item label="模式">
          {{ logDetail.mode }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">请求地址</el-divider>
      <el-input
        type="textarea"
        :model-value="logDetail?.url || ''"
        :rows="2"
        readonly
        class="mb-4"
      />

      <el-divider content-position="left">接收内容</el-divider>
      <el-input
        type="textarea"
        :model-value="logDetail?.sendcontent || ''"
        :rows="8"
        readonly
        class="mb-4"
      />

      <el-divider content-position="left">返回内容</el-divider>
      <el-input
        type="textarea"
        :model-value="logDetail?.getcontent || ''"
        :rows="8"
        readonly
      />
    </div>
  </Modal>
</template>
