xiaoshu/src/components/answer-effect/RefferenceFlag.vue

<template>
    <span class="refference-container">
        <a-popover>
            <span class="circle"></span>

            <template #title></template>
            <template #content>
                <div class="refference-content">
                    <AsideImage :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" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose :data-flag="'doc-ref-effect-contaienr'" :footer="false">
            <template #title>
                {{doc_name}}
            </template>

            <PDFViewer :url="pdf_url" :doc_width="DOC_WIDTH" :positions="positions"/>
        </a-drawer>
    </span>
</template>
<script setup>
import { defineComponent, inject, ref, useTemplateRef } from "vue";

import PDFViewer from '../pdf-viewer/PDFViewer.vue';

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

import {getDocumentUrl, getImageUrl} from '../../ajax/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);

const handleClick = () => {
    const doc_nm = props.doc_name;

    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;
}
</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;
}
</style>