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

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

    setMode(mode, data = null) {
        this.mode = mode;
        this.interfaceData = data;
        this.updateForm();
    }

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

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

    updateForm() {
        const form = this.shadowRoot.querySelector('form');
        if (this.mode === 'edit' && this.interfaceData) {
            form.querySelector('[name="systemName"]').value = this.interfaceData.SystemName;
            form.querySelector('[name="productName"]').value = this.interfaceData.ProductName;
            form.querySelector('[name="ataName"]').value = this.interfaceData.ATAName;
            form.querySelector('[name="modelStructName"]').value = this.interfaceData.ModelStructName;
            form.querySelector('[name="interfaceName"]').value = this.interfaceData.InterfaceName;
            form.querySelector('[name="interfaceType"]').value = this.interfaceData.InterfaceType;
            form.querySelector('[name="interfaceOption"]').value = this.interfaceData.InterfaceOption;
            form.querySelector('[name="interfaceIsArray"]').checked = this.interfaceData.InterfaceIsArray;
            form.querySelector('[name="interfaceArraySize_1"]').value = this.interfaceData.InterfaceArraySize_1 || '';
            form.querySelector('[name="interfaceArraySize_2"]').value = this.interfaceData.InterfaceArraySize_2 || '';
            form.querySelector('[name="interfaceNotes"]').value = this.interfaceData.InterfaceNotes || '';
        } else {
            form.reset();
            form.querySelector('[name="systemName"]').value = 'XNSim';
            form.querySelector('[name="productName"]').value = 'C909';
        }
    }

    addEventListeners() {
        const form = this.shadowRoot.querySelector('form');
        const closeBtn = this.shadowRoot.querySelector('.close-btn');
        const cancelBtn = this.shadowRoot.querySelector('.cancel-btn');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const formData = new FormData(form);
            const interfaceData = {
                SystemName: formData.get('systemName'),
                ProductName: formData.get('productName'),
                ATAName: formData.get('ataName'),
                ModelStructName: formData.get('modelStructName'),
                InterfaceName: formData.get('interfaceName'),
                InterfaceType: formData.get('interfaceType'),
                InterfaceOption: formData.get('interfaceOption'),
                InterfaceIsArray: formData.get('interfaceIsArray') === 'on',
                InterfaceArraySize_1: formData.get('interfaceArraySize_1') || null,
                InterfaceArraySize_2: formData.get('interfaceArraySize_2') || null,
                InterfaceNotes: formData.get('interfaceNotes') || null
            };

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

            this.hide();
        });

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

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

                .form-content {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    padding: 20px;
                    border-radius: 8px;
                    width: 500px;
                    max-height: 90vh;
                    overflow-y: auto;
                }

                .form-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                }

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

                .close-btn {
                    background: none;
                    border: none;
                    font-size: 20px;
                    cursor: pointer;
                }

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

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

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

                textarea {
                    height: 100px;
                    resize: vertical;
                }

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

                .save-btn,
                .cancel-btn {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                }

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

                .cancel-btn {
                    background-color: #f44336;
                    color: white;
                }
            </style>
            <div class="form-dialog">
                <div class="form-content">
                    <div class="form-header">
                        <div class="form-title">${this.mode === 'add' ? '添加接口' : '编辑接口'}</div>
                        <button class="close-btn">&times;</button>
                    </div>
                    <form>
                        <div class="form-group">
                            <label>系统名称</label>
                            <input type="text" name="systemName" required>
                        </div>
                        <div class="form-group">
                            <label>产品名称</label>
                            <input type="text" name="productName" required>
                        </div>
                        <div class="form-group">
                            <label>ATA章节</label>
                            <input type="text" name="ataName" required>
                        </div>
                        <div class="form-group">
                            <label>模型结构名</label>
                            <input type="text" name="modelStructName" required>
                        </div>
                        <div class="form-group">
                            <label>接口名</label>
                            <input type="text" name="interfaceName" required>
                        </div>
                        <div class="form-group">
                            <label>接口类型</label>
                            <select name="interfaceType" required>
                                <option value="int">int</option>
                                <option value="float">float</option>
                                <option value="double">double</option>
                                <option value="bool">bool</option>
                                <option value="string">string</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>接口选项</label>
                            <input type="text" name="interfaceOption" required>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="interfaceIsArray">
                                是否为数组
                            </label>
                        </div>
                        <div class="form-group">
                            <label>数组大小1</label>
                            <input type="number" name="interfaceArraySize_1">
                        </div>
                        <div class="form-group">
                            <label>数组大小2</label>
                            <input type="number" name="interfaceArraySize_2">
                        </div>
                        <div class="form-group">
                            <label>备注</label>
                            <textarea name="interfaceNotes"></textarea>
                        </div>
                        <div class="form-footer">
                            <button type="button" class="cancel-btn">取消</button>
                            <button type="submit" class="save-btn">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        `;
    }
}

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