<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { formatToDateTime } from '@/utils/dateUtil'
import { JsonEditor } from '@/components/JsonEditor'
defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})

const menu = ref<DescriptionsSchema[]>([
  {
    field: 'id',
    label: 'ID'
  },
  {
    field: 'admin_id',
    label: '管理员ID'
  },
  {
    field: 'admin_name',
    label: '账户名称'
  },
  {
    field: 'ip',
    label: 'IP地址'
  },
  {
    field: 'path',
    label: '链接',
    span: 24,
    slots: {
      default: (row: any) => {
        return (
          <>
            [{row.method}]{row.path}
          </>
        )
      }
    }
  },
  {
    field: 'type',
    label: '类型'
  },
  {
    field: 'type',
    label: '操作时间',
    width: 170,
    slots: {
      default: (data: any) => {
        return <>{formatToDateTime(data.add_time * 1000)}</>
      }
    }
  },
  {
    field: 'params',
    label: '请求参数',
    width: 170,
    span: 24,
    slots: {
      default: (data: any) => {
        return (
          <>
            <JsonEditor editable={false} v-model={data.params} />
          </>
        )
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="menu" :data="currentRow || {}" />
</template>
