<?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 categoryInEnglish = [];

		//現在的細項分類
		var type = "";
		var typeInChinese = "";

		//現在的大項分類
		var parent = "";
		var parentInChinese = "";

		//類別的中英文字典，中文是為了檔案路徑
		var allTypeInEnglish = [];
		var allTypeInChinese = [];
		var allParentInEnglish = [];
		var allParentInChinese = [];

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

		searchURL = searchURL.substring(1, searchURL.length);
		if (searchURL != "") {
			//類別選擇細項
			if (searchURL.split("&") != undefined && searchURL.split("&")[1] != undefined) {
				type = searchURL.split("&")[0].split("=")[1];
				parent = searchURL.split("&")[1].split("=")[1];
			//類別選擇大項
			} else if (searchURL.split("&") != undefined && searchURL.split("&")[1] == undefined) {
				parent = searchURL.split("&")[0].split("=")[1];
			}
		}

		var $grid;

		pageHeader = "元件庫";

		//匯入大細項類別的中英文字典
		$.getJSON('./assets/equipmentTable2.json', function(data) {
			for (var i = 0; i < data.length; i++) {
				allParentInEnglish.push(data[i].category_code);
				allParentInChinese.push(data[i].category_name);
				for (var j = 0; j < data[i].children.length; j++) {
					allTypeInEnglish.push(data[i].children[j].component_code);
					allTypeInChinese.push(data[i].children[j].component_name);
				}
			}
		});
	</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() {

			//現在大項的中文
			for (var i = 0; i < allParentInEnglish.length; i++) {
				if (allParentInEnglish[i] == parent) {
					parentInChinese = allParentInChinese[i];
				}
			}

			//現在細項的中文
			for (var i = 0; i < allTypeInEnglish.length; i++) {
				if (allTypeInEnglish[i] == type) {
					typeInChinese = allTypeInChinese[i];
				}
			}

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

				//若類別選大項，需要列所有細項的元件，因此需要所有元件的細項名稱
				for (var i = 0; i < category.length; i++) {
					for (var j = 0; j < allTypeInChinese.length; j++) {
						if (category[i] == allTypeInChinese[j]) {
							categoryInEnglish[i] = allTypeInEnglish[j];
						}
					}
				}

				//一開始進入BIM元件庫顯示
				if (searchURL == "") {
					$("#content").append("<h3>請選擇左方類別以搜尋元件</h3>");
					$("#content").css("padding", "0");
					$("#content").css("text-align", "center");
				}

				if (!(type == "" && parent == "")) {
					$.when(initThreeJS()).then(function() {

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

						//若選到細項，該細項內沒有元件檔案
						if ($("#content").children().length == 0 && searchURL != "") {
							$("#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);
			});

			$.ajax({
				url: "./script/php/equipment_revitVersion.php",
				type: "GET",
				data: {
					type: type,
					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);
			});

			//被選到的類別highlight起來
			for (var i = 0; i < jsonData.length; i++) {
				for (var j = 0; j < jsonData[i].children.length; j++) {
					$("a").each(function() {
						if (jsonData[i].category_code == parent) {
							//選到的是細項類別
							if (jsonData[i].children[j].component_code == type) {
								var searchText = jsonData[i].children[j].component_name;
								var found;

								if ($(this).context.innerText == searchText && $(this).context.name == jsonData[i].category_code) {
									$(this).context.classList.add("highlight");
									$(this).context.parentNode.parentNode.parentNode.classList.add("nav-expanded");
								}
								//選到的是大項類別
							} else if (type == "") {
								var searchText = parentInChinese;
								var found;

								if ($(this).context.innerText == searchText && $(this).context.name == jsonData[i].category_code) {
									if (!$(this).context.classList.contains("highlight")) {
										$(this).context.classList.add("highlight");
										$(this).context.setAttribute("style", "background: #0088cc");
									} else {
										$(this).context.removeAttribute("href");
									}

								}
							}
						}

					});
				}
			}


		});
	</script>
	<script src="./script/js/data-sort.js"></script>
	<script src="script/js/3Dpic.js" type="module"></script>

</body>

</html>