<?php
/**
 * defaultpro 移动端发布页
 */
$currentPage = 'publish';
$pageType = 'publish';
$bodyClass = 'publish-page';
$hideTabBar = true;
$showBack = true;
$headerTitle = '发布动态';
$headerRight = '<button type="button" class="pub-publish-btn" id="headerPublishBtn">发布</button>';
$this->setLayout('app');

$userModel = new UserModel();
$currentUser = $userModel->find($_SESSION['user_id']);
?>
<div class="pub-page">
    <div class="pub-user-section">
        <img class="pub-user-avatar" src="<?= Helper::avatar($currentUser['avatar'], $currentUser['username']) ?>" alt="头像">
        <div class="pub-user-info">
            <div class="pub-user-name"><?= $this->escape($currentUser['username']) ?></div>
            <div class="pub-user-privacy">
                <i class="fa-solid fa-earth-americas"></i> 公开
            </div>
        </div>
    </div>
    
    <div class="pub-content-section">
        <textarea class="pub-textarea" id="postContent" placeholder="分享你的新鲜事..." rows="5"></textarea>
        
        <div id="imagePreview" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;"></div>
        
        <div class="pub-toolbar">
            <button class="pub-tool" id="imageBtn">
                <i class="fa-solid fa-image"></i>
                <span>图片</span>
            </button>
            <button class="pub-tool" id="topicBtn">
                <i class="fa-solid fa-hashtag"></i>
                <span>话题</span>
            </button>
            <button class="pub-tool" id="locationBtn">
                <i class="fa-solid fa-location-dot"></i>
                <span>位置</span>
            </button>
            <button class="pub-tool" id="anonymousBtn">
                <i class="fa-regular fa-circle-user"></i>
                <span>匿名</span>
            </button>
        </div>
    </div>
    
    <input type="file" id="imageInput" accept="image/*" multiple style="display:none;">
</div>

<script>
(function() {
    var images = [];
    var isAnonymous = false;
    
    $('#imageBtn').on('click', function() {
        $('#imageInput').click();
    });
    
    $('#imageInput').on('change', function(e) {
        var files = e.target.files;
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append('images[]', files[i]);
        }
        
        $.ajax({
            url: App.baseUrl + '/mobileApi/uploadImage',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.code === 0) {
                    images.push(res.data.path);
                    renderImages();
                } else {
                    alert(res.message || '上传失败');
                }
            }
        });
    });
    
    function renderImages() {
        var html = images.map(function(img, i) {
            return '<div class="preview-item" style="position:relative;"><img src="'+img+'" style="width:80px;height:80px;object-fit:cover;border-radius:8px;"><span class="remove-img" style="position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#ff4d4f;color:#fff;border-radius:50%;text-align:center;line-height:20px;cursor:pointer;" data-index="'+i+'">×</span></div>';
        }).join('');
        $('#imagePreview').html(html);
        
        $('.remove-img').on('click', function() {
            var index = $(this).data('index');
            images.splice(index, 1);
            renderImages();
        });
    }
    
    $('#anonymousBtn').on('click', function() {
        isAnonymous = !isAnonymous;
        $(this).toggleClass('active', isAnonymous);
    });
    
    $('#topicBtn').on('click', function() {
        var content = $('#postContent').val();
        $('#postContent').val(content + '#话题#').focus();
    });
    
    $('#headerPublishBtn').on('click', function() {
        var content = $('#postContent').val().trim();
        if (!content && images.length === 0) {
            alert('请输入内容或上传图片');
            return;
        }
        
        $(this).prop('disabled', true).text('发布中...');
        
        $.ajax({
            url: App.baseUrl + '/mobileApi/publish',
            type: 'POST',
            data: JSON.stringify({
                content: content,
                images: images
            }),
            contentType: 'application/json',
            success: function(res) {
                if (res.code === 0) {
                    alert('发布成功');
                    window.location.href = App.baseUrl + '/mobile';
                } else {
                    alert(res.message || '发布失败');
                    $('#headerPublishBtn').prop('disabled', false).text('发布');
                }
            },
            error: function() {
                alert('网络错误');
                $('#headerPublishBtn').prop('disabled', false).text('发布');
            }
        });
    });
})();
</script>
