<template>
	<div id="reportdtl" v-if="isshow">
		<header>{{reportInfo.Title}}</header>
		<div style="padding:0 35px 0; box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
		  <span>{{$route.query.fromPage=='strategyReport'?'Horizon Insights FICC Team':reportInfo.Author}}</span>
		  <span style="float:right;">{{reportInfo.PublishTime}}</span>
		</div>
		
		<!-- 英文版摘要+overview -->
		<div id="abstract-en" v-if="$route.query.fromPage=='en'">
			<div 
				class="abstract" 
				:style="{borderBottom:reportInfo.Overview?'1px solid #C1C1C1':'none',paddingBottom:reportInfo.Overview?'20px':'0'}"
			>
				<div>Abstract:{{reportInfo.Abstract}}</div>
			</div>
			<div id="overview" v-if="reportInfo.KeyTakeaways" :style="{borderBottom:reportInfo.Overview?'1px solid #C1C1C1':'none',paddingBottom:reportInfo.Overview?'20px':'0'}">
				<p style="margin-bottom:20px;"><strong>KeyTakeaways:</strong></p>
				<div class="overview" style="overflow:hidden;" v-html="reportInfo.KeyTakeaways"></div>
			</div>
			<div id="overview" v-if="reportInfo.Overview">
				<p style="margin-bottom:20px;"><strong>Overview:</strong></p>
				<div class="overview" style="overflow:hidden;" v-html="reportInfo.Overview"></div>
			</div>
			
		</div>
		<div id="abstract" v-else-if="$route.query.fromPage=='strategyReport'">
			<div>
				<div>Abstract：<span v-html="reportInfo.Abstract"></span></div>
				<div>Key Takeaways：<span v-html="reportInfo.KeyTakeaways"></span></div>
			</div>
		</div>
		<div id="abstract" v-else>
		  <div>{{$route.query.fromPage=='en'?'Abstract':'摘要'}}：{{reportInfo.Abstract}}</div>
		</div>
		<div id="resetsty" style="padding:30px; box-sizing:border-box; overflow:hidden;">
			<block v-if="reportInfo.ChapterType=='day'||reportInfo.ChapterType=='week'">
				<div class="chapter-item" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
					<div style="margin-bottom:10px">
						<span class="type">{{item.TypeName}}</span>
						<span class="title">{{item.Title}}</span>
					</div>
					<div id="resetcss" style="overflow:hidden;" v-html="item.Content"></div>
				</div>
			</block>
			<block v-else>
				<div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
			</block>
		</div>
		<div v-if="linkUrl" style="width:100px;height30px;position:absolute;right:-100px;top:100px;cursor:pointer;">
			<div style="display:flex;alignItems:center;color:#333;" :data-clipboard-text='linkUrl' @click="copyHandle" class="copy">
				<img src="../../assets/img/icons/cop.png" alt="" style="width:30px;height:30px;marginRight:10px;">复制链接
			</div>
			<div style="display:flex;alignItems:center;color:#333;marginTop:20px;"  @mouseenter="isShowCode=true" @mouseleave="isShowCode=false">
				<img src="../../assets/img/icons/wechat.png" alt="" style="width:30px;height:30px;marginRight:10px;">微信分享
			</div>
			<vue-qr :text="linkUrl" :margin="0" colorDark="#333" colorLight="#fff" :dotScale="1" :size="100" style="position:absolute;right:0;top:100px;" v-if="isShowCode"></vue-qr>
		</div>
	</div>
</template>

<script>
	import { reportdetail } from 'api/api.js';
	import http from '@/api/http.js';
	import * as reportEnInterface from '@/api/modules/reportEnApi';
	import {strategyReportInterence} from '@/api/api.js'
	import vueQr from 'vue-qr'
	export default {
		computed: {
			linkUrl(){
				let str=''
				const baseUrl=process.env.NODE_ENV === "production"?'https://ficc.hzinsights.com':'http://rddpweb.brilliantstart.cn'
				if(this.$route.query.code){
					if(this.$route.query.fromPage == 'en'){
						str=`${baseUrl}/reportshare_crm_report_en?code=${this.$route.query.code}`
					}else{
						str=`${baseUrl}/reportshare_crm_report?code=${this.$route.query.code}`
					}
				}
				
				return str
			}
		},
		data() {
			return {
				id:parseInt(this.$route.query.id),
				isshow:false,
				reportInfo:{},
				isShowCode:false,
				// linkUrl:this.$route.query.code?'https://share.hzinsights.com/reportdtl?code='+this.$route.query.code:''
			}
		},
		components: {
			vueQr
		},
		mounted() {
			if(this.$route.query.id) {
				this.getreportdetail();
			}else {
				let reportdtl=sessionStorage.getItem('reportdtl') || false;
				this.reportInfo=JSON.parse(reportdtl);
				console.info("reportInfo");
				console.log(this.reportInfo);
				this.isshow=true;
			}
		},
		updated(){
		  $('#resetcss').find('img').css({display:'block',margin:'0 auto'});
		  $('#resetcss').find('video').css({display:'block',margin:'0 auto'});
			$("#resetcss").find("pre").css({display: "block",whiteSpace: "pre-wrap"});
		},
		methods: {
			async getreportdetail(){
				let res
				if(this.$route.query.fromPage == 'en'){
					res=await reportEnInterface.reportDetail({ReportId:parseInt(this.id)})
				}else if(this.$route.query.fromPage == 'strategyReport'){
					res=await strategyReportInterence.getReportDetail({Id:parseInt(this.id)})
				}else{
					res=await reportdetail({ReportId:parseInt(this.id)})
				}

				if( res.Ret!==200 )return

				this.reportInfo=res.Data;
				this.isshow=true;
		},
			/* 复制链接 */
			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()
				})
			}
		},
		components:{},
		watch:{}
	}
</script>

<style lang="scss">
	#reportdtl{ background:#fff;  max-width:1200px; margin:10px auto;position:relative;
		img{ display:'block'; width:'100%'; margin:'0 auto'; }
		header{ padding:10px 30px; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; }
		#abstract{ padding:10px 30px 0; box-sizing:border-box; font-size:22px; line-height:36px;
		  >div{ padding:10px 20px; box-sizing:border-box; background:rgba(20,121,253,0.1); color:#4099ef; border-radius:10px; }
		}
		#resetsty{ 
			img{ display:block; max-width:100%; height:auto; margin:0 auto; }
		}
		table{ border-top:1px solid #eaeaea; border-left:1px solid #eaeaea; border-collapse:collapse; 
			th,td{ border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:5px 10px; box-sizing:border-box; }
		}

		.chapter-item{
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #ccc;
			.type{
				font-size: 15px;
				color: #fff;
				padding: 5px 10px;
				background-color: #E6A23C;
				border-radius: 4px;
			}
			.title{
				font-size: 15px;
				margin-left: 10px;
				font-weight: bold;
			}
		}
    #abstract-en{
      margin:35px 35px;
      padding:20px;
      background-color: rgba(77, 130, 191, 0.1);
      border: 1px solid #E2E2E2;
      .abstract{
        font-size: 24px;
        font-weight: 600;
        padding-bottom: 20px;
        border-bottom: 1px solid #C1C1C1;
      }
      #overview{
        margin-top:20px;
        font-size: 24px;
        .overview{
          margin-top:20px;
          font-size: 18px;
        }
      }
    }
		#resetcss{
			ul,ol,li,p{
				font-size: 18px !important;
				line-height: 26px !important;
			}
			span{
				font-size: 18px !important;
			}
			ul,ol {
				list-style-position: inside !important;
			}
		}
	}
</style>
