<!-- 详情弹窗 -->
<template>
  <ele-modal title="详情" :width="720" v-model="visible">
    <el-descriptions
      v-if="data"
      :border="true"
      :column="mobile ? 1 : 2"
      class="detail-table"
    >
      <el-descriptions-item label="操作人">
        <div>{{ data.contextId }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="地址">
        <div>{{ data.location }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="操作描述">
        <div>{{ data.description }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="操作时间">
        <div>{{ data.createTime }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="事件" :span="2">
        <div style="word-break: break-all">{{ data.event }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="数据" :span="2">
        <monaco-editor
          v-model="previewData"
          language="json"
          style="height: 460px"
        />
      </el-descriptions-item>
    </el-descriptions>
  </ele-modal>
</template>

<script lang="ts" setup>
  import type { OperationRecord } from '@/api/system/operation-record/model';
  import { useMobile } from '@/utils/use-mobile';
  import MonacoEditor from '@/components/MonacoEditor/index.vue';
  import { formatJson } from '@/utils/common';
  import { computed } from 'vue';

  const props = defineProps<{
    /** 修改回显的数据 */
    data: OperationRecord;
  }>();
  const previewData = computed(() => {
    return formatJson(props.data.data);
  });

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 是否是移动端 */
  const { mobile } = useMobile();
</script>

<style lang="scss" scoped>
  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
    width: 88px;
    text-align: right;
    font-weight: normal;
  }

  .detail-table :deep(.el-descriptions__content > div) {
    max-height: 100%;
  }
</style>
