function generateShapeDict(shape, params) {
    if (shape === 'rect') {
        return {
            method: 'rect',
            pos: params.pos || [0, 0],
            size: params.size || [1, 1],
            color: params.color || [255, 255, 255],
            width: params.width || 0
        };
    } else if (shape === 'line') {
        return {
            method: 'line',
            start_pos: params.start_pos || [0, 0],
            end_pos: params.end_pos || [1, 1],
            color: params.color || [255, 255, 255]
        };
    } else if (shape === 'circle') {
        return {
            method: 'circle',
            center: params.center || [0, 0],
            radius: params.radius || 1,
            color: params.color || [255, 255, 255]
        };
    } else if (shape === 'ellipse') {
        return {
            method: 'ellipse',
            pos: params.pos || [0, 0],
            size: params.size || [1, 1],
            color: params.color || [255, 255, 255]
        };
    } else if (shape === 'polygon') {
        return {
            method: 'polygon',
            pointlist: params.pointlist || [],
            color: params.color || [255, 255, 255]
        };
    } else if (shape === 'arc') {
        return {
            method: 'arc',
            pos: params.pos || [0, 0],
            size: params.size || [1, 1],
            color: params.color || [255, 255, 255],
            start_angle: params.start_angle || 0,
            stop_angle: params.stop_angle || 3.14
        };
    } else if (shape === 'point') {
        return {
            method: 'point',
            pos: params.pos || [0, 0],
            color: params.color || [255, 255, 255]
        };
    } else if (shape === 'lines') {
        return {
            method: 'lines',
            pointlist: params.pointlist || [],
            color: params.color || [255, 255, 255]
        };
    } else {
        throw new Error("Unsupported shape type");
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const shapeSelect = document.getElementById('shape');
    const paramsDiv = document.getElementById('params');
    const generateButton = document.getElementById('generate');
    const resultDiv = document.getElementById('result');

    function createInput(label, id, type = 'text') {
        const input = document.createElement('input');
        input.type = type;
        input.id = id;
        const labelElement = document.createElement('label');
        labelElement.textContent = label + ': ';
        labelElement.setAttribute('for', id);
        paramsDiv.appendChild(labelElement);
        paramsDiv.appendChild(input);
        paramsDiv.appendChild(document.createElement('br'));
        return input;
    }

    function updateParamsInputs() {
        paramsDiv.innerHTML = '';
        const shape = shapeSelect.value;

        if (shape === 'rect') {
            createInput('矩形位置 (x y)', 'pos');
            createInput('矩形大小 (width height)', 'size');
            createInput('矩形颜色 (R G B)', 'color');
            createInput('矩形边框宽度', 'width', 'number');
        } else if (shape === 'line') {
            createInput('起始位置 (x y)', 'start_pos');
            createInput('结束位置 (x y)', 'end_pos');
            createInput('线条颜色 (R G B)', 'color');
        } else if (shape === 'circle') {
            createInput('圆心位置 (x y)', 'center');
            createInput('圆的半径', 'radius', 'number');
            createInput('圆的颜色 (R G B)', 'color');
        } else if (shape === 'ellipse') {
            createInput('椭圆位置 (x y)', 'pos');
            createInput('椭圆大小 (width height)', 'size');
            createInput('椭圆颜色 (R G B)', 'color');
        } else if (shape === 'polygon') {
            createInput('多边形的点 (x1 y1 x2 y2 ...)', 'pointlist');
            createInput('多边形颜色 (R G B)', 'color');
        } else if (shape === 'arc') {
            createInput('弧的位置 (x y)', 'pos');
            createInput('弧的大小 (width height)', 'size');
            createInput('弧的颜色 (R G B)', 'color');
            createInput('弧的起始角度 (弧度制)', 'start_angle', 'number');
            createInput('弧的结束角度 (弧度制)', 'stop_angle', 'number');
        } else if (shape === 'point') {
            createInput('点的位置 (x y)', 'pos');
            createInput('点的颜色 (R G B)', 'color');
        } else if (shape === 'lines') {
            createInput('线段的点 (x1 y1 x2 y2 ...)', 'pointlist');
            createInput('线段颜色 (R G B)', 'color');
        }
    }

    shapeSelect.addEventListener('change', updateParamsInputs);
    updateParamsInputs();

    generateButton.addEventListener('click', function() {
        const shape = shapeSelect.value;
        const params = {};
        const inputs = paramsDiv.querySelectorAll('input');

        inputs.forEach(input => {
            if (input.id === 'pointlist') {
                const points = input.value.split(' ').map(Number);
                params.pointlist = [];
                for (let i = 0; i < points.length; i += 2) {
                    params.pointlist.push([points[i], points[i + 1]]);
                }
            } else if (input.id === 'pos' || input.id === 'size' || input.id === 'start_pos' || input.id === 'end_pos' || input.id === 'center' || input.id === 'color') {
                params[input.id] = input.value.split(' ').map(Number);
            } else if (input.type === 'number') {
                params[input.id] = parseFloat(input.value);
            } else {
                params[input.id] = input.value;
            }
        });

        try {
            const shapeDict = generateShapeDict(shape, params);
            resultDiv.innerHTML = '<pre>' + JSON.stringify(shapeDict, null, 2) + '</pre>';
        } catch (error) {
            resultDiv.innerHTML = '<p>错误: ' + error.message + '</p>';
        }
    });
});