#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<style>
    /* 文件列表item */
    .file-choose-list-item {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 8px 8px;
        margin: 5px 0;
        cursor: pointer;
    }

    .file-choose-list-item:hover {
        background-color: ${symbol_pound}F7F7F7;
    }

    /* 文件列表图片 */
    .file-choose-list-item-img {
        width: 90px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        background-color: ${symbol_pound}eee;
    }

    .file-choose-list-item-img.img-icon {
        background-size: inherit;
        background-color: transparent;
    }

    .file-choose-list-item.active .file-choose-list-item-img:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    /* 文件列表名称 */
    .file-choose-list-item-name {
        width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: ${symbol_pound}333;
        font-size: 12px;
        text-align: center;
        margin-top: 12px;
    }

    /* 文件列表复选框 */
    .file-choose-list-item-ck {
        position: absolute;
        right: 8px;
        top: 8px;
    }

    .file-choose-list-item-ck .layui-form-checkbox {
        padding: 0;
    }

    /* 文件列表操作菜单 */
    .file-choose-oper-menu {
        background-color: ${symbol_pound}fff;
        position: absolute;
        left: 8px;
        top: 8px;
        border-radius: 2px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
        transition: all .3s;
        overflow: hidden;
        transform: scale(0);
        transform-origin: left top;
        visibility: hidden;
    }

    .file-choose-oper-menu.show {
        transform: scale(1);
        visibility: visible;
    }

    /* 文件列表操作菜单item */
    .file-choose-oper-menu-item {
        color: ${symbol_pound}555;
        padding: 6px 5px;
        font-size: 14px;
        min-width: 70px;
        text-align: center;
        cursor: pointer;
        display: block;
    }

    .file-choose-oper-menu-item:hover {
        background-color: ${symbol_pound}eee;
    }

    /** 文件列表为空时样式 */
    .file-choose-empty {
        text-align: center;
        color: ${symbol_pound}999;
        padding: 50px 0;
    }

    .file-choose-empty .layui-icon {
        font-size: 60px;
        display: block;
        margin-bottom: 8px;
    }

</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-text" style="color: ${symbol_pound}333;">
            以下是静态页面，后台集成示例参考
            <a href="https://github.com/whvcse/easy-fs" target="_blank">获取源码</a>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tv-current-position">/</span></div>
        <div class="layui-card-body">
            <div>
                <button id="file-btn-back" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&${symbol_pound}xe65c;</i>返回上级
                </button>
                <button id="file-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&${symbol_pound}xe669;</i>刷新
                </button>
                <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                    <i class="layui-icon">&${symbol_pound}xe681;</i>上传文件
                </button>
                <button id="file-btn-choose" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"
                        style="margin-left: 10px;">
                    <i class="layui-icon">&${symbol_pound}xe634;</i>弹窗选择
                </button>
            </div>
            <div id="file-list-group"></div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script>
    layui.use(['jquery', 'layer', 'element', 'upload', 'admin', 'util', 'fileChoose'], function () {
        var ${symbol_dollar} = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var admin = layui.admin;
        var util = layui.util;
        var fileChoose = layui.fileChoose;
        var dataList = [];

        // 渲染列表
        function renderList(dir) {
            dir || (dir = ${symbol_dollar}('${symbol_pound}tv-current-position').text());
            layer.load(2);
            ${symbol_dollar}.get('json/files.json', {
                dir: dir
            }, function (res) {
                layer.closeAll('loading');
                dataList = res.data;
                var htmlStr = fileChoose.renderList({
                    data: dataList,
                    menu: [{
                        name: '预览',
                        event: 'preview'
                    }, {
                        name: '复制',
                        event: 'copy'
                    }, {
                        name: '<span style="color: red;">删除</span>',
                        event: 'del'
                    }]
                });
                ${symbol_dollar}('${symbol_pound}file-list-group').html(htmlStr);
            }, 'json');
        }

        renderList();

        // 列表点击事件
        ${symbol_dollar}(document).off('click.fclip').on('click.fclip', '${symbol_pound}file-list-group .file-choose-list-item', function (e) {
            var item = dataList[${symbol_dollar}(this).data('index')];
            if (item.isDir) {  // 是否是文件夹
                var cDir = ${symbol_dollar}('${symbol_pound}tv-current-position').text();
                cDir += (cDir == '/' ? item.name : ('/' + item.name));
                ${symbol_dollar}('${symbol_pound}tv-current-position').text(cDir);
                renderList(cDir);
            } else {
                var ${symbol_dollar}cMenu = ${symbol_dollar}(this).find('.file-choose-oper-menu');
                ${symbol_dollar}('.file-choose-oper-menu').not(${symbol_dollar}cMenu).removeClass('show');
                ${symbol_dollar}cMenu.toggleClass('show');
                e.stopPropagation();
            }
        });
        // 点击空白隐藏下拉框
        ${symbol_dollar}(document).off('click.fclomp').on('click.fclomp', function (e) {
            ${symbol_dollar}('.file-choose-oper-menu').removeClass('show');
        });

        // 菜单事件监听
        ${symbol_dollar}(document).off('click.fclomip').on('click.fclomip', '${symbol_pound}file-list-group .file-choose-oper-menu-item', function () {
            var event = ${symbol_dollar}(this).data('event');
            var dataIndex = ${symbol_dollar}(this).parent().parent().data('index');
            if (event == 'del') {  // 删除
                layer.confirm('确定要删除此文件吗？', {shade: .1}, function () {
                    layer.msg('操作成功', {icon: 1});
                    renderList();
                });
            } else if (event == 'preview') {
                window.open(dataList[dataIndex].url);
            } else {
                layer.msg('点击了' + event + '，索引' + dataIndex, {icon: 1});
            }
        });

        // 刷新
        ${symbol_dollar}('${symbol_pound}file-btn-refresh').click(function () {
            renderList();
        });

        // 返回上级
        ${symbol_dollar}('${symbol_pound}file-btn-back').click(function () {
            var cDir = ${symbol_dollar}('${symbol_pound}tv-current-position').text();
            if (cDir != '/') {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                cDir || (cDir = '/');
                ${symbol_dollar}('${symbol_pound}tv-current-position').text(cDir);
                renderList(cDir);
            }
        });

        // 上传
        upload.render({
            elem: '${symbol_pound}file-btn-upload',
            accept: 'file'
        });

        // 弹窗选择
        ${symbol_dollar}('${symbol_pound}file-btn-choose').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: 'json/files.json',
                num: 3,
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });

    });
</script>