{extend name="admin/layout" /}
{block name="title"}爬取数据{/block}
{block name="main"}

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">爬取数据</h3>
            </div>
            <div class="panel-body">
                <form id="crawlForm" class="form-horizontal" onsubmit="return startCrawl(this)">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">项目类型</label>
                        <div class="col-sm-9">
                            <select name="pid" class="form-control" required>
                                {volist name="list" id="vo"}
                                <option value="{$vo.pid}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">ProjectV1Id</label>
                        <div class="col-sm-9">
                            <input type="number" name="projectV1Id" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">ClassV1Id</label>
                        <div class="col-sm-9">
                            <input type="number" name="classV1Id" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fa fa-play"></i> 开始爬取
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">爬取进度</h3>
            </div>
            <div class="panel-body">
                <div id="progressPanel" style="display: none;">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%">
                            0%
                        </div>
                    </div>
                    <div class="well well-sm">
                        <p><strong>当前状态：</strong><span id="statusText">准备中...</span></p>
                        <p><strong>总页数：</strong><span id="totalPages">0</span></p>
                        <p><strong>当前页：</strong><span id="currentPage">0</span></p>
                        <p><strong>新增数量：</strong><span id="insertCount">0</span></p>
                        <p><strong>更新数量：</strong><span id="updateCount">0</span></p>
                        <p><strong>错误数量：</strong><span id="errorCount">0</span></p>
                    </div>
                </div>
                <div id="noTaskPanel" class="alert alert-info">
                    暂无进行中的任务
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="script"}
<script>
let currentTaskId = null;
let progressTimer = null;

function startCrawl(form) {
    const formData = new FormData(form);
    
    // 禁用提交按钮
    $('#submitBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 处理中...');
    
    $.ajax({
        url: '/task/get',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res.code === 200) {
                layer.msg('任务已开始', {icon: 1});
                currentTaskId = res.data.task_id;
                startProgress();
                $('#progressPanel').show();
                $('#noTaskPanel').hide();
            } else {
                layer.msg(res.message, {icon: 2});
                $('#submitBtn').prop('disabled', false).html('<i class="fa fa-play"></i> 开始爬取');
            }
        },
        error: function() {
            layer.msg('服务器错误', {icon: 2});
            $('#submitBtn').prop('disabled', false).html('<i class="fa fa-play"></i> 开始爬取');
        }
    });
    
    return false;
}

function startProgress() {
    if (progressTimer) {
        clearInterval(progressTimer);
    }
    
    progressTimer = setInterval(function() {
        if (!currentTaskId) return;
        
        $.get('/task/progress', {task_id: currentTaskId}, function(res) {
            if (res.code === 200) {
                updateProgress(res.data);
                
                if (res.data.status === 'completed') {
                    clearInterval(progressTimer);
                    $('#submitBtn').prop('disabled', false).html('<i class="fa fa-play"></i> 开始爬取');
                    layer.msg('任务已完成', {icon: 1});
                }
            }
        });
    }, 1000);
}

function updateProgress(data) {
    $('.progress-bar').css('width', data.progress + '%').text(data.progress + '%');
    $('#statusText').text(data.status === 'running' ? '进行中' : '已完成');
    $('#totalPages').text(data.total_pages);
    $('#currentPage').text(data.current_page);
    $('#insertCount').text(data.insert_count);
    $('#updateCount').text(data.update_count);
    $('#errorCount').text(data.error_count);
}
</script>
{/block}