<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>
    <!-- 样式 -->
    <link th:href="@{/css/common/contianer.css}" rel="stylesheet" type="text/css"/>
    <script th:inline="javascript">
        const user_str = sessionStorage.getItem("login_user");
        const user = JSON.parse(user_str);
        const ReadPermisDirIds = /*[[${readDirIds}]]*/ [];
        const WritePermisDirIds = /*[[${writeDirIds}]]*/ [];
        // 目录业务类型，0：资源目录；1：基础数据目录，2：资源目录+基础目录
        const bus_type = 0;
    </script>
</head>
<body onselectstart="return false">
<div class="layui-row">
    <!-- 树 -->
    <div class="layui-col-md3">
        <div class="layui-card" style="border-right: 1px solid #ebebeb;">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" id="directoryTreeBody" lay-filter="directoryTreeBody">
                    <ul class="layui-tab-title">
                        <li class="layui-this metadata-table">资源目录</li>
                        <li class="metadata-table">视角目录</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-form" lay-filter="directoryFilterForm">
                            <div class="layui-form-item" style="margin-bottom: 0">
                                <div class="layui-inline" style="width: 100%">
                                    <div class="layui-input-inline" style="width: 100%">
                                        <input type="text" class="layui-input layui-icon-search" placeholder="请输入关键词检索"
                                               style="padding-right: 40px;" id="directoryTreeSearchBox">
                                        <i class="layui-icon layui-icon-search"
                                           style="font-size: 24px;position: absolute;top: 7px;right: 10px;color: #b5b5b5;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item layui-show" style="overflow: auto; padding: 10px 0"
                             id="tree-toobar-div">
                            <ul id="directoryTree" class="dtree" data-id="ROOT" data-value="ROOT"
                                style="min-width: 100%"></ul>
                        </div>
                        <div class="layui-tab-item">
                            <ul id="viewDirectoryTree" class="dtree" data-id="ROOT" data-value="ROOT"
                                style="min-width: 100%"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body right-card">
                <div class="layui-tab layui-tab-brief" id="metadataListCardBody" lay-filter="metadataListCardBody">
                    <ul class="layui-tab-title">
                        <li class="layui-this metadata-table">资源列表</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="current-position">当前位置：<label id="currentPosition"></label></div>
                            <table class="layui-hide" id="dirMetadataTable" lay-filter="dirMetadataTable"></table>
                            <script type="text/html" id="tableToolBar">
                                <div class="layui-btn-container">
                                    <div class="layui-layout-left" style="top:10px; left: 20px">
                                        <input type="text" id="searchKeyInput" name="searchKeyInput"
                                               autocomplete="off"
                                               placeholder="请输入关键字查询" class="layui-input layui-btn-sm">
                                        <button class="layui-btn layui-btn-sm" lay-event="query">查询</button>
                                    </div>
                                    <div class="layui-layout-right" style="padding-right: 20px; top:10px">
                                        {{#
                                        if(d.permis){
                                            var disabled = !d.permis.uploadPermis, mvDisabled=!d.permis.movePermis, title="没有权限";
                                            var brmDisabled = !d.permis.removePermis, viewDisabled=!d.permis.viewPermis, title="没有权限";
                                        }}
                                        <!--<button class="layui-btn layui-btn-sm {{disabled ? 'layui-disabled' : ''}}"
                                                title="{{disabled ? title : ''}}"
                                                disabled="{{disabled ? 'disabled' : ''}}"
                                                lay-event="addLink">关联数据表
                                        </button>-->
                                        <button class="layui-btn layui-btn-sm {{disabled ? 'layui-disabled' : ''}} "
                                                title="{{disabled ? title : ''}}"
                                                lay-event="addFile{{disabled ? 'disabled' : ''}}">
                                            <i class="layui-icon">&#xe67c;</i>上传文件</button>
                                        <button class="layui-btn layui-btn-sm  {{disabled ? 'layui-disabled' : ''}}"
                                                title="{{disabled ? title : ''}}"
                                                lay-event="addDirectory{{disabled ? 'disabled' : ''}}">
                                            <i class="layui-icon">&#xe67c;</i>上传文件夹</button>
                                        <button class="layui-btn layui-btn-sm {{mvDisabled ? 'layui-disabled' : ''}}"
                                                title="{{mvDisabled ? title : ''}}"
                                                lay-event="moveLink{{mvDisabled ? 'disabled' : ''}}">移动</button>
                                        <button class="layui-btn layui-btn-sm {{brmDisabled ? 'layui-disabled' : ''}}"
                                                title="{{brmDisabled ? title : ''}}"
                                                lay-event="batchMoveLink{{brmDisabled ? 'disabled' : ''}}">移除</button>
                                        {{#
                                        }
                                        }}
                                    </div>
                                </div>
                            </script>
                            <script type="text/html" id="rowToolBar">
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-xs remove-link"
                                            lay-event="details">查看</button>
                                    {{#
                                    if(d.permis){
                                        var rmDisabled = !d.permis.removePermis, viewDisabled=!d.permis.viewPermis, title="没有权限";
                                    }}
                                    <button class="layui-btn layui-btn-xs remove-link {{rmDisabled ? 'layui-disabled' : ''}}"
                                            title="{{viewDisabled ? title : ''}}"
                                            lay-event="modify{{rmDisabled ? 'disabled' : ''}}">修改</button>
                                    <button class="layui-btn layui-btn-xs remove-link {{rmDisabled ? 'layui-disabled' : ''}}"
                                            title="{{rmDisabled ? title : ''}}"
                                            lay-event="removeLink{{rmDisabled ? 'disabled' : ''}}">移除</button>
                                    <button class="layui-btn layui-btn-xs remove-link {{rmDisabled ? 'layui-disabled' : ''}}"
                                            title="{{rmDisabled ? title : ''}}"
                                            lay-event="downFile{{rmDisabled ? 'disabled' : ''}}">下载</button>
                                    {{#
                                    }
                                    }}
                                </div>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- js -->
<script th:replace="common/head::static-foot"></script>
<script th:src="@{/js/business/mark/markTag.js}"></script>
<script th:src="@{/js/business/directory/dirCommon.js}"></script>
<script th:src="@{/js/business/directory/member.js}"></script>
<script th:src="@{/js/business/directory/dirMark.js}"></script>
<script th:src="@{/js/business/directory/directory.js}"></script>
<script type="text/javascript">
    const toggleRightCard = (showType, callback) => {
        if (showType === 'metadata') {
            $('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
            $("#metadataCardBody").removeClass('layui-hide').addClass('layui-show');
        } else if (showType === 'directory') {
            $('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
            $("#metadataListCardBody").removeClass('layui-hide').addClass('layui-show');
        } else if (showType === 'file') {
            $('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
            $("#fileCardBody").removeClass('layui-hide').addClass('layui-show');
        }
        callback && callback();
    }


    let imageWidth;
    let imageHeight;
    const sizeInit = () => {
        $(".layui-card-body").height(window.innerHeight - 20);
        $("#tree-toobar-div").height($(".layui-card-body").height() - 40 - 25 - 45);
        $('#fileCardBody').height(window.innerHeight - 40 - 20);
        $('#fileViewer .file-viewer').height(window.innerHeight - 40 - 20 - 80);
        imageWidth = $('.layui-col-md9:first').innerWidth() - 54;
        imageHeight = $('#file-viewer-image').innerHeight();
    }
    window.onresize = sizeInit;
    sizeInit();
</script>
</html>
