<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>上传升级包</title>
    <link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
    <link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
    <style>
        .upload-container { padding: 10px; }
        .upload-title {
            font-size: 16px; font-weight: 600; color: #1d2129;
            margin-bottom: 20px; padding-bottom: 12px;
            border-bottom: 1px solid #e5e6eb;
        }
        .upload-dropzone {
            border: 2px dashed #c9cdd4; border-radius: 8px;
            padding: 10px 20px; text-align: center;
            background: #f7f8fa; cursor: pointer;
            transition: all 0.3s ease; position: relative;
            margin-bottom: 16px;
        }
        .upload-dropzone:hover { border-color: #165dff; background: #f2f3fe; }
        .upload-dropzone.dragover { border-color: #165dff; background: #e8edff; }
        .upload-dropzone.has-file { border-style: solid; border-color: #00b42a; background: #f0ffe6; }
        .upload-icon { font-size: 48px; color: #86909c; margin-bottom: 12px; }
        .upload-dropzone:hover .upload-icon { color: #165dff; }
        .upload-dropzone.has-file .upload-icon { color: #00b42a; }
        .upload-text { font-size: 14px; color: #4e5969; margin-bottom: 8px; }
        .upload-hint { font-size: 12px; color: #86909c; }
        .file-preview {
            display: none; margin-top: 16px; padding: 16px;
            background: #fff; border-radius: 6px; border: 1px solid #e5e6eb;
        }
        .file-preview.show { display: block; }
        .file-preview-header {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 12px; padding-bottom: 12px;
            border-bottom: 1px solid #f2f3f5;
        }
        .file-preview-icon { font-size: 28px; color: #165dff; }
        .file-preview-name {
            flex: 1; font-size: 14px; font-weight: 500;
            color: #1d2129; word-break: break-all;
        }
        .file-preview-remove {
            cursor: pointer; color: #86909c; font-size: 18px; padding: 4px;
            transition: color 0.2s;
        }
        .file-preview-remove:hover { color: #f53f3f; }
        .file-preview-info {
            display: flex; gap: 24px; font-size: 13px; color: #86909c;
        }
        .file-preview-info span { display: flex; align-items: center; gap: 4px; }
        .upload-tips {
            margin-top: 16px; padding: 12px 16px;
            background: #fff7e8; border-radius: 6px;
            border-left: 3px solid #ff7d00;
        }
        .upload-tips-title {
            font-size: 13px; font-weight: 600; color: #ff7d00;
            margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
        }
        .upload-tips ul { margin: 0; padding-left: 18px; }
        .upload-tips li { font-size: 12px; color: #d46b08; line-height: 1.8; }
        .upload-actions {
            margin-top: 24px; text-align: right; padding-top: 16px;
            border-top: 1px solid #e5e6eb;
        }
        .btn-upload {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 24px; font-size: 14px;
        }
    </style>
</head>
<body>
<div class="upload-container">
   
    <input type="file" name="package" id="packageFile" accept=".zip" style="display:none;">
    <div class="upload-dropzone" id="dropzone">
        <div class="upload-icon"><i class="fa fa-file-archive-o"></i></div>
        <div class="upload-text">点击选择或将 ZIP 文件拖拽到此处</div>
        <div class="upload-hint">仅支持 .zip 格式，最大 100MB</div>
    </div>

    <div class="file-preview" id="filePreview">
        <div class="file-preview-header">
            <i class="fa fa-file-zip-o file-preview-icon"></i>
            <span class="file-preview-name" id="fileName"></span>
            <i class="fa fa-times-circle file-preview-remove" id="fileRemove" title="移除文件"></i>
        </div>
        <div class="file-preview-info">
            <span><i class="fa fa-hdd-o"></i> <span id="fileSize"></span></span>
            <span><i class="fa fa-check-circle" style="color:#00b42a;"></i> 待上传</span>
        </div>
    </div>

    <div class="upload-tips">
        <div class="upload-tips-title"><i class="fa fa-lightbulb-o"></i> 上传说明</div>
        <ul>
            <li>升级包必须包含有效的 upgrade.json 配置文件</li>
            <li>系统将自动从 upgrade.json 解析版本信息（from_version、to_version、build）</li>
            <li>若已存在相同版本的升级包，将自动覆盖更新</li>
        </ul>
    </div>

    <div class="upload-actions">
        <button class="layui-btn layui-btn-primary" type="button" onclick="parent.layer.closeAll()">取消</button>
        <button class="layui-btn btn-upload" id="btnUpload" type="button" disabled><i class="fa fa-upload"></i> 上传</button>
    </div>
</div>

<script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
<script>
layui.use(['jquery', 'layer'], function(){
    var $ = layui.jquery,
        layer = layui.layer;

    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } });

    var $dropzone = $('#dropzone'),
        $fileInput = $('#packageFile'),
        $preview = $('#filePreview'),
        $btnUpload = $('#btnUpload');

    $dropzone.on('click', function(e) {
        if ($(e.target).closest('.file-preview-remove').length === 0) {
            $fileInput.click();
        }
    });

    $dropzone.on('dragover dragenter', function(e) {
        e.preventDefault();
        $(this).addClass('dragover');
    }).on('dragleave drop', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
    }).on('drop', function(e) {
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) handleFile(files[0]);
    });

    $fileInput.on('change', function() {
        if (this.files && this.files[0]) handleFile(this.files[0]);
    });

    $('#fileRemove').on('click', function(e) {
        e.stopPropagation();
        clearFile();
    });

    function handleFile(file) {
        if (file.type !== '' && !file.name.toLowerCase().endsWith('.zip')) {
            layer.msg('仅支持 ZIP 格式的升级包文件', {icon:2});
            return;
        }
        if (file.size > 104857600) {
            layer.msg('文件大小不能超过 100MB', {icon:2});
            return;
        }

        var dt = new DataTransfer();
        dt.items.add(file);
        $fileInput[0].files = dt.files;

        $('#fileName').text(file.name);
        $('#fileSize').formatFileSize(file.size);
        $preview.addClass('show');
        $dropzone.addClass('has-file');
        $btnUpload.prop('disabled', false);
    }

    function clearFile() {
        $fileInput.val('');
        $preview.removeClass('show');
        $dropzone.removeClass('has-file');
        $btnUpload.prop('disabled', true);
    }

    $.fn.formatFileSize = function(bytes) {
        if (bytes === 0) { this.text('0 B'); return this; }
        var units = ['B', 'KB', 'MB', 'GB'];
        var i = Math.floor(Math.log(bytes) / Math.log(1024));
        var size = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
        this.text(size + ' ' + units[i]);
        return this;
    };

    $btnUpload.on('click', function() {
        var fileInput = document.getElementById('packageFile');
        if (!fileInput.files || !fileInput.files[0]) {
            layer.msg('请选择升级包文件', {icon:2});
            return;
        }

        var formData = new FormData();
        formData.append('package', fileInput.files[0]);

        var loadIdx = layer.load({content: '正在上传，请稍候...', time: 0});

        $btnUpload.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 上传中...');

        $.ajax({
            url: '/admin/versionmgr/api/packages/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                layer.close(loadIdx);
                if (res.code === 0) {
                    layer.msg(res.message || '上传成功', {icon:1}, function() {
                        parent.layer.closeAll();
                        parent.layui.table.reload('pkg-table');
                    });
                } else {
                    $btnUpload.prop('disabled', false).html('<i class="fa fa-upload"></i> 上传');
                    layer.msg(res.message, {icon:2});
                }
            },
            error: function() {
                layer.close(loadIdx);
                $btnUpload.prop('disabled', false).html('<i class="fa fa-upload"></i> 上传');
                layer.msg('网络异常，上传失败', {icon:2});
            }
        });
    });
});
</script>
</body>
</html>
