<script setup name="ReportPreview">
import { ref,computed, nextTick, reactive,toRefs } from 'vue'
import { useRoute, useRouter } from "vue-router";
import {reportExternalInterface} from '@/api/reportExternal'
import { showToast,FloatingPanel,FloatingBubble  } from 'vant'
import { copyText } from 'vue3-clipboard'
import PreViewFile from './components/PreviewFile.vue'
import {usePublicSettingStore} from '@/store/modules/publicSetting'


const route=useRoute()
const router=useRouter()

const publicSettingStore = usePublicSettingStore()

const fileLen = computed(() => {
    return reportInfo.value?.AttachmentList.length
})

const totalSize = computed(() => {
    let size = 0;
    if(attachmentsList.value.length) {
        attachmentsList.value.forEach(item => {
            size +=item.FileSize
        })
    }
    return size
})

// 获取报告详情
const reportInfo=ref(null)
const attachmentsList = ref([])
async function getReportDetail(){
    const res=await reportExternalInterface.getDocDetail({ OutsideReportId: Number(route.query.id) })
    if(res.Ret===200){
        reportInfo.value=res.Data
        document.title=res.Data.Title
        attachmentsList.value = res.Data.AttachmentList || []
    }
}
getReportDetail()

const isShowPreview = ref(false)
const previewUrl = ref('')
function handlePreviewAttachment(row) {
    // previewUrl.value = row.Url;
    // isShowPreview.value = true
    // // 预览文件
    let href;
    if(row.Url.endsWith('.doc') || row.Url.endsWith('.docx')||row.Url.endsWith('.xlsx')){
        href = 'https://view.officeapps.live.com/op/view.aspx?src='+row.Url
    }else{
        href=row.Url
    }
    window.open(href, "_blank")
}


const linkUrl = computed(() => {
    let str=''
    const baseUrl= publicSettingStore.publicSetting.ReportViewUrl;

    str= `${baseUrl}/reportshare_external?code=${reportInfo.value.ReportCode}&flag=& ${reportInfo.value.Title}`
    
    return str
})
function handleCopyLink() {
    copyText(linkUrl.value,undefined,(error,event)=>{
        if(error){
            showToast('复制链接成功')

            throw new Error('复制数据失败'+JSON.stringify(error))
        }else{
            showToast('复制链接成功')
        }
    })
}


const configAnchors = [
    140,
    Math.round(0.7 * window.innerHeight),
]
const panelHeight = ref(configAnchors[0])


function formatSize(size) {
    if (size >= 1024 * 1024) { // 超过1MB
        return (size / (1024 * 1024)).toFixed(2) + ' MB';
    } else if (size >= 1024) { // 超过1KB
        return (size / 1024).toFixed(2) + ' KB';
    } else {
        return size + ' B'; // 小于1KB
    }
}


function getFileIcon(name) {
    let fileName=name.toLocaleLowerCase()
    if(fileName.endsWith('.pdf')){
        return 'file_pdf'
    }else if(fileName.endsWith('.xlsx')){
        return 'file_xlsx'
    }else if(fileName.endsWith('.png') || fileName.endsWith('.jpg')){
        return 'file_img'
    }else if(fileName.endsWith('.doc') || fileName.endsWith('.docx')){
        return 'file_doc'
    }else {
         return 'file_img'
    }
}
</script>
<template>
    <div class="report-detail-page" v-if="reportInfo">
        <h1 class="report-title">{{reportInfo.Title}}</h1>
        <div class="auth-box">
            <span><!-- {{reportInfo.SysUserName}} --></span>
            <span>{{reportInfo.CreateTime}}</span>
        </div>
        
        <div class="report-abstract" v-if="reportInfo.Abstract">摘要：{{reportInfo.Abstract}}</div>
        <div class="report-html-wrap report-external-html" v-html="reportInfo.Content" v-if="reportInfo.Content"></div>
        
    </div>
    <van-floating-panel 
        :content-draggable="false" 
        v-if="fileLen" 
        v-model:height="panelHeight" 
        :anchors="configAnchors"
    >
        <div class="attachments-wrapper">
            <div>
                <svg-icon name="link_ico" size="20px"></svg-icon>
                附件{{fileLen}}个({{formatSize(totalSize)}})
            </div>

            <ul class="list-cont">
                <li class="item" v-for="(item,index) in attachmentsList" :key="index" @click="handlePreviewAttachment(item)">
                    <svg-icon class="file-ico" :name="getFileIcon(item.Title)"></svg-icon>
                    <div class="right-info">
                        <p class="van-ellipsis file-name">{{item.Title}}</p>
                        <span style="color:#999">{{formatSize(item.FileSize)}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </van-floating-panel>

    <van-floating-bubble 
        icon="share" 
        gap="10"
        @click="handleCopyLink"
    />

    <van-back-top bottom="80" right="10" z-index="9999"/>

    <!-- 预览-->
    <van-popup
        v-model:show="isShowPreview"
        position="bottom"
        closeable
        :style="{ height: '100%' }"
    >
        <PreViewFile v-if="isShowPreview" :url="previewUrl"/>
    </van-popup>
    
</template>

<style lang="scss" scoped>
.report-detail-page{
    padding: 30px 34px;
    margin-bottom: 260px;
    position: relative;
    z-index: -1;
    .report-title{
        margin: 30px 0;
        font-weight: 600;
        font-size: 42px;
        line-height: 56px;
    }
    .auth-box{
        display: flex;
        justify-content: space-between;
        font-size: $font-grey;
        font-size: 36px;
        padding-bottom: 40px;
    }
    .report-abstract{
        font-size: 34px;
        line-height: 54px;
        margin: 40px 0;
    }
    .audio-box{
        margin: 40px 0;
    }

}
.van-floating-panel{
    box-shadow: 0 -4px 8px rgba($color: #000000, $alpha: 0.2);
}
.attachments-wrapper {
    padding:20px 30px;
    .list-cont {
        margin-top: 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap:20px;
        .item{
            width: 100%;
            display: flex;
            border: 1px solid #dcdcdc;
            padding: 15px 30px;
            border-radius: 8px;
            overflow: hidden;
            .file-ico {
                margin-right: 20px;
                /* font-size: 40px; */
                width: 80px;
                height: 80px;
                flex-shrink: 0;
            }
            .file-name {
                margin-bottom: 10px;
                max-width: 500px;
            }

        }
    }
}

@media screen and (min-width:$media-width){
    .report-detail-page{
        max-width: 800px;
        margin: 0 auto 110px;
        padding: 30px;
        .report-title{
            margin: 15px 0;
            font-size: 21px;
            line-height: 28px;
        }
        .auth-box{
            font-size: 18px;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .report-abstract{
            font-size: 17px;
            line-height: 27px;
            margin: 20px 0;
        }

    }
    .attachments-wrapper {
        padding:20px 30px;
        .list-cont {
            .item{
                max-width: 45%;
                padding: 10px 30px;
                border-radius: 4px;
                .file-ico {
                    margin-right: 10px;
                    width: 45px;
                    height: 45px;
                }
                .file-name {
                    margin-bottom: 10px;
                    max-width: 250px;
                }

            }
        }
    }
}
</style>