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

<head>
	<!-- jstree CSS -->
	<link rel="stylesheet" href="/Common/assets/vendor/jstree/themes/default/style.css" />
	<?php include("bim-support-header.html"); ?>
	<script src="./script/js/global.js"></script>
	<script type="application/javascript">
		var delFavoriteList = [];
		var i = 0;
		var path = [];
		var categoryList = [];
		var categoryTable = [];
		var id = [];
		var revitVersion = [];
		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);
		type = searchURL.split("&")[0].split("=")[1];
		if (type === undefined) {
			//window.location.href = "?type=other";
		}
		var $grid;
		var list;

		pageHeader = "BIM程式庫";
	</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>
								<api-list></api-list>
							</template>
						</inner-menu>
						<div class="inner-body mg-main">
							<div class="inner-toolbar">
								<ul>
									<search-bar></search-bar>
									<li>
										<ul class="button-group nav nav-pills nav-pills-primary sort-by-button-group" data-filter-group="type">
											<li>
												<label>排序</label>
											</li>
											<li class="active">
												<button data-sort-by="downloadTimes" class="btn btn-primary">下載熱門</button>
											</li>
											<li class="active">
												<button data-sort-by="viewTimes" class="btn btn-primary">瀏覽熱門</button>
											</li>
										</ul>
									</li>

									<filter-bar></filter-bar>
								</ul>
							</div>
							<filter-content2></filter-content2>
							<div class="row mg-files" data-sort-destination="" data-sort-id="media-gallery" id="content" style="position: relative; height: 720.5px;">
								<isotope-item v-for="item in list" v-bind:name="item.APIName" v-bind:folder="item.APIID + item.APIName" v-bind:id="item.id" v-bind:object="item.object" v-bind:usage="item.usage" v-bind:software="item.software" v-bind:detail="item.detail" v-bind:operate="item.operate" v-bind:source="item.source" v-bind:view-times="item.viewTimes" v-bind:download-times="item.downloadTimes">
								</isotope-item>

							</div>
						</div>
					</div>
				</section>
				<!-- end: page -->
			</section>
		</div>
	</section>
	<script>
		$.ajax({
			url: "./script/php/getPath.php",
			type: "GET",
			async: false,
			data: {
				type: type,
			},
			contentType: "application/json",
			dataType: "json"
		}).done(function(data) {
			var table = data.table;

			for (i = 0; i < table.length; i++) {
				listObj = {};
				listObj["APIName"] = table[i].APIName;
				if (table[i].APIID == null)
					table[i].APIID = '';
				listObj["APIID"] = table[i].APIID;
				listObj["id"] = table[i].id;
				if (table[i].object != null)
					table[i].object = table[i].object.replaceAll(",", " ");
				listObj["object"] = table[i].object;
				if (table[i].usage != null)
					table[i].usage = table[i].usage.replaceAll(",", " ");
				listObj["usage"] = table[i].usage;
				listObj["software"] = table[i].software;
				listObj["detail"] = table[i].detail;
				listObj["operate"] = table[i].operate;
				listObj["source"] = table[i].source;
				listObj["viewTimes"] = table[i].viewTimes;
				listObj["downloadTimes"] = table[i].downloadTimes;
				list.push(listObj);
			}

			var filter = data.objectFilter;
			var filterArray = [];

			for (i = 0; i < filter.length; i++) {
				filterArray = filter[i].object.split(",")
				for (j = 0; j < filterArray.length; j++) {
					objectFilter.push(filterArray[j]);
				}
			}
			objectFilter = [...new Set(objectFilter)];

			filter = data.usageFilter;
			for (i = 0; i < filter.length; i++) {
				filterArray = filter[i].usage.split(",");
				for (j = 0; j < filterArray.length; j++) {
					usageFilter.push(filterArray[j]);
				}
			}
			usageFilter = [...new Set(usageFilter)];

			vm.mount('.body');
addUserImage(userName.charAt(0),role);
		}).error(function(error) {
			console.log(error);
		});
	</script>

	<?php include("bim-support-body.html"); ?>

	<script>
		//	$(document).ready(function() {
		$grid = $("#content").isotope({
			itemSelector: ".isotope-item",
			layoutMode: 'fitRows',
			getSortData: {
				name: '.name',
				viewTimes: '.viewTimes parseInt',
				downloadTimes: '.downloadTimes parseInt',
			}
		})

		setTimeout(() => {
			$grid.isotope({
				sortBy: 'downloadTimes',
				sortAscending: false,
			})
		}, 100);

		$('.sort-by-button-group').on('click', 'button', function() {
			var sortByValue = $(this).attr('data-sort-by');
			$grid.isotope({
				sortBy: sortByValue,
				sortAscending: false,

			});
		});
		//	});
	</script>
	<script src="./script/js/data-sort.js"></script>
</body>

</html>