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

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

const data = ref();

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { values } = modalApi.getData<Record<string, any>>();
      if (values) {
        data.value = values;
      }
    }
  },
});
// 格式化内容，将换行符转换为<br>
const formatContent = (content) => {
  return content ? content.replaceAll('\n', '<br>') : '';
};
</script>
<template>
  <Modal v-if="data" :title="`${data.desc}-${data.end_txt}-协议详情`" class="w-[60%]">

    <div
      class="rounded-lg bg-gray-50 p-4 transition-colors dark:bg-gray-700"
    >
      <div
        class="prose prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
        v-html="formatContent(data.content)"
      ></div>
    </div>
  </Modal>
</template>
