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

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

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



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%]" title="Api访问日志详情">
    <div class="flex flex-col gap-4">
      <Descriptions
        :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
        bordered
      >
        <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
        <Descriptions.Item label="用户ID">{{ data.user_id }}</Descriptions.Item>
        <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
        <Descriptions.Item label="IP">{{ data.ip === '127.0.0.1' ? '本地' : data.ip }}</Descriptions.Item>
        <Descriptions.Item label="参数">
          <pre>{{ JSON.parse(JSON.parse(data.param)) }}</pre>
        </Descriptions.Item>
        <Descriptions.Item label="结果">
          <pre>{{ JSON.parse(JSON.parse(data.result)) }}</pre>
        </Descriptions.Item>
        <Descriptions.Item label="类型">{{ data.type === 0 ? '访问成功' : '访问失败' }}</Descriptions.Item>
        <Descriptions.Item label="返回结果代码">
          {{ data.result_code }}
        </Descriptions.Item>
        <Descriptions.Item label="平台类型">
          {{ data.platform_type === 0 ? '平台' : '诊所' }}
        </Descriptions.Item>
        <Descriptions.Item label="平台">
          {{ data.platform_id === 0 ? '萧康医药' : data?.old_admin?.username || '获取失败' }}
        </Descriptions.Item>
        <Descriptions.Item label="设备">{{ data.equipment }}</Descriptions.Item>
        <Descriptions.Item label="浏览器">{{ data.browser }}</Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {{ data.created_at }}
        </Descriptions.Item>
        <Descriptions.Item label="管理员名称">
          {{ data?.old_admin?.username || '获取失败' }}
        </Descriptions.Item>
      </Descriptions>
    </div>
  </Modal>
</template>

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

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