XNSim/XNSimHtml/components/interface-config/variable-form.js

class VariableForm extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.mode = 'add';
        this.interfaceData = null;
        this.products = [];
        this.ataChapters = [];
        this.modelStructs = [];
    }

    connectedCallback() {
        this.render();
        this.addEventListeners();
    }

    // 接收父组件传递的选项数据
    setOptions(products, atas) {
        this.products = products;
        this.ataChapters = atas;
        this.updateProductOptions();
        this.updateAtaOptions();
    }

    updateProductOptions() {
        const select = this.shadowRoot.querySelector('#productName');
        if (select) {
            select.innerHTML = `
                <option value="">请选择构型</option>
                ${this.products.map(product => `
                    <option value="${product}" ${this.interfaceData?.ProductName === product ? 'selected' : ''}>
                        ${product}
                    </option>
                `).join('')}
            `;
        }
    }

    updateAtaOptions() {
        const select = this.shadowRoot.querySelector('#ataName');
        if (select) {
            select.innerHTML = `
                <option value="">请选择ATA章节</option>
                ${this.ataChapters.map(chapter => `
                    <option value="${chapter}" ${this.interfaceData?.ATAName === chapter ? 'selected' : ''}>
                        ${chapter}
                    </option>
                `).join('')}
            `;
        }
    }

    async loadModelStructs(productName, ataName) {
        try {
            const response = await fetch(`/api/interface/struct/list?systemName=XNSim&productName=${productName}&ataName=${ataName}`);
            if (!response.ok) {
                throw new Error('获取模型结构体列表失败');
            }
            const data = await response.json();
            this.modelStructs = data.map(item => item.ModelStructName);
            this.updateModelStructSelect();
        } catch (error) {
            console.error('加载模型结构体列表失败:', error);
            alert('加载模型结构体列表失败');
        }
    }

    updateModelStructSelect() {
        const select = this.shadowRoot.querySelector('#modelStructName');
        if (select) {
            select.innerHTML = `
                <option value="">请选择模型结构体</option>
                ${this.modelStructs.map(struct => `
                    <option value="${struct}" ${this.interfaceData?.ModelStructName === struct ? 'selected' : ''}>
                        ${struct}
                    </option>
                `).join('')}
            `;
        }
    }

    setMode(mode, data = null) {
        this.mode = mode;
        this.interfaceData = data;
        if (data) {
            // 保存原始数据
            this.originalData = {
                ProductName: data.ProductName,
                ATAName: data.ATAName,
                ModelStructName: data.ModelStructName,
                InterfaceName: data.InterfaceName
            };
            // 如果是在编辑模式下，需要先加载模型结构体列表
            this.loadModelStructs(data.ProductName, data.ATAName).then(() => {
                this.render();
                this.addEventListeners();
                this.show();
            });
        } else {
            this.render();
            this.addEventListeners();
            this.show();
        }
    }

    show() {
        const overlay = this.shadowRoot.querySelector('.form-overlay');
        if (overlay) {
            overlay.style.display = 'block';
        }
    }

    hide() {
        const overlay = this.shadowRoot.querySelector('.form-overlay');
        if (overlay) {
            overlay.style.display = 'none';
        }
    }

    addEventListeners() {
        const form = this.shadowRoot.querySelector('form');
        const cancelBtn = this.shadowRoot.querySelector('.cancel-btn');
        const productSelect = this.shadowRoot.querySelector('#productName');
        const ataSelect = this.shadowRoot.querySelector('#ataName');
        const interfaceNameInput = this.shadowRoot.querySelector('#interfaceName');
        const isArrayCheckbox = this.shadowRoot.querySelector('#interfaceIsArray');
        const arraySize1Input = this.shadowRoot.querySelector('#interfaceArraySize_1');
        const arraySize2Input = this.shadowRoot.querySelector('#interfaceArraySize_2');

        // 监听构型和ATA章节的变化
        productSelect.addEventListener('change', () => {
            const productName = productSelect.value;
            const ataName = ataSelect.value;
            if (productName && ataName) {
                this.loadModelStructs(productName, ataName);
            }
        });

        ataSelect.addEventListener('change', () => {
            const productName = productSelect.value;
            const ataName = ataSelect.value;
            if (productName && ataName) {
                this.loadModelStructs(productName, ataName);
            }
        });

        // 验证C++命名规范
        interfaceNameInput.addEventListener('input', (e) => {
            const value = e.target.value;
            // C++命名规范：以字母或下划线开头，只能包含字母、数字和下划线
            const isValid = /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(value);
            if (!isValid) {
                e.target.setCustomValidity('接口名称必须以字母或下划线开头，只能包含字母、数字和下划线');
            } else {
                e.target.setCustomValidity('');
            }
        });

        // 验证数组大小
        arraySize1Input.addEventListener('input', (e) => {
            const value = parseInt(e.target.value);
            if (value <= 1) {
                e.target.setCustomValidity('第一维大小必须大于1');
            } else {
                e.target.setCustomValidity('');
            }
        });

        arraySize2Input.addEventListener('input', (e) => {
            const value = e.target.value;
            if (value && parseInt(value) <= 1 && parseInt(value) !== 0) {
                e.target.setCustomValidity('第二维大小必须大于1');
            } else {
                e.target.setCustomValidity('');
            }
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();

            const formData = new FormData(form);
            const data = {
                SystemName: 'XNSim',
                ProductName: formData.get('productName'),
                ATAName: formData.get('ataName'),
                ModelStructName: formData.get('modelStructName'),
                InterfaceName: formData.get('interfaceName'),
                InterfaceType: formData.get('interfaceType'),
                InterfaceOption: 1,
                InterfaceIsArray: formData.get('interfaceIsArray') ? 1 : 0,
                InterfaceArraySize_1: formData.get('interfaceArraySize_1'),
                InterfaceArraySize_2: formData.get('interfaceArraySize_2'),
                InterfaceNotes: formData.get('interfaceNotes')
            };

            // 如果是编辑模式，添加原始数据
            if (this.mode === 'edit' && this.originalData) {
                data.originalProductName = this.originalData.ProductName;
                data.originalATAName = this.originalData.ATAName;
                data.originalModelStructName = this.originalData.ModelStructName;
                data.originalInterfaceName = this.originalData.InterfaceName;
            }

            // 验证必填字段
            const requiredFields = [
                'SystemName',
                'ProductName',
                'ATAName',
                'ModelStructName',
                'InterfaceName',
                'InterfaceType'
            ];

            const missingFields = requiredFields.filter(field => !data[field]);
            if (missingFields.length > 0) {
                alert(`请填写以下必填字段：${missingFields.join(', ')}`);
                return;
            }

            // 如果是数组类型，验证数组大小
            if (data.InterfaceIsArray === 1) {
                if (!data.InterfaceArraySize_1 || data.InterfaceArraySize_1 <= 1) {
                    alert('第一维大小必须大于1');
                    return;
                }
                if (data.InterfaceArraySize_2 && data.InterfaceArraySize_2 <= 1 && data.InterfaceArraySize_2 !== 0) {
                    alert('第二维大小必须大于1或等于0');
                    return;
                }
            }

            this.dispatchEvent(new CustomEvent('save-success', {
                detail: { ...data, mode: this.mode }
            }));
            this.hide();
        });

        cancelBtn.addEventListener('click', () => {
            this.hide();
        });

        // 监听数组大小输入框的变化
        isArrayCheckbox.addEventListener('change', () => {
            arraySize1Input.disabled = !isArrayCheckbox.checked;
            arraySize2Input.disabled = !isArrayCheckbox.checked;
            if (!isArrayCheckbox.checked) {
                arraySize1Input.value = '';
                arraySize2Input.value = '';
            }
        });
    }

    render() {
        const interfaceTypes = [
            'char', 'octet', 'short', 'unsigned short',
            'long', 'unsigned long', 'long long', 'unsigned long long',
            'float', 'double', 'long double', 'boolean'
        ];

        this.shadowRoot.innerHTML = `
            <style>
                .form-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 1000;
                }

                .form-container {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    width: 500px;
                    max-height: 90vh;
                    overflow-y: auto;
                }

                .form-title {
                    margin: 0 0 20px 0;
                    font-size: 18px;
                    font-weight: bold;
                }

                .form-group {
                    margin-bottom: 15px;
                }

                label {
                    display: block;
                    margin-bottom: 5px;
                    font-weight: bold;
                }

                select, input[type="text"], input[type="number"] {
                    width: 100%;
                    padding: 8px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    box-sizing: border-box;
                }

                .checkbox-group {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }

                .checkbox-group input[type="checkbox"] {
                    width: auto;
                }

                .button-group {
                    display: flex;
                    justify-content: flex-end;
                    gap: 10px;
                    margin-top: 20px;
                }

                button {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                }

                .save-btn {
                    background-color: #4CAF50;
                    color: white;
                }

                .cancel-btn {
                    background-color: #f44336;
                    color: white;
                }

                button:hover {
                    opacity: 0.9;
                }

                .array-size-group {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }

                .array-size-group input[type="number"] {
                    width: 100px;
                }
            </style>
            <div class="form-overlay">
                <div class="form-container">
                    <h2 class="form-title">${this.mode === 'add' ? '添加接口' : '编辑接口'}</h2>
                    <form>
                        <div class="form-group">
                            <label for="productName">构型</label>
                            <select id="productName" name="productName" required>
                                <option value="">请选择构型</option>
                                ${this.products.map(product => `
                                    <option value="${product}" ${this.interfaceData?.ProductName === product ? 'selected' : ''}>
                                        ${product}
                                    </option>
                                `).join('')}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="ataName">ATA章节</label>
                            <select id="ataName" name="ataName" required>
                                <option value="">请选择ATA章节</option>
                                ${this.ataChapters.map(chapter => `
                                    <option value="${chapter}" ${this.interfaceData?.ATAName === chapter ? 'selected' : ''}>
                                        ${chapter}
                                    </option>
                                `).join('')}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="modelStructName">接口结构体名</label>
                            <select id="modelStructName" name="modelStructName" required>
                                <option value="">请选择接口结构体</option>
                                ${this.modelStructs.map(struct => `
                                    <option value="${struct}" ${this.interfaceData?.ModelStructName === struct ? 'selected' : ''}>
                                        ${struct}
                                    </option>
                                `).join('')}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="interfaceName">接口名称</label>
                            <input type="text" id="interfaceName" name="interfaceName" required
                                value="${this.interfaceData?.InterfaceName || ''}">
                        </div>

                        <div class="form-group">
                            <label for="interfaceType">数据类型</label>
                            <select id="interfaceType" name="interfaceType" required>
                                <option value="">请选择数据类型</option>
                                ${interfaceTypes.map(type => `
                                    <option value="${type}" ${this.interfaceData?.InterfaceType === type ? 'selected' : ''}>
                                        ${type}
                                    </option>
                                `).join('')}
                            </select>
                        </div>

                        <div class="form-group">
                            <div class="checkbox-group">
                                <input type="checkbox" id="interfaceIsArray" name="interfaceIsArray"
                                    ${this.interfaceData?.InterfaceIsArray === 1 ? 'checked' : ''}>
                                <label for="interfaceIsArray">是否为数组</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>数组大小</label>
                            <div class="array-size-group">
                                <input type="number" id="interfaceArraySize_1" name="interfaceArraySize_1"
                                    value="${this.interfaceData?.InterfaceArraySize_1 || ''}"
                                    ${this.interfaceData?.InterfaceIsArray !== 1 ? 'disabled' : ''}
                                    placeholder="第一维">
                                <span>×</span>
                                <input type="number" id="interfaceArraySize_2" name="interfaceArraySize_2"
                                    value="${this.interfaceData?.InterfaceArraySize_2 || ''}"
                                    ${this.interfaceData?.InterfaceIsArray !== 1 ? 'disabled' : ''}
                                    placeholder="第二维">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="interfaceNotes">备注</label>
                            <input type="text" id="interfaceNotes" name="interfaceNotes"
                                value="${this.interfaceData?.InterfaceNotes || ''}">
                        </div>

                        <div class="button-group">
                            <button type="button" class="cancel-btn">取消</button>
                            <button type="submit" class="save-btn">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        `;
    }
}

customElements.define('variable-form', VariableForm);