<template>
	<div id="app">
		<!-- IOS机器会跳转两次到其他路由，当from路由被缓存时，原因未知 -->
		<keep-alive >
			<!-- <transition name="fade"> -->
			<router-view v-if="$route.meta.keepAlive"></router-view>
			<!-- </transition> -->
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<div class="loadingShadow" v-show="loading">
			<div class="loadData">
				<img src="https://dm.static.elab-plus.com/miniProgram/loading.gif" alt="" />
				<div class="loadingMsg">{{loadingMsg}}</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		setStorage,
		getStorage,
		pxoveItem
	} from '@/utils/localStorage';
	const util = require('@/utils/util.js').default;
	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, //选中的账号
				isIOS: false,
				include: []
			};
		},
		created() {
			let userInfo = getStorage('userInfo') ? JSON.parse(getStorage('userInfo')) : null;
			let userId = this.$route.query.leavePhoneCustomerId ? this.$route.query.leavePhoneCustomerId : (userInfo?userInfo.userId:'');
			let xcxHouseId = this.$route.query.xcxHouseId ? this.$route.query.xcxHouseId : (this.$route.query.houseId || '');
			let landDataId = this.$route.query.landDataId ? this.$route.query.landDataId : '';//土地id
			let houseName = this.$route.query.houseName ? this.$route.query.houseName : '';//项目名称
			let cityCode = this.$route.query.cityCode ? this.$route.query.cityCode : '';//土地id
			let customizedRecordId = this.$route.query.customizedRecordId ? this.$route.query.customizedRecordId : '';//作品id-说明已经存储了
			let ueId = this.$route.query.ueId ? this.$route.query.ueId : '';//ueId-说明选择了具体的户型
			let query = this.$route.query;
			let brandId = this.$route.query.brandId || this.$route.query.special_ID;
			let highColor1 = this.$route.query.highColor1 || "rgba(193, 240, 137, 1)";
			let highColor2 = this.$route.query.highColor1 || "#89FF00";
			let backgroundColor = this.$route.query.backgroundColor || "rgba(43, 56, 31, 1)";
            
            window.highColor1 = highColor1;
            window.highColor2 = highColor2;
            window.backgroundColor = backgroundColor;

			if (brandId) { //如果存在集团id
				$config.brandId = brandId;
			}
            if (landDataId) { //如果存在土地id
                this.$store.state.landDataId = landDataId;
            }
            if (houseName) { //如果存在项目名称
                this.$store.state.houseName = houseName;
            }
            if (cityCode) { //如果存在cityCode
                this.$store.state.cityCode = cityCode;
            }
            if (customizedRecordId) { //如果存在customizedRecordId
                this.$store.state.customizedRecordId = customizedRecordId;
            }
            if (ueId) { //如果存在ueId
                this.$store.state.ueId = ueId;
            }
			if (xcxHouseId) { //如果存在houseid
				this.$store.dispatch('setHouseId', xcxHouseId);
			}
			if (query) { //如果存在入参
				setStorage('queryObj', query);
			}
			if (userId) { //如果存在用户id
				this.$store.dispatch('setUserId', userId);
				// 开启websocket连接
				util.initWebsocket();
			}else{
				this.webLogin()
			}
			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			this.isIOS = isIOS;
			window.addEventListener('error', (error) => {
				console.warn("***error***",error)
				// 区分是否是js错误
				if (error.message) {
					console.warn("error" + error.message)
				}
			}, true)
			window.hexToRgba = this.hexToRgba;
			// window.onerror = function(message,source,line,column,error) {
			// };
		},
		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: {
			async webLogin(){
				let xcxHouseId = this.$route.query.xcxHouseId ? this.$route.query.xcxHouseId : (this.$route.query.houseId || '');
				let param = {
				    "terminal": 7,
				    "brandId": $config.brandId,
				    "houseId": xcxHouseId,
				    "shareToken": '',
				};
				let res = await requestConfig('webXcxLogin', param, true);
				if (res && res.single && res.single.id) { //如果存在用户id
					let userId = res.single.id;
					let userInfo = {
						userId:userId,
						openId:res.single.openId,
						token:res.single.token,
					}
					this.$store.dispatch('setUserId', userId);
					setStorage('userInfo', userInfo);
					// 开启websocket连接
					util.initWebsocket();
				}
			},
            hexToRgba(hex, opacity) {
                console.warn("**hexToRgba****",hex,opacity)
                if (!hex||!opacity){
                    return hex
                }
                let RGBA;
                if (hex.includes('#')&&hex.length==7){
                    RGBA = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
                        parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")";
                }else if (hex.includes('rgb(')){
            		var values = hex
            		  .replace(/rgb?\(/, '')
            		  .replace(/\)/, '')
            		  .replace(/[\s+]/g, '')
            		  .split(',')
            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
                }else if(hex.includes('rgba(')){
            		var values = hex
            		  .replace(/rgba?\(/, '')
            		  .replace(/\)/, '')
            		  .replace(/[\s+]/g, '')
            		  .split(',')
            		  return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
            	}else{
                    return hex
                }
                return RGBA
            },
		},
	};
</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 .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;
	}
</style>
<style lang="scss" scoped>
	@import "./assets/common.scss";
</style>