<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="gray-bg">

	<div class="ui-layout-west">
		<div class="main-content">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i> 菜单
					</div>
					<div class="box-tools pull-right">
						<!--<a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a>-->
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<!--<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i></button>-->
					</div>
				</div>
				<div class="ui-layout-content">
					<div id="tree" class="ztree"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="data-form">
					<input type="hidden" id="menuId" name="menuId">
					<!--<input type="hidden" id="parentId" name="parentId">-->
					<div class="select-list">
						<ul>
							<li>
								文件名：<input type="text" name="fileName"/>
							</li>
							<li>
								文件后缀：<input type="text" name="fileSuffix"/>
							</li>
							<li>
								上传人：<input type="text" name="createBy"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="knowledge:knowledgeOss:add">
					<i class="fa fa-plus"></i> 新增
				</a>
				<input class="btn btn-success" disabled style="width: 180px;padding: 4px 10px;display: inline-block" type="file" name="file" id="file">
				<a class="btn btn-success" disabled id="upload" shiro:hasPermission="knowledge:knowledgeOss:add">
					<i class="fa fa-plus"></i> 上传
				</a>
				<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="knowledge:knowledgeOss:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-primary" onclick="javascript:ossfig()" shiro:hasPermission="knowledge:knowledgeOss:config">
					<i class="fa fa-cogs"></i> 云储存配置
				</a>
