<template>
    <div class="pre-view" v-if="preView">
        <span style="color: var(--uosai-color-shortcut);">{{ index }}. </span>
        <el-tooltip popper-class="uos-tooltip" effect="light" :show-arrow="false" :enterable="false"
        :show-after="1000" :offset="2" :content="filePath">
            <span class="linkText" @click="openPreView">{{ filePath }}</span>
        </el-tooltip>
    </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { useGlobalStore } from "@/store/global";
import { Qrequest } from "@/utils";
import _ from "lodash";
import { useRouter } from "vue-router";
import { useIntervalFn } from '@vueuse/core'
const { chatQWeb, updateActivityColor, updateTheme, updateFont } = useGlobalStore()

const filePath = computed ( () => {
    return handleFileName(props.preView.docPath)
})

const index = computed ( () => {
    return props.index + 1
})

//去除前缀和后缀显示文件名
const handleFileName = (docPath) => {
    return docPath.substring(docPath.lastIndexOf('/') + 1).replace(/\.md$/i, "")  //只删除md后缀
}

const openPreView = async () => {
    /**
     * TODO:调用后端接口，打开预览界面
     */
     Qrequest(chatQWeb.previewRefDoc, props.preView.docPath, props.preView.docContents)
}


const props = defineProps(['preView','index'])
</script>

<style lang="scss" scoped>

.pre-view{
    margin-top: 5px;
    max-width: 100%;
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis;/* 超出部分显示省略号 */
    overflow: hidden;/* 超出部分不显示 */
    color: var(--activityColor);

    .linkText {
        font-size: 0.93rem;
        color: var(--activityColor);
        cursor: pointer;
    }
 }
</style>