<?php
/**
 * 芋头CMS
 * ============================================================================
 * 版权所有 2016-2028 沅陵县乌托邦网络服务有限公司，并保留所有权利。
 * 网站地址: http://www.yutoucms.cn
 * ----------------------------------------------------------------------------
 * 如果商业用途务必到官方购买正版授权, 以免引起不必要的法律纠纷.
 * ============================================================================
 * Author: 芋头 <mxgsf@qq.com>
 * Date: 2026-5-20
 */


?>

<!-- 图片上传组件 -->
<div class="upload-wrapper" id="uploadWrapper">
    <div class="upload-input-group">
        <input type="text" name="<?php echo $name ?? 'image'; ?>" id="<?php echo $id ?? 'imageInput'; ?>" value="<?php echo $value ?? ''; ?>" placeholder="图片地址或上传本地图片" class="upload-url-input" style="flex:1;">
        <label for="<?php echo $id ?? 'imageInput'; ?>Upload" class="upload-btn">
            📁 上传图片
        </label>
    </div>
    <div class="upload-preview <?php echo !empty($value) ? 'has-image' : ''; ?>" id="<?php echo $id ?? 'imageInput'; ?>Preview">
        <?php if (!empty($value)): ?>
        <img src="<?php echo htmlspecialchars($value); ?>" alt="预览">
        <?php else: ?>
        <div class="placeholder">📷<br>图片预览</div>
        <?php endif; ?>
    </div>
</div>
<input type="file" id="<?php echo $id ?? 'imageInput'; ?>Upload" class="upload-input" accept="image/*">

<script>
// 图片上传预览
document.getElementById('<?php echo $id ?? "imageInput"; ?>Upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var preview = document.getElementById('<?php echo $id ?? "imageInput"; ?>Preview');
            preview.innerHTML = '<img src="' + e.target.result + '" alt="预览">';
            preview.classList.add('has-image');
            document.getElementById('<?php echo $id ?? "imageInput"; ?>').value = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

// 外部输入更新预览
document.getElementById('<?php echo $id ?? "imageInput"; ?>').addEventListener('input', function(e) {
    var preview = document.getElementById('<?php echo $id ?? "imageInput"; ?>Preview');
    if (e.target.value) {
        preview.innerHTML = '<img src="' + e.target.value + '" alt="预览">';
        preview.classList.add('has-image');
    } else {
        preview.innerHTML = '<div class="placeholder">📷<br>图片预览</div>';
        preview.classList.remove('has-image');
    }
});
</script>

<style>
.upload-url-input {
    padding: 12px 18px !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.upload-url-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    outline: none !important;
}
</style>

<?php if (!empty($multi)): ?>
<!-- 多图上传模式 -->
<div class="upload-list" id="<?php echo $id ?? 'imageInput'; ?>List">
    <!-- 已有图片将通过AJAX加载 -->
</div>
<button type="button" class="upload-btn" onclick="addMultiImage('<?php echo $id ?? "imageInput"; ?>')" style="margin-top:12px;">
    ➕ 添加图片
</button>

<script>
var <?php echo $id ?? 'imageInput'; ?>Images = <?php echo json_encode($value ? explode(',', $value) : []); ?>;

function renderMultiImageList(containerId) {
    var container = document.getElementById(containerId + 'List');
    if (!container) return;
    container.innerHTML = '';
    <?php echo $id ?? 'imageInput'; ?>Images.forEach(function(url, index) {
        if (url) {
            var item = document.createElement('div');
            item.className = 'upload-list-item';
            item.innerHTML = '<img src="' + url + '" alt="图片' + (index + 1) + '"><button type="button" class="remove-btn" onclick="removeMultiImage(\'' + containerId + '\', ' + index + ')">✕</button>';
            container.appendChild(item);
        }
    });
}

function addMultiImage(containerId) {
    var input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = function(e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                <?php echo $id ?? 'imageInput'; ?>Images.push(e.target.result);
                renderMultiImageList(containerId);
                updateMultiImageValue(containerId);
            };
            reader.readAsDataURL(file);
        }
    };
    input.click();
}

function removeMultiImage(containerId, index) {
    <?php echo $id ?? 'imageInput'; ?>Images.splice(index, 1);
    renderMultiImageList(containerId);
    updateMultiImageValue(containerId);
}

function updateMultiImageValue(containerId) {
    document.getElementById(containerId).value = <?php echo $id ?? 'imageInput'; ?>Images.join(',');
}

renderMultiImageList('<?php echo $id ?? "imageInput"; ?>');
</script>
<?php endif; ?>