<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed sidebar-left-collapsed">

<head>
	<?php include("bim-support-header.html"); ?>
	<script src="./script/js/global.js"></script>
	<script type="application/javascript">
		var rvtName = [];
		var categoryTable = [];
		var year = [];
		//當選擇大項時，需要展示所有'細項分類'內的元件
		var category = [];
		//現在的大項分類
		var parent = "";
		var type = "";
		var componentGroup = [];

		var userName = "<?php echo $_SESSION['name'] ?>";
		var role = "<?php echo ($groupName); ?>";
		var right = <?php echo ($right); ?>;

		var url_href = window.location.href;
		var url = new URL(url_href);
		parent = url.searchParams.get("parent");
		type = (url.searchParams.get("type") == "" ? "" : url.searchParams.get("type"));

		var $grid;

		pageHeader = "元件庫";
	</script>
</head>

<body>
	<canvas id="c"></canvas>
	<section class="body">
		<!-- start: header -->
		<header-menu></header-menu>
		<!-- end: header -->
		<div class="inner-wrapper">
			<!-- start: sidebar -->
			<side-bar></side-bar>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<h2>{{pageHeader}}</h2>
				</header>
				<!-- start: page -->
				<section class="content-with-menu content-with-menu-has-toolbar media-gallery">
					<div class="content-with-menu-container">
						<inner-menu>
							<template v-slot:inner-equipment>
								<equipment-list></equipment-list>
							</template>
						</inner-menu>
						<div class="inner-body mg-main">
							<div class="inner-toolbar">
								<ul>
									<search-bar></search-bar>
									<filter-bar></filter-bar>
								</ul>
							</div>
							<filter-content></filter-content>
							<div class="row mg-files" data-sort-destination data-sort-id="media-gallery" id="content">
							</div>
						</div>
					</div>
				</section>
				<!-- end: page -->
			</section>
		</div>
	</section>
	<script>
		/*Vue */
		vm.mount('.body');
		addUserImage(userName.charAt(0), role);
	</script>

	<?php include("bim-support-body.html"); ?>
	<script type="application/javascript">
		$(function() {
			getEquipmentGroup();
			getEquipmentRevitVersion();

			//展開
			$(".nav-parent").each(function(){
				var parents = [];
				if(parent == $(this).context.children[0].outerHTML.split('"')[3]){
					parents = parent.split("/");
					$(this).context.classList.add("nav-expanded");
					var temp = $(this).context.parentNode.parentNode;
					for(var i = 0; i < parents.length-1; i++){
						temp.classList.add("nav-expanded");
						temp = temp.parentNode.parentNode;
					}
				}
			});

			$(".menu-item").each(function(){
				if($(this).context.outerHTML.includes(type)){
					$(this).css("background", "#0088cc");	
				}
			});

			$(".dropdown-btn").on("click",function(){
				$("#content").empty();
				$("#revitVersion").empty();

				$(".dropdown-btn, .menu-item").each(function(){
					if($(this).css("background").includes("rgb(0, 136, 204)")){
						$(this).css("background", "rgba(0,0,0,0)");		
					}
				});

				parent = $(this).attr("parent");
				type = "";
				getEquipmentGroup();
				getEquipmentRevitVersion();
				$(this).css("background", "#0088cc");		
			})

		});

		function getEquipmentGroup(){
			//撈現在類別內的元件
			$.ajax({
				url: "./script/php/equipment_group.php",
				type: "GET",
				data: {
					parent: parent,
					type: type
				},
				contentType: "application/json",
				dataType: "json"
			}).done(function(data) {
				year = data['year'];
				rvtName = data['rvtName'];
				category = data["category"];
				componentGroup = data["componentGroup"];

				//一開始進入BIM元件庫顯示
				if (parent == null) {
					$("#content").append("<h1 style='color: red;'>注意!BIM元件庫需配合BIM程式庫中的拖放元件API使用!</h1>");
					$("#content").append("<h3>請選擇左方類別以搜尋元件，搜尋到需要的元件請點擊加入清單按鈕</h3>");
					$("#content").append("<h3>到BIM程式庫下載拖放元件API，並參考操作方式以進行元件放置動作</h3>");
					$("#content").css("padding", "0");
					$("#content").css("text-align", "center");

					$("a").each(function() {
						if ($(this).context.name != "" && $(this).context.className == "menu-item" && $(this).context.name != parent) {
							//其他大項類別不要產生ul
							$(this).closest("ul").remove();
						}
					});

				} else {
					$.when(initThreeJS()).then(function() {

						$grid = $("#content").isotope({
							itemSelector: ".isotope-item",
							layoutMode: 'fitRows'
						});

						//若選到細項，該細項內沒有元件檔案
						if ($("#content").children().length == 0) {
							$("#content").append("<h3>此類別沒有元件檔案</h3>");
							$("#content").css("padding", "0");
							$("#content").css("text-align", "center");
						}

					}).then(function() {

						//元件有時候會不排版
						setTimeout(function() {
							$grid.isotope()
						}, 100);

					});
				}

			}).error(function(error) {
				console.log(error);
			});
		}

		function getEquipmentRevitVersion(){
			$.ajax({
				url: "./script/php/equipment_revitVersion.php",
				type: "GET",
				data: {
					parent: parent
				},
				contentType: "application/json",
				dataType: "json"
			}).done(function(data) {

				//篩選內元件版本
				for (var i = 0; i < data.length; i++) {
					$("#revitVersion").append('<label><input type="checkbox" value=".' + data[i] + '" />   ' + data[i] + '</label> ');
				}

			}).error(function(error) {
				console.log(error);
			});
		}
		
	</script>
	<script src="./script/js/data-sort.js"></script>
	<script src="script/js/3Dpic.js" type="module"></script>

</body>

</html>
