<template>
  	<div id="loadingBox" class="loading">
		<div class="img-box" :style="{top:loadInfo.Logo.YAxis+'px'}">
			<img v-show="loadInfo.Logo.ShowLogo" class="logo-img" :src="loadInfo.Logo.Url" alt=""/>
		</div>
		<p class="logo-txt" :style="{top:loadInfo.TipTxt.YAxis+'px','font-Size':loadInfo.TipTxt.FontSize+'px',color:loadInfo.TipTxt.Color}">{{loadInfo.TipTxt.TxtInfo}}</p>
		<p class="foot-txt" :style="{color:loadInfo.Copyright.Color}">{{loadInfo.Copyright.TxtInfo}}</p>
	</div>
</template>

<script>
import apiHelper from "./assets/js/apiHelper.js";
import { constants } from 'fs';
export default {
	name: "loading",
	data: function() {
		return {
			loadInfo: {
				TipTxt: {
					TxtInfo: "",
					FontSize: 16,
					YAxis: 180,
					Color: ""
				},
				Logo: {
					Url: "",
					YAxis: 70,
					ShowLogo:false
				},
				Background: {
					Url: "",
					ShowBg:false
				},
				Copyright: {
					TxtInfo: "",
					Color: ""
				}
			},
			loadInfoDef: {
				TipTxt: {
					TxtInfo: "",
					FontSize: 16,
					YAxis: 180,
					Color: ""
				},
				Logo: {
					Url: "",
					YAxis: 70,
					ShowLogo:false
				},
				Background: {
					Url: "",
					ShowBg:false
				},
				Copyright: {
					TxtInfo: "",
					Color: ""
				}
			}
		};
	},
	created(){
		if(this.sup8.urlparams.enter!=="iframe"){
			console.log("enter:"+this.sup8.urlparams.enter);
			this.getLoadingConfig();
		}
		
	},
	mounted(){
		let that = this;
		window.addEventListener('message', (e)=> {
			console.log(e.data);
			if(e.data.type == "update"){
				that.loadInfo = e.data.data;
				if(that.loadInfo.Background.ShowBg){
					$("#loadingBox").css("background-image","url("+that.loadInfo.Background.Url+")");
				}else{
					$("#loadingBox").css("background-image","");
				}
			}
		},false);
	},
	methods: {
		// 获取验证码
		getLoadingConfig(){
			let that = this;
			apiHelper.getLoadingConfig(
				this.sup8.urlparams.eno || this.sup8.context.eno,
				this.sup8.urlparams.isPreview,
				function(res) {
					console.log(res);
					if(res.flag){
						that.loadInfo = res.data;
						if(that.loadInfo.Background.ShowBg){
							$("#loadingBox").css("background-image","url("+that.loadInfo.Background.Url+")");
						}else{
							$("#loadingBox").css("background-image","");
						}
					}
				},
				function(res) {
					that.loadInfo = that.loadInfoDef;
				}
			);
		}
	}
};
</script>

<style scoped>
@import "./assets/css/index.css";
.loading{
	position: fixed;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 10000;
}
.img-box{
	position:absolute;
	width: 100%;
	text-align: center;
	z-index: 100;
}
.logo-img{
	display: inline-block;
	max-width: 100%;
}
.logo-txt{
	position:absolute;
	box-sizing: border-box;
	padding: 0 30px;
	width: 100%;
	text-align: center;
	z-index: 200;
}
.foot-txt{
	position:absolute;
	width: 100%;
	bottom: 10px;
	left: 0;
	text-align: center;
	font-size: .8rem;
}
</style>

