<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ref,reactive, onMounted} from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { ElMessage,ElMessageBox, ElLoading } from 'element-plus';
import {apiGetPDFDetail} from '@/api/report.js';
import {apiUserInfo} from '@/api/user.js';
import {useStore} from "vuex"

const store = useStore()
const route = useRoute();
const router = useRouter()
let LOADING = null
const pdfState = reactive({
    pdf_id:Number(route.query.pdf_id)||0,
    pdf_url:'',
    pdf_name:''
})
let showHint = ref(false)
let hasRight = ref(true)
let hintText = ref('')
const loadingFailed = ()=>{
    LOADING.close()
    ElMessage.error('加载PDF失败!')
    showHint.value = true
}
const loadedPDF=()=>{
    LOADING.close()
    showHint.value = false
    hintText.value = ''
}
const getPDFDetail = (pdf_id)=>{
    if(!pdf_id){
        ElMessage.error('未找到PDF')
        hintText.value="获取PDF失败"
        LOADING&&LOADING.close()
        return
    }
    apiGetPDFDetail({pdf_id}).then(res=>{
        if(res.code!==200) return 
        pdfState.pdf_url = res.data.pdf_url
        pdfState.pdf_name = res.data.pdf_name
        handleDataToXcx()
    })
}
// 向小程序发送数据
const handleDataToXcx=()=>{
  const postData={
    path:'/pages-report/previewPDF',
    params:{
        pdf_id:Number(route.query.pdf_id)||0,
    },
    title:pdfState.pdf_name||'',
    shareImg:'https://hzstatic.hzinsights.com/static/images/yb/report_pdf_share_cover.png'
  }
  wx.miniProgram.postMessage({ data: postData })
}

//检查权限
const checkRight = async()=>{
    const res = await apiUserInfo()
    if(res.code!==200) return 
    if(['试用','正式','永续'].includes(res.data.status)){
        hasRight.value = true
    }else{
        LOADING&&LOADING.close()
        hasRight.value = false
    }
}
//申请
const handleApply = ()=>{
    //判断用户是否登录
    if(store.state.userInfo.is_bind===0){
        ElMessageBox({
            title:`温馨提示`,
            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
            dangerouslyUseHTMLString: true,
            center: true,
            confirmButtonText:'去登录',
            confirmButtonClass:'self-elmessage-confirm-btn',
            showCancelButton:true,
            cancelButtonText:'取消',
            cancelButtonClass:'self-elmessage-cancel-btn'
        }).then(res=>{
            wx.miniProgram.reLaunch({url:'/pages/login'})
        }).catch(()=>{})
        return
    }
    router.push({
        path:'/apply/permission',
        query:{
            source:4,
            fromPage:'PDF报告'
        }
    })

}
onMounted(async ()=>{
    LOADING = ElLoading.service({
        target:'.preview-pdf-wrap',
        text:'正在加载PDF'
    })
    await checkRight()
    getPDFDetail(Number(route.query.pdf_id))
    //handleDataToXcx()
})
</script>

<template>
    <div class="preview-pdf-wrap">
        <!-- 无权限 -->
        <template v-if="!hasRight">
            <div class="no-data-wrap">
                <img src="@/assets/pricedriven/nodata.png" alt="">
                <p>您暂无权限查看报告</p>
                <p>若想查看请申请开通</p>
                <span class="global-main-btn btn" @click="handleApply">立即申请</span>
            </div>
        </template>
        <template v-else-if="pdfState.pdf_url.length">
            <vue-pdf-embed :source="pdfState.pdf_url" @loading-failed="loadingFailed" @loaded="loadedPDF"/>
            <p v-if="showHint" class="hint">加载PDF失败!</p>
        </template>
        <template v-else>
            <p class="hint">{{hintText}}</p>
        </template>
        
    </div>
</template>

<style lang="scss" scoped>
.preview-pdf-wrap{
    .hint{
        margin-top: 100px;
        text-align: center;
        color:#999;
    }
    .no-data-wrap{
        text-align: center;
        .btn{
            display: inline-block;
            width:218px;
        }
    }
}
</style>