<template>
	<div class="detail-container">
		<template  v-if="pageitem.length">
			<div id="pptdtl">
				<div id="PageIndex">
					<img :src="bg" class="pptbg"/>
					<div style="width:62%; font-size:16px; text-align:center; line-height:1.6; color:#fff; position:absolute; right:20px; top:50%;zIndex:20;">
						<p style="height:5px; border-top:1px solid #fff;marginBottom:21px;"></p>
						<p style="font-size:28px;">{{firstform.title}}</p>
						<p style="display:flex; align-items:center; justify-content:center;margin:10px 0;">
							<span style="display:inline-block; width:15px; margin-right:5px; border-top:1px solid #fff;"></span>
							<span>弘则弥道（上海）投资咨询有限公司</span>
							<span style="display:inline-block; width:14px; height:14px; background:#fff; border-radius:100%; margin:0 5px;"></span>
							<span>{{firstform.report_type}}</span>
							<span style="display:inline-block; width:15px; margin-left:5px; border-top:1px solid #fff;"></span>
						</p>
						<p>FICC研究部</p>
						<p>{{firstform.ppt_date}}</p>
						<p style="width:80%; height:1px; border-bottom:1px solid #fff; margin:21px auto 0;"></p>
					</div>
				</div>
				<div v-for="(item,i) in pageitem" :key="i+1" style="position:relative; margin:20px auto;" :id="'wrapper'+i">
					<p style="position:absolute; top:6.5%; left:11.5%;fontSize:24px;color:#666">{{item.title}}</p>
					<!-- <img v-if="item.img_url" :src="item.img_url" style="width:70%; position:absolute; top:20%; left:15%;" /> -->
					<p style="position:absolute; bottom:3%; right:20px; color:#666;">第{{i+1}}页</p>
					<div class="container" :id="'container'+item.resource_id" v-if="item.resource_id"></div>
					<div class="container" v-if="item.noSource">
						<img src="https://hzstatic.hzinsights.com/static/ppt_default.png" alt="" style="width:400px;height:300px;">
					</div>
					<img src="~@/assets/img/pptnextimg.png" class="pptbg" />
				</div>
				<div style="position:relative; margin:20px auto;">
					<img src="~@/assets/img/pptlastimg.png" class="pptbg" />
				</div>
			</div>
			<div style="position:fixed;top:20px;right:8%;zIndex:10;">
				<el-button  type="primary" style="width:120px;height:40px;" @click="transHandle" :loading="isPublish">{{isPublish?'发布中':'发布'}}</el-button>
				<el-button  type="primary" plain style="width:120px;height:40px;" @click="$router.push({path:'/pptlist'})">返回列表</el-button>
			</div>
		</template>
	</div>
</template>

