<template>
    <div class="smart-report-detail">
        <div class="main-box">
            <div class="top-box">
                <div class="title">{{reportInfo&&reportInfo.Title}}</div>
                <div class="flex">
                    <span>{{reportInfo&&reportInfo.Author}}</span>
                    <span>{{reportInfo&&reportInfo.PublishTime}}</span>
                </div>
            </div>
            <div class="html-wrap" v-html="content"></div>
        </div>
        <div class="right-opt-box" v-if="$route.query.type!=='preview'">
            <div 
                class="item copy" 
                v-if="linkUrl" 
                :data-clipboard-text='linkUrl' 
                @click="copyHandle"
                v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_copyWechat"
            >
                <img src="~@/assets/img/icons/cop.png" alt="" style="width:30px;height:30px;marginRight:10px;">
                <span>复制链接</span>
            </div>
            <div 
                class="item wechat-item" 
                v-if="linkUrl"
                v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_copyWechat"
            >
                <img src="~@/assets/img/icons/wechat.png" alt="" style="width:30px;height:30px;marginRight:10px;">
                <span>微信分享</span>
                <vue-qr 
                    :text="linkUrl" 
                    :margin="0" 
                    colorDark="#333" 
                    colorLight="#fff" 
                    :dotScale="1" 
                    :size="100" 
                    class="qrcode"
                ></vue-qr>
            </div>
            <div class="item" @click="handleGetReportImg" v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg">
                <img src="~@/assets/img/smartReport/icon16.png" alt="" style="width:30px;height:30px;marginRight:10px;">
                <span>导&nbsp;&nbsp;图</span>
            </div>
        </div>

        <!-- 报告图片 -->
        <div class="report-img-box" v-if="showReportImg&&reportImgUrl" @click="showReportImg=false">
            <img :src="reportImgUrl" alt="" @click.stop="">
        </div>
    </div>
</template>

<script>
import {apiSmartReport}  from '@/api/modules/smartReport'
import vueQr from 'vue-qr'
export default {
    computed: {
		linkUrl(){
			let str=''
			const baseUrl= localStorage.getItem('dynamicOutLinks') ? JSON.parse(localStorage.getItem('dynamicOutLinks')).ReportViewUrl : '';
			if(this.$route.query.code){
				str=`${baseUrl}/reportshare_smart_report?code=${this.$route.query.code}`
			}
			return str
		}
	},
    data() {
        return {
            reportInfo:null,
            content:'',
            reportImgUrl:'',
            showReportImg:false
        }
    },
    created() {
        this.getReportDetail()
    },
    methods: {
        // 获取报告详情
        getReportDetail(){
            const id=this.$route.query.id||0
            if(!id) return
            apiSmartReport.reportDetail({
                SmartReportId:Number(id)
            }).then(res=>{
                if(res.Ret===200){
                    this.reportInfo=res.Data
                    if(this.$route.query.type==='preview'){
                       this.content=sessionStorage.getItem('smartReportContent')
                    }else{
                        this.content=res.Data.Content
                    }
                }
            })
        },

        /* 复制链接 */
		copyHandle() {
				var clipboard = new this.Clipboard('.copy')
				clipboard.on('success', e => {
					this.$message.success('复制链接成功')
					e.clearSelection() // 释放内存
					clipboard.destroy()
				})
				// // 浏览器不支持
				clipboard.on('error', e => {
					this.$message.warning('浏览器暂不支持')
					// 释放内存
					clipboard.destroy()
				})
		},

        handleGetReportImg(){
            // if(this.reportImgUrl){
            //     this.showReportImg=true
            //     return
            // }
            apiSmartReport.getReportImg({
                SmartReportId:Number(this.$route.query.id)
            }).then(res=>{
                if(res.Ret===200){
                    // this.reportImgUrl=res.Data
                    // this.showReportImg=true
                    // 改为直接下载图片不是展示
                    this.saveImg(res.Data)
                }else{
                    if(res.Ret!==403){
                        this.$message.warning(res.Msg)
                    }
                }
            })
        },

        saveImg(imgUrl){
            let img=new Image()
            img.setAttribute('crossOrigin', 'anonymous');
            img.src=imgUrl
            img.onload=()=>{
                let canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                let context = canvas.getContext('2d');
                context.drawImage(img, 0, 0, img.width, img.height);
                let dataURL = canvas.toDataURL("image/png", 1);
                const a=document.createElement('a')
                a.setAttribute("download",this.reportInfo.Title)
                a.style.display = "none"
                a.href=dataURL
                document.body.appendChild(a);
                a.click()
            }
            img.onerror=(e)=>{
                console.log(e);
                this.$message.warning("自动下载图片失败，请手动保存")
                if(imgUrl){
                    this.reportImgUrl=imgUrl
                    this.showReportImg=true
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.smart-report-detail{
    .right-opt-box{
            position: fixed;
            top: 100px;
            left: calc(50% + 450px);
            .item{
                display: flex;
                align-items: center;
                cursor: pointer;
                margin-bottom: 20px;
                position: relative;
                .qrcode{
                    position: absolute;
                    left: 110%;
                    display: none !important;
                    z-index: 9;
                }
            }
            .wechat-item{
                &:hover{
                    .qrcode{
                        display: inline-block !important;
                    }
                }
            }
    }
    .main-box{
        width: 800px;
        margin: 0 auto;
        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        .top-box{
            width: 100%;
            height: 160px;
            background-image: url('~@/assets/img/smartReport/bg01.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            padding: 40px;
            color: #fff;
            .title{
                font-size: 20px;
                margin-bottom: 20px;
            }
            .flex{
                display: flex;
                justify-content: space-between;
            }
        }
        .html-wrap{
            padding: 30px;
        }
    }
    .report-img-box{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
        background: rgba($color: #000000, $alpha: 0.6);
        text-align: center;
        img{
            max-width: 800px;
        }
    }
}
</style>