<!--				<a class="btn btn-warning" onclick="javascript:osseditor()" shiro:hasPermission="knowledge:knowledgeOss:add">-->
<!--					<i class="fa fa-image"></i> 结合editor-->
<!--				</a>-->
			</div>

			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
	<script th:src="@{/ajax/libs/ajaxfile/ajaxupload.js}"></script>
	<script th:src="@{/ajax/libs/ajaxfile/ajaxfileupload.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('knowledge:knowledgeOss:edit')}]];
        var removeFlag = [[${@permission.hasPermi('knowledge:knowledgeOss:remove')}]];
        var prefix = ctx + "knowledge/knowledgeOss";

        $(function() {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('body').layout({ initClosed: panehHidden, west__size: 185 });
            queryOssList();
            queryDeptTree();
        });

        function queryOssList(){
            var datas = [[${@dict.getType('knowledge_source')}]];
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                queryParams: queryParams,
                sortName: "createTime",
                sortOrder: "desc",
                modalName: "文件",
                search: false,
                showExport: false,
                columns: [{
						checkbox: true
					},
                    {
                        field: 'id',
                        title: '文件编号'
                    },
                    {
                        field: 'fileName',
                        title: '文件名'
                    },
                    {
                        field: 'extend1',
                        title: '文件来源',
                        formatter: function (value, row, index) {
                            /*if(value == 3){
                                return "<span class='badge'>转班</span>"
                            }else{
                                return $.table.selectDictLabel(datas, value);
                            }*/
                            return $.table.selectDictLabel(datas, value);
                        }
                    },
                    {
                        field: 'fileSuffix',
                        title: '文件后缀'
                    },
                    {
                        title: '文件预览',
                        formatter:function(value,row,index){
                            var file = row.fileSuffix.toLowerCase();
                            file = file.substring(file.indexOf(".")+1);
                            if(/^(jpg|jpeg|png|gif|ico)$/.test(file)){
                                var s = '<a class = "view"  href="javascript:void(0)"><img style="width:30px;height:30px;"  src="'+row.url+'" /></a>';
                            }else {
                                var s = '<a href="'+row.url+'">'+row.url+'</a>';
                            }
                            //var s = '<a class = "view"  href="javascript:void(0)"><img style="width:30;height:30px;"  src="'+row.url+'" /></a>';
                            return s;
                        },
                        events: 'operateEvents'

                    },
                    {
                        field: 'extend2',
                        title: '备注'
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        sortable: true
                    },
                    {
                        field: 'createBy',
                        title: '上传人'
                    },
                    {
                        field: 'service',
                        title: '服务商',
                        formatter: function(value, item, index) {
                            if (item.service == '1') {
                                return '七牛';
                            }
                            else if (item.service == '2') {
                                return '阿里云';
                            }
                            else if (item.service == '3') {
                                return '腾讯云';
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-primary btn-xs " href="#" onclick="menu(' + row.id +","+ row.menuId +')"><i class="fa fa-edit"></i>编辑菜单</a>');
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
		}

        function queryDeptTree()
        {
            var url = ctx + "knowledge/knowledgeMenu/menuTreeData1";
            var options = {
                url: url,
                expandLevel: 2,
                onClick : zOnClick
            };
            $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                $("#menuId").val(treeNode.id);
                var menuId = $("#menuId").val();
                $("#file").removeAttr("disabled");//启用按钮
                $("#upload").removeAttr("disabled");//启用按钮
               // up(menuId);
                $.table.search();
            }
        }
        //点击上传图片
        $('#upload').on('click',function(){
            var menuId = $("#menuId").val();
            var fileName = $("#file").val();
            if(fileName != null && fileName != ""){
                $.ajaxFileUpload({
                    url: prefix+'/upload',
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'file', //文件上传域的ID
                    data: {
                        menuId: menuId
                    },
                    dataType: 'json', //返回值类型
                    success: function (data, status) {
                        //过程代码省略
                        $.operate.ajaxSuccess(data);
                    }
                });
			}else{
                layer.alert("请选择上传文件！",{icon: 0});
                return;
			}
        });
        /*var menuId = $("#menuId").val();
        console.log(menuId);
        $('#upload').ajaxfileupload({
            action: prefix+"/upload",
            valid_extensions : ['md','csv'],
            params: {
                'menuId' : menuId
            },
            onComplete: function(response) {
                console.log('custom handler for file:');
                alert(JSON.stringify(response));
            },
            onStart: function() {
                console.log('no file');
                //if(weWantedTo) return false; // cancels upload
            },
            onCancel: function() {
                console.log('no file selected');
            }
        });*/
        /*function up(menuId) {
            new AjaxUpload('#upload', {
                action: prefix+"/upload",
                data : {
                    'menuId' : menuId
                },
                name: 'file',
                autoSubmit:true,
                responseType:"json",
                onSubmit:function(file, extension){
                    /!*console.log(file);
                    console.log(extension);*!/
                    /!*if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))){
                        alert('只支持jpg、png、gif格式的图片！');
                        return false;
                    }*!/
                },
                onComplete : function(file, r){
                    $.operate.ajaxSuccess(r);
                }
            });
        }*/

        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        function queryParams(params) {
            return {
                dictType:       $("#dictType").val(),
                pageSize:       params.limit,
                pageNum:        params.offset / params.limit + 1,
                searchValue:    params.search,
                orderByColumn:  params.sort,
                isAsc:          params.order
            };
        }

        function ossfig() {
            var url = prefix+'/config';
            $.modal.open("云储存配置", url);
        }

        function osseditor() {
            var url = prefix+'/editor';
            $.modal.open("结合editor", url,"1000");
        }

        window.operateEvents = {'click .view': function (e, value, row, index) {
                var img='<img src="'+row.url+'"/>';
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['auto','auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: img
                });
            }
        };

        var ossId;
        function menu(id,menuId) {
            ossId = id;
            if(menuId == null){
                menuId = 0;
            }
            var url = ctx + "knowledge/knowledgeMenu/selectList/" + menuId;
            var options = {
                title: '选择菜单',
                width: "800",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            var data = body.find('.selected')[0];
            if(data != "undefined" && data != "" && data != null){
                //$("#className").val(body.find('.selected')[0].children[2].innerHTML);
				var menuId = data.children[1].innerHTML;
                edit(menuId);
            }else{
                layer.msg("请选择一个菜单");
            }
            layer.close(index);
        }

        function edit(menuId) {
            //console.log(ossId);
            $.ajax({
                cache : true,
                type : "POST",
                url : prefix + "/edit",
                data : {
                    "id":ossId,
                    "menuId":menuId
                },
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.ajaxSuccess(data);
                    //$.operate.successCallback(data);
                    //self.document.location.reload();
                }
            });
        }
    </script>
</body>
</html>