<template>
	<div id="app">
		<router-view v-if="isRouterAlive" />
		<div class="loadingShadow" v-show="loading">
			<div class="loadData">
				<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
				<div class="loadingMsg">{{loadingMsg}}</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		getStorage,
		removeItem
	} from '@/utils/localStorage';
	export default {
		name: "App",
		provide() {
			return {
				reload: this.reload,
			};
		},
		data() {
			return {
				themeColor: "rgba(0,97,232,1)",
				themeColor2: "rgba(0,97,232,0.2)",
				isRouterAlive: true,
				showAccountView: false, //是否显示用户账号列表
				acountList: [], //弹出层账号列表数据
				selectAccount: null, //选中的账号
			};
		},
		created() {
			document.addEventListener('visibilitychange', (event) => {
				console.warn("***pageshow-handle***", event, document.hidden, document.visibilityState)
				//外链回退到vue应用要执行的代码
				if (document.visibilityState == 'visible') { //页面显示
					this.accountHandle()
				}
			})
			this.accountHandle(true)
		},
		watch: {
			loading: {
				handler(newVal) {
					if (!newVal) {
						this.$store.state.loadingMsg = ''
					}
				}
			}
		},
		computed: {
			loading() {
				return this.$store.state.loading;
			},
			loadingMsg() {
				if (this.$store.state.loadingMsg) {
					return this.$store.state.loadingMsg;
				} else {
					return "正在查询，请耐心等待";
				}
			}
		},
		mounted() {
			// 禁止图片单机事件，防止出现图片点击浏览器自动预览功能
			document.body.addEventListener("click", function(e) {
				if (e.target.nodeName.toLowerCase() == "img") {
					e.preventDefault();
				}
			});
		},
		methods: {
			reload() {
				this.isRouterAlive = false;
				this.$nextTick(function() {
					this.isRouterAlive = true;
				});
			},
			//账号获取
			accountHandle(type = false) {
				var acountList = getStorage('acountList') ? JSON.parse(getStorage('acountList')) : null;
				console.warn("***acountList***", acountList);
				if (acountList) {
					if (acountList.length > 1) {
						this.selectAccount = null;
						this.acountList = acountList;
						this.showAccountView = true;
					} else {
						this.showAccountView = false;
						this.selectAccount = acountList[0];
						removeItem('acountList'); //移除待选择列表的账号数据
						if (type) { //页面加载时触发
							setTimeout(() => { //等待其他组件创建好对应的事件监听
								window.$bus.$emit("projectUpdate", this.$route.query.projectId, this
								.selectAccount);
								window.$bus.$emit("setAccount", this.selectAccount);
							}, 5000);
						} else { //页面出现时触发-非初次加载
							window.$bus.$emit("projectUpdate", this.$route.query.projectId, this.selectAccount);
							window.$bus.$emit("setAccount", this.selectAccount);
						}

					}
				} else {
					this.showAccountView = false;
				}
			},
			closeFun() {
				this.showAccountView = false;
			},
			//账号选择
			accountChange(item) {
				if (!item) {
					return false;
				}
				this.selectAccount = item;
			},
			//确认账号选择
			async accountConfirm() {
				if (!this.selectAccount) {
					this.$message.warning("请选择关联账号！");
					return false;
				}
				// let userInfo = window.userInfo;
				// userInfo['userAccount'] = this.selectAccount;
				removeItem('acountList'); //选择好后，移除待选择列表的账号数据
				this.showAccountView = false;
				let res = await requestConfig('bindAdvertiser', {
					"advertiserId": this.selectAccount.advertiserId,
					"companyId": window.userCompanyModel.companyId,
					"name": this.selectAccount.name,
					"platform": this.selectAccount.platform || '',
					"oauthType": this.getAuthType(),
				}, false, false)
				if (res.success) {
					// this.$store.dispatch('setAccount',this.selectAccount);
					window.$bus.$emit("projectUpdate", this.$route.query.projectId, this.selectAccount);
					window.$bus.$emit("setAccount", this.selectAccount);
					removeItem("OAUTHTYPE");
				}
			},
			getAuthType() {
				const oauthType = JSON.parse(window.localStorage.getItem('OAUTHTYPE')) || '';
				if (oauthType) {
					return oauthType.accountType
				} else {
					return "2" //默认是2
				}
			},
		},
	};
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* text-align: center;
		color: #2c3e50;
		margin-top: 60px; */
	}

	body {
		background: #181C28;
	}

	.el-tooltip__popper.is-light {
		backdrop-filter: blur(10.36rem) !important;
		background-color: rgba(255, 255, 255, 0.4) !important;
		border: none !important;
		color: #ffffff !important;
	}


	.el-tooltip__popper .popper__arrow,
	.el-tooltip__popper .popper__arrow::after {
		border-style: none !important;
	}

	.el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-date-picker__header .el-date-picker__header-label {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-picker-panel__content .el-date-table th {
		color: #FFFFFF;
	}

	.dropdown-view-menu {
		font-size: 14px;
		color: var(--themeColor9);
		/* width: 336rem; */
		box-sizing: border-box;
		padding: 15rem !important;
		margin-top: 3rem;
		backdrop-filter: blur(60px);
		border: none !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dropdown-view-menu .active {
		color: #CEF7D1;
	}

	.dropdown-view-text {
		font-family: "Verdana Bold";
		font-weight: 700;
		text-decoration: underline;
		font-size: 14px;
		color: #fff;
	}

	.select-julangview {
		display: none;
	}

	.popper-class-qr {
		padding: 0px !important;
	}

	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}

	.amap-logo img {
		display: none;
	}

	.amap-copyright {
		opacity: 0;
	}
</style>
<style lang="scss" scoped>
	@import "./assets/common.scss";
</style>