<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 作者 -->
    <meta name="author" content="silos"/>
    <meta name="revised" content="Silos-Admin-v-2.0.0"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>Index</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" href="../../static/assets/library/layui/css/layui.css"
          th:href="@{/assets/library/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/assets/library/fonts/fontawesome4/css/font-awesome.css"
          th:href="@{/assets/library/fonts/fontawesome4/css/font-awesome.css}"/>
    <link rel="stylesheet" href="../../static/assets/library/fonts/fontawesome6/css/all.min.css"
          th:href="@{/assets/library/fonts/fontawesome6/css/all.min.css}"/>
    <link rel="stylesheet" href="../../static/assets/library/jplugins/dropdown/css/dropdown.css"
          th:href="@{/assets/library/jplugins/dropdown/css/dropdown.css}"/>
    <link rel="stylesheet" href="../../static/assets/library/jplugins/filesUpload/css/filesUpload.css"
          th:href="@{/assets/library/jplugins/filesUpload/css/filesUpload.css}"/>


</head>
<body>
<input type="hidden" id="bookInfoId" name="bookInfoId" value="" class="hiddenId">
<div class="smart-dropdown">
    <input type="text" id="dropdownId" class="smart-dropdown-input" placeholder="请选择或搜索...">
    <div class="smart-dropdown-arrow">▼</div>
    <div class="smart-dropdown-menu">
        <div class="smart-dropdown-search">
            <input type="text" class="smart-search-input" placeholder="搜索...">
        </div>
        <div class="smart-dropdown-content"></div>
        <div class="smart-dropdown-pagination">
            <div class="smart-pagination-info"></div>
            <div class="smart-pagination-controls">
                <button class="smart-page-prev">上一页</button>
                <button class="smart-page-next">下一页</button>
            </div>
        </div>
    </div>
</div>

<div class="grid-3-columns files-upload">
    <div class="grid-item">
        <!-- 上传区域 -->
        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">
                <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">
                <h3>点击选择文件或拖放到此处</h3>
                <p class="mb-0">支持图片、文档、视频等文件类型（禁止上传可执行文件）</p>

                <div class="security-warning mt-3">
                    <strong><i class="fas fa-exclamation-triangle me-1"></i>安全限制：</strong>
                    <ul class="security-list mt-2">
                        <li><i class="fas fa-ban"></i>禁止上传 .exe, .bat, .sh, .jar 等可执行文件</li>
                        <li><i class="fas fa-shield-alt"></i>前端安全检查确保上传安全</li>
                        <li><i class="fas fa-infinity"></i>不限制文件大小</li>
                    </ul>
                </div>
            </div>
            <div class="d-flex gap-3 justify-content-center mt-4">
                <button class="btn btn-primary" id="selectFilesBtn">
                    <i class="fas fa-folder-open me-2"></i>选择文件
                </button>
                <button class="btn btn-outline-primary" id="selectFolderBtn">
                    <i class="fas fa-folder me-2"></i>选择文件夹
                </button>
            </div>
            <input type="file" id="fileInput" multiple style="display: none;">
            <input type="file" id="folderInput" webkitdirectory directory multiple style="display: none;">
        </div>
    </div>
    <div class="grid-item">
        <!-- 上传队列信息 -->
        <div class="queue-info" id="queueInfo">
            <div>
                <i class="fas fa-tasks me-2"></i>
                <span id="queueStatus">队列中: <strong>0</strong> | 上传中: <strong>0</strong></span>
            </div>
            <div class="text-muted">
                <small id="uploadSpeed">速度: 0 KB/s</small>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <!-- 头部 -->
        <div class="upload-header">
            <div class="upload-stats">
                <div class="stat-item">
                    <div class="stat-value" id="totalFiles">0</div>
                    <div class="stat-label">总文件</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="successFiles">0</div>
                    <div class="stat-label">成功</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="failedFiles">0</div>
                    <div class="stat-label">失败</div>
                </div>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="upload-content">
            <!-- 提示信息 -->
            <div class="alert alert-danger" id="errorAlert"></div>
            <div class="alert alert-success" id="successAlert"></div>
            <div class="alert alert-warning" id="warningAlert"></div>

            <!-- 批量操作 -->
            <div class="batch-actions" id="batchActions">
                <div class="selected-count">
                    <i class="fas fa-check-circle me-2"></i>
                    已选择 <span id="selectedCount">0</span> 个文件
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-danger btn-sm" id="batchRemoveBtn">
                        <i class="fas fa-trash-alt me-1"></i>移除选中
                    </button>
                    <button class="btn btn-success btn-sm" id="batchUploadBtn">
                        <i class="fas fa-cloud-upload-alt me-1"></i>上传选中
                    </button>
                </div>
            </div>
            <!-- 文件列表 -->
            <div class="files-section">
                <h3 class="section-title">
                    <i class="fas fa-list me-2"></i>文件列表
                    <span class="badge bg-primary rounded-pill" id="listCount">0</span>
                </h3>
                <div class="files-list" id="filesList">
                    <!-- 文件项将动态添加到这里 -->
                </div>
            </div>

            <!-- 文件预览 -->
            <div class="preview-container" id="previewContainer">
                <h3 class="section-title">
                    <i class="fas fa-image me-2"></i>文件预览
                </h3>
                <img class="preview-image" id="previewImage" src="" alt="预览图片">
            </div>
    </div>
        <!-- 隐藏字段（用于表单提交） -->
        <div class="d-none">
            <input type="hidden" id="filePaths" name="file_paths" value="">
            <input type="hidden" id="fileNames" name="file_names" value="">
            <input type="hidden" id="fileTypes" name="file_types" value="">
            <input type="hidden" id="fileSizes" name="file_sizes" value="">
            <input type="hidden" id="fileHashes" name="file_hashes" value="">
        </div>
</div>
<script src="../../static/assets/library/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
<script src="../../static/assets/library/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
<script src="../../static/assets/library/jplugins/dropdown/js/dropdown.js"
        th:src="@{/assets/library/jplugins/dropdown/js/dropdown.js}"></script>
<script src="../../static/assets/library/jplugins/filesUpload/js/filesUpload.js"
        th:src="@{/assets/library/jplugins/filesUpload/js/filesUpload.js}"></script>
<script>
    // POST 请求示例
    $('.smart-dropdown').smartDropdown({
        url: '/cms/book/info/queryPage',
        method: 'POST',
        hiddenId: 'bookInfoId',
        valueField: 'id',
        textField: 'name',
        pageSize: 10,
        params: {
            pageNo: 1,
            pageRows: 10,
            status: 1,
            category: 'user'
        },
        onSelect: function (item) {
            console.log('选中:', item);
        }
    });
</script>
</body>
</html>