////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////

// 创建测试输出信息显示
window.initPanelConsole = function (mainApp, containerApp) {
	// 测试浮层标注
	var tooltip = document.getElementById('tooltip-wrapper');
	tooltip.style.opacity = 1;

	function hideTooltip() {
		gsap.to(tooltip, 0.2, {
			autoAlpha: 0,
			onComplete: function () {
				tooltip.isShow = false;
			}
		});
	}

	// 鼠标点击时关闭标注提示
	containerApp.onmousedown = function () {
		hideTooltip();
	};
	// 鼠标滚动时关闭标注提示
	containerApp.onwheel = function () {
		hideTooltip();
	};

	mainApp.bindToolTipOnHide(function (e) {
		hideTooltip();
	});

	// Marker: 巡检点UI按钮事件接口
	mainApp.bindMarkerEventCallback(function (e) {
		// console.log(e);
		// e.eventType 包含 'click', 'hover', 'leave' 三种状态
		// e.screenCoord，换算出的屏幕坐标
		// ...

		// var consoleElement = document.getElementById("debug-panel-console");
		// if (consoleElement) {
		//     consoleElement.innerHTML = `
		//                     <div>按钮名称 : ${e.name}</div>
		//                     <div>按钮类型 : ${e.type}</div>
		//                     <div>按钮ID : ${e.id}</div>
		//                     <div>UI事件类型 : ${e.eventType}</div>

		//                     <br />

		//                     <div>
		//                         屏幕坐标: x- ${~~e.screenCoord.x}, y- ${~~e.screenCoord.y}
		//                     </div>
		//                 `;
		// }
		// 点击标签时，填充对应的标签业务数据
		if (e.eventType == 'click' || e.eventType== 'touchend') {
			if (e.type === 'layer') return;

			switch (e.type) {
				// 园区内主体建筑标注
				case 'focus':
					tooltip.innerHTML = `
            						<div class="tooltip bottom">
            							<h3>${e.name}</h3>
            							<div
            								style="
            									display: grid;
            									grid-template-columns: auto auto;
            									grid-template-rows: auto auto;
            									grid-column-gap: 20px;
            								"
            							>
            								<h6>面积：${(Math.random() * 200 + 2000).toFixed(2)}(m<sup>2</sup>)</h6>
            								<h6>楼层数：4</h6>
            								<h6>结构：混凝土结构</h6>
            								<h6>房间数：${~~(Math.random() * 4) + 18}</h6>
            								<h6 style="grid-column-start: 1; grid-column-end: 3">
            									建造时间：2009-07-29
            								</h6>
            							</div>
            							<div>
            								<h6>管理员：张强</h6>
            								<h6>办公电话：010-000 000 0000</h6>
            							</div>
            							<div
            								style="
            									display: grid;
            									grid-template-columns: auto auto;
            									grid-template-rows: auto;
            									grid-column-gap: 20px;
            								"
            							>
            								<h6 style="grid-column-start: 1; grid-column-end: 3">
            									安全等级：<span class="level1">A</span>
            								</h6>
            								<h6>风险点数量：${~~(Math.random() * 10) + 5}</h6>
            								<h6>隐患数量：${~~(Math.random() * 5) + 3}</h6>
            							</div>
            						</div>
            						`;
					break;

				// 园区内其他标注
				case 'campus':
					tooltip.innerHTML = `
            						<div class="tooltip bottom">
            							<h3>${e.name}</h3>
            							<div>
            								<h6>管理员：张强</h6>
            								<h6>办公电话：010-000 000 0000</h6>
            							</div>
            							<div
            								style="
            									display: grid;
            									grid-template-columns: auto auto;
            									grid-template-rows: auto;
            									grid-column-gap: 20px;
            								"
            							>
            								<h6 style="grid-column-start: 1; grid-column-end: 3">
            									安全等级：<span class="level1">A</span>
            								</h6>
            								<h6>风险点数量：${~~(Math.random() * 10) + 5}</h6>
            								<h6>隐患数量：${~~(Math.random() * 5) + 3}</h6>
            							</div>
            						</div>
            						`;
					break;
				// 园区外标注
				case 'landmark':
					tooltip.innerHTML = `
            						<div class="tooltip bottom">
            							<h3>${e.name}</h3>
            						</div>
            						`;
					break;

				// 房间标签
				case 'room':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>学生数：${~~(Math.random() * 10) + 28}</h6>
                        </div>
                        <div>
                            <h6>班主任：张强</h6>
                            <h6>办公电话：010-000 000 0000</h6>
                        </div>
                        <div>
                            <h6>
                                安全等级：<span class="level1">A</span>
                            </h6>
                            <h6>隐患数量：${~~(Math.random() * 2) + 1}</h6>
                        </div>
                    </div>
                    `;
					break;

				// 灭火器
				case 'extinguisher':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>名称：手提式干粉灭火器</h6>
                            <h6>位置：楼梯口左侧</h6>
                            <h6>有效期：${new Date(new Date().getTime() + (~~(Math.random() * 365) + 800) * 86400000)
								.toISOString()
								.substr(0, 10)}</h6>
                        </div>
                        <div>
                            <h6>巡检人：张强</h6>
                            <h6>上次巡检时间：${new Date(new Date().getTime() - ~~(Math.random() * 10) * 86400000)
								.toISOString()
								.substr(0, 10)}</h6>
                            <h6>巡检结果：正常</h6>
                        </div>
                    </div>
                    `;
					break;

				// 消防栓
				case 'hydrant':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>位置：楼梯口左侧</h6>
                            <h6>水压：${(Math.random() * 0.2 + 0.2).toFixed(2)}MPa</h6>
                        </div>
                    </div>
                    `;
					break;

				// 摄像头
				case 'camera':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div
                            style="
                                display: grid;
                                grid-template-columns: auto auto;
                                grid-template-rows: auto auto;
                                grid-column-gap: 20px;
                            "
                        >
                        <div style="width:100px; height: 100px;" class="camera-img-${~~(Math.random() * 2) + 1}">
                            </div>
                            <div>
                                <h6>类型：电子眼V001</h6>
                                <h6>
                                    安全等级：<span class="level1">A</span>
                                </h6>
                                <h6>设备状态：${e.state}</h6>
                                <h6>隐患数量：${~~(Math.random() * 2) + 1}</h6>
                            </div>
                        </div>
                    </div>
                    `;
					break;

				// 广播设备
				case 'broadcasting':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>状态：正常</h6>
                            <h6>当前播报消息：无</h6>
                            <h6>下一条消息：下课铃声</h6>
                            <h6>下一条时间：${~~(Math.random() * 10) + 10}分${~~(Math.random() * 50) + 10}秒后</h6>
                        </div>
                    </div>
                    `;
					break;

				// 烟雾报警器
				case 'smoke-detector':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>设备状态：${e.state}</h6>
                        </div>
                    </div>
                    `;
					break;

				// 火焰报警器
				case 'fire-detector':
					const height = 30;
					tooltip.innerHTML = `
                    <div class="tooltip bottom" style="top:${-height - 56}px">
                        <h3>${e.name}</h3>
                        <div style="height:${height}px">
                            <h6>设备状态：${e.state}</h6>
                        </div>
                    </div>
                    `;
					break;

				// 漏电报警器
				case 'electric-leakage-detector':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>设备状态：${e.state}</h6>
                        </div>
                    </div>
                    `;
					break;

				// 风险点
				case 'risk-point':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>风险详情：待填写</h6>
                        </div>
                    </div>
                    `;
					break;

				// 检查点
				case 'check-point':
					tooltip.innerHTML = `
                    <div class="tooltip bottom">
                        <h3>${e.name}</h3>
                        <div>
                            <h6>负责人：张强</h6>
                            <h6>巡检内容：待填写</h6>
                            <h6>巡检周期：一日三次</h6>
                            <h6>隐患情况：无</h6>
                        </div>
                        <div>
                            <h6>上次巡检人：张强</h6>
                            <h6>上次巡检时间：${~~(Math.random() * 3) + 2}小时${~~(Math.random() * 60)}分钟前</h6>
                        </div>
                        <div>
                            <h6>下次巡检人：张强</h6>
                            <h6>下次巡检时间：${~~(Math.random() * 2) + 2}小时${~~(Math.random() * 60)}分钟后</h6>
                        </div>
                    </div>
                    `;
					break;

				default:
					break;
			}

			// tooltipTitle.innerText = e.name;
			// tooltipOwner.innerText = '负责人: 张强';
			// tooltipState.innerHTML = `检查状态: <span class="level1">正常</span>`;
			// tooltipDate.innerText = '检查时间: 2021-01-06';

			// var x = ~~e.screenCoord.x - 77;
			// var y = ~~e.screenCoord.y - 130;
			var x = ~~e.screenCoord.x;
			var y = ~~e.screenCoord.y;

			tooltip.isShow = true;

			gsap.fromTo(
				tooltip,
				0.4,
				{
					autoAlpha: 0,
					x: x,
					y: y - 10
				},
				{
					autoAlpha: 1,
					x: x,
					y: y
				}
			);
		}
	});
};
