smartai2dian0/src/modules/answer-refference/RefferenceFlag.vue

<template>
  <span class="refference-container">
    <a-popover :content-style="{ width: '500px', maxWidth: '500px' }">
      <span class="refference-flag-circle"></span>

      <template #title></template>
      <template #content>
        <div class="refference-content">
          <AsideImage v-if="img_url" :src="img_url" />

          <div class="refference-description">
            <div class="ref-text-content">
              {{ text }}
            </div>

            <FileNameDisplay @click="handleClick" :file_name="doc_name" :file_id="doc_id" />
          </div>
        </div>
      </template>
    </a-popover>

    <a-drawer
      ref="drawer"
      :width="DOC_WIDTH + 20"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
      :data-flag="'doc-ref-effect-contaienr'"
      :footer="false"
    >
      <template #title>
        {{ doc_name }}
      </template>

      <ViewerPDFFromUrl v-if="doc_type === 'pdf'" :url="pdf_url" :doc_width="DOC_WIDTH" :positions="positions" />
      <ViewerDocxFromUrl v-if="doc_type === 'doc'" :url="pdf_url" :doc_width="DOC_WIDTH" :positions="positions" />
    </a-drawer>
  </span>
</template>
<script setup>
import { defineComponent, inject, ref, useTemplateRef, onMounted, computed } from 'vue';

import ViewerPDFFromUrl from '../viewer-pdf/ViewerPDFFromUrl.vue';
import ViewerDocxFromUrl from '../viewer-docx/ViewerDocxFromUrl.vue';

import AsideImage from './AsideImage.vue';
import FileNameDisplay from '../file-name/FileNameDisplay.vue';

import { getDocumentUrl, getImageUrl } from './document';

/**
 * 此页面可能用到的文档
 * @see https://arco.design/vue/component/popover
 */

const props = defineProps({
  img: String, // 图片链接
  image_id: String,
  text: String, // 文本地址
  doc_id: String,
  doc_name: String,
  positions: Array
});

const DOC_WIDTH = window.innerWidth / 2;

const pdf_url = getDocumentUrl(props.doc_id);
const img_url = getImageUrl(props.image_id);

const visible = ref(false);

/**
 * 文档类别：doc/pdf
 */
const doc_type = computed(() => {
  const doc_name = props.doc_name;

  if (!doc_name) {
    return '';
  }

  const arr = doc_name.split('.');
  const len = arr.length;
  const end_fix = arr[len - 1];

  if (end_fix === 'pdf') {
    return 'pdf';
  }

  if (end_fix === 'docx' || end_fix === 'doc') {
    return 'doc';
  }

  return '';
});

const handleClick = () => {
  // console.log('点击事件触发');
  const doc_nm = props.doc_name;
  // console.log('点击事件触发', doc_nm);

  if (doc_type.value === 'doc' || doc_type.value === 'pdf') {
    visible.value = true;
  } else {
  }

  // if (doc_nm && doc_nm.indexOf('.pdf') === doc_nm.length - 4) {
  //   visible.value = true;
  // } else {
  // }
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

onMounted(() => {
  // console.log(props.img, props.image_id, props.text, props.doc_id, props.doc_name, '--->>>>>');
});
</script>

<style scoped>
.refference-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.refference-description {
  flex-grow: 1;
}

.ref-text-content {
  max-width: 460px;
  max-height: 340px;
  overflow-y: auto;
}
</style>
<style>
.arco-drawer-container[data-flag='doc-ref-effect-contaienr'] .arco-drawer-body {
  overflow: hidden;
  padding: 0;
}
</style>