{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
    ::-webkit-scrollbar { display: none; width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #e1e1e1;}
	.disk-left{width:120px; float:left; height:calc(100vh - 86px); overflow-y: auto; border:1px solid #eeeeee; background-color:#fbfbfb; padding:15px;user-select: none;}
	.disk-left::-webkit-scrollbar {width: 0;}
	.disk-left h3{font-size:18px; height:30px; padding-left:10px; font-weight:800}
	.disk-types{padding:12px 0;}
	.disk-types li{padding:8px; border-radius:3px; cursor:pointer;}
	.disk-types li strong{margin-right:12px; font-size:18px;}
	.disk-types li:hover{background-color:#F3F4F5;}
	.disk-types li.on-this{background-color:#F2FAFF; color:#1E9FFF}
	.disk-line{border-bottom:1px solid #eee; margin:6px 0;}
	
	.disk-table{margin-left:120px; overflow:hidden; height:calc(100vh - 56px);border:1px solid #eeeeee; border-left:0; background-color:#fff;}
	.layui-btn.tool-add{padding:0 12px;}
	
	.disk-path{height:42px;padding:0 4px 0 12px;}
	.disk-breadcrumb{float:left; padding:8px 0}
	.disk-breadcrumb span{color:#666; margin:0 8px; font-size:10px;}
	.layui-tab{margin:0;}
    .file-item {height:calc(100vh - 216px); overflow-y: auto;}
	.disk-path .layui-form-checkbox[lay-skin=primary]>div{padding-right:4px}
	
	/** Files **/
    .file-item .file-subject { flex: 1; overflow: hidden; overflow-y: auto; margin: 10px; box-sizing: border-box; }
    .file-item .file-subject:hover::-webkit-scrollbar { display: block; }
    .file-item .file-subject ul { display: flex; flex-wrap: wrap; }
    .file-item .file-subject ul li {position: relative; height: 144px; margin:20px 10px; padding: 6px; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 3px; transition: all 0.2s ease-in-out; }
    .file-item .file-subject ul li:hover {border: 1px solid #eee; background-color:#f8f8f8;}
    .file-item .file-subject ul li.on {border: 1px solid #ff5722; }
    .file-item .file-subject ul li img { width: 86px; height: 86px; padding:16px;}
    .file-item .file-subject ul li img.file-image { width: 118px; height: 118px; padding:0; border-radius: 2px; }
    .file-item .file-subject ul li video { width: 60px; height: 60px; border-radius: 3px; }
    .file-item .file-subject ul li p {overflow: hidden; margin: 5px 0 0; width: 118px; font-size: 13px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .file-item .file-subject ul li .file-check{position: absolute; width:20px; height:20px; left: 0; top: 0; display: none; font-size: 14px; border-radius:2px 0 4px 0; text-align: center; line-height: 20px; color: #ffffff; background-color:#fff; border-right:1px solid #eee; border-bottom:1px solid #eee; cursor:pointer;}	
	.file-item .file-subject ul li:hover .file-check{display: block;}
    .file-item .file-subject ul li.on .file-check{ display: block; background: #ff5722; border-color:#ff5722}
	.file-item .file-subject ul li .layui-btn-ctrl{position:absolute; top:0; right:0; display:none;}
	.file-item .file-subject ul li:hover .layui-btn-ctrl{display:block}
	.file-folder,.file-image,.file-pdf,.file-video,.file-audio{cursor:pointer;}
	.file-item .file-subject ul li .has-star{position: absolute; width:20px; height:20px; right: 1px; top: 80px; border-radius:50%; text-align: center; line-height: 20px; color: #ffffff; background-color:#ffb800; border:1px solid #fff; padding:2px;}
	
	.file-item .file-subject ul li .file-info{position: absolute; width:100%; height:23px; left: 0; top: 0; text-align:center; font-size: 12px; line-height: 23px; background-color:rgba(0,0,0,.12);border-radius:2px 2px 0 0;}	
	
    .file-footer { display: flex; align-items: center; padding: 5px 15px 0; height: 45px; border-top: 1px solid #f2f2f2; text-align: center; background: #ffffff; }

	/** No data **/
    .file-item .empty { display: flex; flex: 1; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; text-align: center; color: #cccccc; }
    .file-item .empty i { font-size: 180px; }
    .file-item .empty p { width: 180px; text-align: center; }
</style>
{/block}
<!-- Body -->
{block name="body"}
<div class="p-page">
	<div class="disk-left">
		<h3>My Space</h3>
		<div id="diskTypes" class="disk-types">
			<ul>
				<li class="on-this" data-tab=""><strong class="iconfont icon-dingdanguanli"></strong>All</li>
				<li data-tab="image"><strong class="iconfont icon-sucaiguanli"></strong>Images</li>
				<li data-tab="video"><strong class="iconfont icon-wodekecheng"></strong>Videos</li>
				<li data-tab="audio"><strong class="iconfont icon-tuiguang"></strong>Audio</li>
				<li data-tab="office"><strong class="iconfont icon-chengjiliebiao"></strong>Office Files</li>
				<li data-tab="pdf"><strong class="iconfont icon-lunwenguanli"></strong>Online Docs</li>
				<li data-tab="zip"><strong class="iconfont icon-xiaoshoupin"></strong>Archive Files</li>
			</ul>
			<p class="disk-line"></p>
			<ul>
				<li data-tab="star"><strong class="iconfont icon-pingfen" style="color:#FFB800"></strong>Starred Files</li>
			</ul>
		</div>
	</div>
	<div class="disk-table">
		<form class="layui-form gg-form-bar border-b" lay-filter="barsearchform">
			<div class="layui-input-inline" style="width:312px">
				<div class="layui-btn-group">
					<span class="layui-btn tool-add" id="uploadBtn"><strong class="iconfont icon-shangchuan"></strong> Upload File</span>
					<span class="layui-btn layui-btn-normal tool-add" id="addArticle"><strong class="iconfont icon-lunwenguanli"></strong> New Document</span>
					<span class="layui-btn layui-btn-warm tool-add" id="addFolder"><strong class="iconfont icon-xiangmuguanli"></strong> New Folder</span>
				 </div>
			</div>
			<div class="layui-input-inline" style="width:300px">
				<input type="text" name="keywords" placeholder="Enter keywords (file name / folder name)" class="layui-input" autocomplete="off" />
			</div>
			<div class="layui-input-inline" style="width:150px">
				<input type="hidden" name="pid" value="0" />
				<input type="hidden" name="ext" value="" />
				<input type="hidden" name="group_id" value="0" />
				<input type="hidden" name="is_star" value="" />
				<input type="hidden" name="limit" value="30" />
				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>Search</button>
				<button type="reset" class="layui-btn layui-btn-reset">Clear</button>
			</div>
		</form>
		<div class="disk-path layui-form border-b">
			<div class="disk-breadcrumb" id="diskPath"><i class="layui-icon layui-icon-windows"></i> <a href="javascript:void(0);" data-id="0">My Space</a></div>
			<div class="layui-input-inline" style="width:160px; float:right; padding-top:5px;">
				<div class="layui-btn-group">
					<span class="layui-btn layui-btn-sm layui-btn-primary"><input type="checkbox" name="select_all" lay-filter="all" title="Select All"></span>
					<span class="layui-btn layui-btn-sm layui-btn-primary" id="fileDelete">Delete</span>
					<span class="layui-btn layui-btn-sm layui-btn-primary" id="fileMove">Move</span>
				</div>
			</div>
		</div>
		<!-- Body -->
		<div class="file-item">
			<div class="file-subject">
				<ul id="filesBox"></ul>
			</div>
		</div>
		<!-- Footer -->
		<div class="file-footer">
			<div id="laypage"></div>
		</div>
    </div>
</div>
{/block}
<!-- /Body -->

<!-- Script -->
{block name="script"}
<script>	
	const fileExt={
		image:['jpg','jpeg','png','gif'],
		office:['doc','docx','xls','xlsx','ppt','pptx'],
		pdf:['txt','pdf','article'],
		zip:['zip','rar','7z','gz','tar'],
		video:['mpg','mp4','mpeg','avi','wmv','mov','flv','m4v'],
		audio:['mp3','wav','wma','flac','midi']
	};
	
	function isValidFileName(fileName) {
		const illegalChars = /[\\\/\*\:"<>|\?]/;
		return !illegalChars.test(fileName);
	}
	
	const moduleInit = ['tool','uploadPlus'];
	function gouguInit() {
		var tool = layui.tool,uploadPlus = layui.uploadPlus,form = layui.form,laypage = layui.laypage;
		// Upload file
        var attachment = new uploadPlus({
			"title":'Upload File',
            "target":'uploadBtn',
            "attachment":{
				"type":1,// 0: ajax multi-file mode; 1: ajax single-file single-record mode
                "ajaxSave":function(res){
                    $.ajax({
                        url: "/disk/index/add_upload",
                        type:'post',
                        data:{
							'pid':$('[name="pid"]').val(),
							'group_id':0,
                            'action_id':res.data.id,
                            'name':res.data.name,
                            'file_size':res.data.filesize,
                            'id':0,
                            'file_ext':res.data.fileext
                        },
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                $('[lay-filter="webform"]').click();                            
                            }
                        }
                    })
                }
            }
        })
		
		let ctrl_callback = function (e) {
			if(e.code == 0){
				layer.closeAll();
				layer.msg(e.msg);
				$('[lay-filter="webform"]').click();
			}
			else{
				layer.msg(e.msg);
			}
		}
		
		// Left panel actions
		$('#diskTypes').on('click','li',function(){
			$('#diskTypes').find('li').removeClass('on-this');
			$(this).addClass('on-this');
			let tab = $(this).data('tab');
			$('[name="pid"]').val(0);
			$('[name="keywords"]').val('');
			$('[name="ext"]').val('');
			$('[name="is_star"]').val('');
			if(tab==''){
				$('[name="ext"]').val('');
			}
			else{
				if(tab == 'star'){
					$('[name="is_star"]').val('1');
				}
				else{
					$('[name="ext"]').val(fileExt[tab]);
				}
			}
			let data = form.val('barsearchform');
			get_files(data);
		})
		
		// Breadcrumb actions
		$('#diskPath').on('click','a',function(){
			let id=$(this).data('id');
			$('[name="pid"]').val(id);
			let data = form.val('barsearchform');
			get_files(data);
		})
		
		// Single item selection
		$('#filesBox').on('click','.file-check',function(){
			$(this).parent().toggleClass("on");
		})
		
		// Select all
		form.on('checkbox(all)', function (data) {
		let val = data.value;
			if(data.elem.checked){
				// Determine whether the checkbox is checked or unchecked
				$('#filesBox li').addClass('on');
			}
			else{
				$('#filesBox li').removeClass('on');
			}
		});
		
		// Bulk delete
		$('#fileDelete').on('click',function(){
			let select_array = [];
			$('#filesBox').find('li.on').each(function(index,item){
				select_array.push($(item).data('id'));			
			})
			if(select_array.length<1){
				layer.msg('Please select files first');
				return false;
			}
			layer.confirm('Are you sure you want to delete these files? Please be careful.', { icon: 3, title: 'Notice' }, function (index) {
				tool.delete("/disk/index/del", {ids:select_array.join(',')}, ctrl_callback);
			});
		});
		
		// Bulk move
		$('#fileMove').on('click',function(){
			let select_array = [];
			$('#filesBox').find('li.on').each(function(index,item){
				select_array.push($(item).data('id'));			
			})
			if(select_array.length<1){
				layer.msg('Please select files first');
				return false;
			}
			layer.open({
				type: 2,
				title: 'Move to',
				area: ['720px', '480px'],
				content: '/disk/index/move',
				maxmin: true,
				btn: ['Move here', 'Cancel'],
				btnAlign: 'c',
				yes: function(index, layero){
					// Get the iframe window object
					let iframeWin =  window[layero.find('iframe')[0]['name']];
					let folder = iframeWin.$('#folder'); // Get an input element inside the iframe
					let val = folder.val();
					tool.post("/disk/index/move", {ids:select_array.join(','),pid:val}, ctrl_callback);
				}
			});
		})
		
		// Add online document
		$('#addArticle').on('click',function(){
			tool.side('/disk/index/add_article?pid='+$('[name="pid"]').val());
		})
		
		// Add folder
		$('#addFolder').on('click',function(){
			layer.prompt({title: 'Please enter a folder name'}, function(val, index, elem){
				if(val==''){
					layer.msg('Folder name cannot be empty');
					return false;
				}
				if(isValidFileName(val)==false){
					layer.msg('Folder name cannot contain any of these characters: \/:*?".<>|');
					return false;
				}
				$.ajax({
					url: "/disk/index/add_folder",
					type:'post',
					data:{
						'pid':$('[name="pid"]').val(),
						'name':val,
						'id':0,
						'group_id':$('[name="group_id"]').val()
					},
					success: ctrl_callback
				})
			});
		})
		
		// View/open file
		$('#filesBox').on('click','.file-item',function(){
			let id = $(this).parent().data('id');
			let href = $(this).data('href');
			let ext = $(this).data('ext');
			if(ext == 'video'){
				tool.videoView(href);
			}
			else if(ext == 'audio'){
				tool.audioView(href);
			}
			else if(ext == 'image'){
				tool.photoView(href);
			}
			else if(ext == 'pdf'){
				tool.pdfView(href);
			}
			else if(ext == 'article'){
				tool.articleView(id);
			}
			else if(ext == 'folder'){
				$('[name="pid"]').val(id);
				let data = form.val('barsearchform');
				get_files(data);
			}
			else{
				return false;
			}
		})
		
		// Rename file
		$('#filesBox').on('click','.name-edit',function(){
			let id = $(this).parent().parent().data('id');
			let title = $(this).parent().parent().data('title');
			let ext = $(this).parent().parent().data('ext');
			let types = $(this).parent().parent().data('types');
			title = title.toString().replace(/\.[^.]+$/, "");
			layer.prompt({title: 'Rename',value:title}, function(val, index, elem){
				if(val==''){
					layer.msg('File name cannot be empty');
					return false;
				}
				if(isValidFileName(val)==false){
					layer.msg('File name cannot contain any of these characters: \/:*?".<>|');
					return false;
				}
				if(types == 0){
					val =  val+'.'+ext;
				}
				tool.post("/disk/index/rename", {id:id,name:val,group_id:$('[name="group_id"]').val(),pid:$('[name="pid"]').val()}, ctrl_callback);
			});
		})		
		
		// Delete single file
		$('#filesBox').on('click','.file-delete',function(){
			let id = $(this).parent().parent().data('id');
			layer.confirm('Are you sure you want to delete this file? Please be careful.', { icon: 3, title: 'Notice' }, function (index) {
				tool.delete("/disk/index/del", {ids:id}, ctrl_callback);
			});
		})
		
		// Star single file
		$('#filesBox').on('click','.file-star',function(){
			let id = $(this).parent().parent().data('id');
			layer.confirm('Are you sure you want to star this file?', { icon: 3, title: 'Notice' }, function (index) {
				tool.post("/disk/index/star", {ids:id}, ctrl_callback);
			});
		})
		
		// Unstar single file
		$('#filesBox').on('click','.file-starno',function(){
			let id = $(this).parent().parent().data('id');			
			layer.confirm('Are you sure you want to unstar this file?', { icon: 3, title: 'Notice' }, function (index) {
				tool.post("/disk/index/unstar", {ids:id}, ctrl_callback);
			});
		})
		
		// Move single file
		$('#filesBox').on('click','.file-move',function(){
			let ids = $(this).parent().parent().data('id');
			layer.open({
				type: 2,
				title: 'Move to',
				area: ['720px', '480px'],
				content: '/disk/index/move',
				maxmin: true,
				btn: ['Move here', 'Cancel'],
				btnAlign: 'c',
				yes: function(index, layero){
					// Get the iframe window object
					let iframeWin =  window[layero.find('iframe')[0]['name']];
					let folder = iframeWin.$('#folder'); // Get an input element inside the iframe
					let val = folder.val();
					tool.post("/disk/index/move", {ids:ids,pid:val}, ctrl_callback);
				}
			});
		})
		
		// Load data
		var data = form.val('barsearchform');
		get_files(data);
		form.on('submit(webform)', function (data) {
			get_files(data.field);
			return false;
		});
		$('.layui-btn-reset').click(function(){
			setTimeout(function(){
				$('[lay-filter="webform"]').click();
			},200)
		})
		
		function get_files(param){
			var loadIndex = layer.load(0);
			$.ajax({
				url:"/disk/index/datalist",
				data:param,
				complete:function(){
					layer.close(loadIndex)
				},
				success:function(res){
					$('[name="select_all"]').prop('checked', false);
					form.render('checkbox');
					if(res.code==0){
						laypage.render({
							elem: 'laypage',
							limit:param['limit'],
							curr:param['page'],
							count: res.count, // total count
							jump: function(obj, first){
								//console.log(obj.curr); // current page
								//console.log(obj.limit); // page size
								// Do not execute on first render
								if(!first){
									var data = form.val('barsearchform');
									data['page'] = obj.curr;
									get_files(data);
								}
							}
						});

						let folder = res.totalRow;
						let folderHtml='<i class="layui-icon layui-icon-windows"></i> <a href="javascript:void(0);" data-id="0">My Space</a>';
						if(folder.length>0){
							for(var f=0;f<folder.length;f++){
								folderHtml+='<span> </span><a href="javascript:void(0);" data-id="'+folder[f].id+'">'+folder[f].name+'</a>';
							}
						}
						$('#diskPath').html(folderHtml);
					
						var item=res.data,li='';
						if(item.length>0){
							for(var a=0;a<item.length;a++){								
								let type = '',ext="zip",is_star='';
								// Check whether the extension is in the array
								let path='/static/home/images/icon/file.png';
								if (fileExt.image.includes(item[a].file_ext)) {
									path=item[a].filepath;
									type = '0,1,3,4,5';
									ext="image";
								}
								if (fileExt.office.includes(item[a].file_ext)) {
									type = '0,1,3,4,5';
									ext="office";
									path='/static/home/images/icon/'+item[a].file_ext+'.png';
								}
								if (item[a].file_ext == 'pdf' || item[a].file_ext == 'txt') {
									type = '0,1,3,4,5';
									ext="pdf";
									path='/static/home/images/icon/'+item[a].file_ext+'.png';
								}								
								if (fileExt.video.includes(item[a].file_ext)) {
									type = '0,1,3,4,5';
									ext="video";
									path='/static/home/images/icon/video.png';
								}
								if (fileExt.audio.includes(item[a].file_ext)) {
									type = '0,1,3,4,5';
									ext="audio";
									path='/static/home/images/icon/audio.png';
								}
								if (fileExt.zip.includes(item[a].file_ext)) {
									type = '0,1,3,4,5';
									ext="zip";
									path='/static/home/images/icon/rar.png';
								}
								if(item[a].types==1){
									type = '1,2,3,4,5';
									ext="article";
									path='/static/home/images/icon/article.png';
								}
								if(item[a].types==2){
									type = '3,4,5';
									ext="folder";
									path='/static/home/images/icon/folder.png';
								}
								else{
									if(item[a].is_star==1){
										type+=',7';
										is_star='<div class="has-star" title="Starred"><i class="iconfont icon-pingfen"></i></div>';
									}
									else{
										type+=',6';
									}
								}
								ctrl = '<span class="layui-btn layui-btn-xs layui-btn-normal file-ctrl" data-ctrl="disk" data-fileid="'+item[a].id+'" data-actionid="'+item[a].action_id+'" data-href="'+item[a].filepath+'" data-filename="'+item[a].name+'" data-ext="'+ext+'" data-type="'+type+'">Actions</span>';
								
								li+='<li data-id="'+item[a].id+'" data-title="'+item[a].name+'" data-ext="'+item[a].file_ext+'" data-types="'+item[a].types+'"><img src="'+path+'" alt="'+item[a].name+'" style="object-fit: contain;" class="file-item file-'+ext+'" data-href="'+item[a].filepath+'" data-ext="'+ext+'"><p title="'+item[a].name+'">'+item[a].name+'</p>\
									<div class="layui-btn-ctrl">'+ctrl+'\
									<span class="name-edit" style="display:none;" id="fileEdit'+item[a].id+'" title="Rename"></span>\
									<span class="file-delete" style="display:none;" id="fileDel'+item[a].id+'" title="Delete"></span>\
									<span class="file-move" style="display:none;" id="fileMove'+item[a].id+'" title="Move"></span>\
									<span class="file-star" style="display:none;" id="fileStar'+item[a].id+'" title="Star"></span>\
									<span class="file-starno" style="display:none;" id="fileStarno'+item[a].id+'" title="Unstar"></span>\
									</div>\
									<div class="file-check">✔</div>'+is_star+'</li>';
							}
							$('#filesBox').html(li);
							$('#laypage').show();
						}
						else{
							$('#filesBox').html('<div class="empty"><i class="layui-icon layui-icon-upload"></i><p>No files found. Upload something!</p></div>');
							$('#laypage').hide();
						}
					}	
				}				
			});
		}
	}
</script>
{/block}
<!-- /Script -->