<script>
	import { reportdetail,base64Upload,pptPublish,pptdetail,dataBaseInterface,pptUpload } from 'api/api.js';
	import http from '@/api/http.js';
	import html2canvas from 'html2canvas';
	import Highcharts from 'highcharts/highstock';
	import HighchartszhCN  from '@/utils/highcahrts-zh_CN'
	import HightchartsExport from 'highcharts/modules/exporting';
	HightchartsExport(Highcharts)
	HighchartszhCN(Highcharts)
	import { defaultOpts, seasonOptions,getTerminal,browser } from '@/utils/defaultOptions';
	import chartMixin from './mixins/mixins';
	export default {
		mixins: [ chartMixin ],
		data() {
			return {
				loading :null,
				dataLoading:null,
				isshow:false,
				firstform:{},
				pageitem:[],
				zchart:null,
				axisOption:{
					gridLineWidth: 0,
					minorGridLineWidth: 0,
					opposite: false,
					lineWidth: 1,
					lineColor: '#bfbfbf',
					tickColor: '#bfbfbf',
					tickLength: 5,
					tickWidth: 1,
					title: {
							text: ""
					},
					endOnTick: false,
					startOnTick: false,
					labels: {x: -5,},
					visible: false,
				},
				datasource:'',
				isTransfrom:false,
				isPublish:false,//是否发布
				bg:'',
				ppt_id:'',
				imgList:[],
				isOver:false,
				isAuth:'',
				/* new_source */
				chartInfo: {},//图表信息
				dataList: [],//图表关联指标
				options:{},
			}
		},
		mounted() {
			this.ppt_id = sessionStorage.getItem('ppt_id')
			this.isAuth = sessionStorage.getItem('ppt_auth')
			this.getDetail()
		},
		updated(){
		},
		methods: {
			// 获取ppt详情
			getDetail() {
				this.dataLoading = this.$loading({
					lock: true,
					text: '拼命加载中...',
					spinner: 'el-icon-loading',
					customClass:'loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
				pptdetail({PptId:this.ppt_id}).then(res =>{
					if( res.Ret === 200 ){
						let pptpage=res.Data.PptPages || [];
						this.firstform={
							title:res.Data.Ppt.Title,
							report_type:res.Data.Ppt.ReportType,
							ppt_date:res.Data.Ppt.PptDate || http.dateFormatter(new Date(),false),
							img_url:pptpage[0].ImgUrl,
							ppt_pages_id:parseInt(pptpage[0].PptPagesId),
							ppt_id:parseInt(pptpage[0].PptId),
							back_index:parseInt(pptpage[0].BackIndex)
						}
						this.bg = this.bgList[this.firstform.back_index].image_url;
						let pageitem=[];
						pptpage.forEach((item,i)=>{
							if( i!=0 ){
								pageitem.push({
									title:item.Title,
									ppt_pages_id:parseInt(item.PptPagesId),
									ppt_id:parseInt(item.PptId),
									resource_id:item.ResourceId
								});
							}
						});
						this.pageitem = pageitem
						this.listHandle()
					}
				})
			},
			async listHandle() {
				for(let i=0;i<this.pageitem.length;i++) {
					await this.gething(this.pageitem[i],i)
				}
			},
			// 获取图表
			async gething(item,index) {
				// console.log(this.pptList)
				const { Data } = await dataBaseInterface.getChartByCode({
					UniqueCode: item.resource_id
				})
				this.chartInfo = Data.ChartInfo;
        this.dataList = Data.EdbInfoList;
				
				this.chartInfo.ChartType === 7 && this.initBarData(res.Data);

				this.chartInfo.ChartType !== 7 && Data.Status && this.setOptions();

				this.$nextTick(()=> {
					if(	Data.Status) {
						const new_options = { ...defaultOpts, ...this.options };
						new_options.chart = {
							backgroundColor: 'rgba(255, 255, 255, 0)',
						}
						let is_linear = this.options.series 
							? this.options.series.every(_ => _.type === 'scatter' ) || this.options.series.some(_ => _.chartType === 'linear'  )
							: false ;
						let chart = is_linear ? Highcharts.chart('container'+item.resource_id, new_options) : Highcharts.stockChart('container'+item.resource_id, new_options);
	
						const svg = chart.getSVG();
						// const base64img = this.svgToBase64(svg);
						// this.$set(item,'base64_source',base64img)
						this.$set(item,'base64_source',svg)
					}else {
						this.$set(item,'noSource',true)
					}

					// 最后一个图表上显示出来
					if(index == this.pageitem.length-1) {
						this.dataLoading.close();
					}
				})
			},
			// 转化图片
			transHandle() {
				this.loading = this.$loading({
					lock: true,
					text: '发布中...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
				this.isPublish = true;
				// 转化首页
				html2canvas( document.getElementById('PageIndex'),{
					scale:1.8,
					backgroundColor:null,
					imageTimeout:0,
					allowTaint:true,
				}).then((canvas)=> {
					var imagesrc = canvas.toDataURL('image/png');
					const formData = new FormData();
					formData.append('Img',imagesrc);
					formData.append('ResourceId','0');
					formData.append('PptId',this.firstform.ppt_id);
					formData.append('PptPagesId',this.firstform.ppt_pages_id);
					base64Upload(formData).then((res) => { // 把生成的base64位图片上传到服务器,生成在线图片地址
						if( res.Ret === 200 ){
							this.loop();
						}
					});
				});  
			},
			async loop() {
				for(let i=0;i<this.pageitem.length;i++) {
					await this.imgHandle(this.pageitem[i],i)
				}
			},

			svgToBase64(svg) {
				
				const base64img = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURI(svg)))}`;
				// console.log(base64img)

				return base64img;
			},

			async imgHandle(item,index) {
				const formData = new FormData();
				formData.append('Img',item.noSource ? '' : item.base64_source);
				formData.append('ResourceId',item.noSource ? '-1' : item.resource_id);
				formData.append('PptId',item.ppt_id);
				formData.append('PptPagesId',item.ppt_pages_id);
				
				const res  =  await base64Upload(formData) // 把生成的base64位图片上传到服务器,生成在线图片地址
				this.imgList.push(item.noSource ? '' : res.Data.ResourceUrl)
				// // 若果是最后一张图片
				if(this.imgList.length === this.pageitem.length) {
					this.publish();
				}	
			},
			// 发布
			publish() {
				var ScreenHeight= window.screen.availHeight;
				pptPublish({
					PptId:this.pageitem[0].ppt_id,
					ScreenHeight
				}).then(res => {
					this.loading.close();
					if(res.Ret === 200) {
						this.$alert('发布成功！','提示',{
							showCancelButton:false,
							type: 'success'
						})
						this.isOver = true;
						this.isPublish = false;
						this.imgList = [];
					}
				})
			},
		},
		components:{},
		watch:{}
	}
</script>

<style lang="scss" scoped>
.detail-container {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
}
	#pptdtl{ background:#fff; overflow:auto; max-width:800px; margin:0px auto;
		#PageIndex {
			margin: 20px 0;
			position:relative; 
			// height: 600px;
		}
		.pptbg{ width:800px;}
		.container {
			/* width: 600px; */
			position: absolute;
			z-index: 0;
			left: 50%;
			top: 55%;
			transform: translate(-50%,-50%);
		}
	}
</style>
