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

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

import { Descriptions } from 'ant-design-vue';

import { Icon } from '#/components/icon';
import { getIcon } from '#/util/tool';
import {
  getApiOpLogOperatorLabel,
  getApiOpLogPlatformLabel,
} from '../config/platform';



const gridApi = ref();
const data = ref({});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (isOpen) {
      const { values } = modalApi.getData<Record<string, any>>();
      if (values) {
        data.value = values;
      }
    }
  },
});
</script>

<template>
  <Modal class="w-[80%] h-[80%]" title="Api访问日志详情">
    <div class="flex flex-col gap-4">
      <Descriptions
        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
        bordered
      >
        <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
        <Descriptions.Item label="操作人员">
          <span>{{ getApiOpLogOperatorLabel(data) }}</span>
        </Descriptions.Item>
        <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
        <Descriptions.Item label="请求方式">
          <span v-if="data.method === 1">GET</span>
          <span v-else-if="data.method === 2">POST</span>
          <span v-else>未知</span>
        </Descriptions.Item>
        <Descriptions.Item label="控制器">
          {{ data.controller }}
        </Descriptions.Item>
        <Descriptions.Item label="IP">
          IP地址：{{ data.ip }}
          <p>归属地：{{data.ip_address}}</p>
        </Descriptions.Item>
        <Descriptions.Item label="类型">
          {{ data.type === 0 ? '访问成功' : '访问失败' }}
        </Descriptions.Item>
        <Descriptions.Item label="返回结果代码">
          {{ data.result_code }}
        </Descriptions.Item>
        <Descriptions.Item label="接口来源">
          <span>{{ getApiOpLogPlatformLabel(data.platform_type) }}</span>
        </Descriptions.Item>
        <Descriptions.Item label="设备">
          <Icon :icon="getIcon(data.equipment)" :size="20" />
          {{ data.equipment }}
        </Descriptions.Item>
        <Descriptions.Item label="浏览器">
          <Icon :icon="getIcon(data.browser)" :size="20" />
          {{ data.browser }}
        </Descriptions.Item>
        <Descriptions.Item label="所属平台">
          {{ data.platform?.name || '未绑定' }}
        </Descriptions.Item>
        <Descriptions.Item label="访问时间">
          {{ data.created_at }}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
        bordered
      >
        <Descriptions.Item label="参数">
          <pre>{{ JSON.parse(data.param) }}</pre>
        </Descriptions.Item>
        <Descriptions.Item label="结果">
          <pre>{{ JSON.parse(data.result) }}</pre>
        </Descriptions.Item>
      </Descriptions>
    </div>
  </Modal>
</template>

<style scoped>
.ant-descriptions-item-label {
  font-weight: bold;
}

pre {
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
}
</style>
