XNSim/XNSimHtml/components/interface-config/data-table.js

class InterfaceDataTable extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.data = [];
        this.filteredData = [];
        this.selectedRows = new Set();
        this.searchKeyword = '';
    }

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

    setData(data) {
        this.data = data;
        this.updateProductFilter();
        this.renderTable();
    }

    setSearchKeyword(keyword) {
        this.searchKeyword = keyword.toLowerCase();
        this.updateProductFilter();
        this.renderTable();
    }

    updateProductFilter() {
        const headerTools = document.querySelector('header-tools');
        if (headerTools) {
            const selectedProduct = headerTools.selectedProduct;
            this.filterData(selectedProduct);
        } else {
            // 如果没有找到 header-tools 组件，显示所有数据
            this.filteredData = [...this.data];
        }
    }

    filterData(selectedProduct) {
        // 首先根据构型过滤
        let filteredByProduct = selectedProduct && selectedProduct !== '' 
            ? this.data.filter(item => item.ProductName === selectedProduct)
            : [...this.data];

        // 然后根据搜索关键词过滤
        if (this.searchKeyword) {
            this.filteredData = filteredByProduct.filter(item => 
                item.ATAName.toLowerCase().includes(this.searchKeyword) ||
                item.ModelStructName.toLowerCase().includes(this.searchKeyword) ||
                item.InterfaceName.toLowerCase().includes(this.searchKeyword)
            );
        } else {
            this.filteredData = filteredByProduct;
        }
    }

    getSelectedRows() {
        return Array.from(this.selectedRows);
    }

    addEventListeners() {
        this.shadowRoot.addEventListener('click', (e) => {
            const row = e.target.closest('tr');
            if (!row) return;

            if (e.target.type === 'checkbox') {
                const id = row.dataset.id;
                if (e.target.checked) {
                    this.selectedRows.add(id);
                } else {
                    this.selectedRows.delete(id);
                }
                this.updateSelectedRows();
            }
        });

        // 监听构型变化事件
        document.addEventListener('product-change', () => {
            this.updateProductFilter();
            this.renderTable();
        });

        // 监听搜索事件
        document.addEventListener('search', (e) => {
            this.setSearchKeyword(e.detail.keyword);
        });
    }

    updateSelectedRows() {
        const checkboxes = this.shadowRoot.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.selectedRows.has(checkbox.closest('tr').dataset.id);
        });
    }

    renderTable() {
        const tbody = this.shadowRoot.querySelector('tbody');
        tbody.innerHTML = '';

        this.filteredData.forEach(item => {
            const tr = document.createElement('tr');
            tr.dataset.id = `${item.ProductName}-${item.ATAName}-${item.ModelStructName}-${item.InterfaceName}`;
            
            tr.innerHTML = `
                <td><input type="checkbox"></td>
                <td>${item.ProductName}</td>
                <td>${item.ATAName}</td>
                <td>${item.ModelStructName}</td>
                <td>${item.InterfaceName}</td>
                <td>${item.InterfaceType}</td>
                <td>${item.InterfaceOption === 1 ? '是' : '否'}</td>
                <td>${item.InterfaceIsArray === 1 ? '是' : '否'}</td>
                <td>${item.InterfaceArraySize_1 || ''}</td>
                <td>${item.InterfaceArraySize_2 || ''}</td>
                <td>${item.InterfaceNotes || ''}</td>
                <td>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                </td>
            `;

            tr.querySelector('.edit-btn').addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('edit', {
                    detail: {
                        ProductName: item.ProductName,
                        ATAName: item.ATAName,
                        ModelStructName: item.ModelStructName,
                        InterfaceName: item.InterfaceName
                    }
                }));
            });

            tr.querySelector('.delete-btn').addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('delete', {
                    detail: {
                        ProductName: item.ProductName,
                        ATAName: item.ATAName,
                        ModelStructName: item.ModelStructName,
                        InterfaceName: item.InterfaceName
                    }
                }));
            });

            tbody.appendChild(tr);
        });
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    overflow-x: auto;
                }

                table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 14px;
                }

                th, td {
                    padding: 8px;
                    text-align: left;
                    border-bottom: 1px solid #ddd;
                }

                th {
                    background-color: #f5f5f5;
                    font-weight: bold;
                }

                tr:hover {
                    background-color: #f9f9f9;
                }

                .edit-btn, .delete-btn {
                    padding: 4px 8px;
                    margin: 0 4px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                }

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

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

                input[type="checkbox"] {
                    cursor: pointer;
                }
            </style>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>构型</th>
                        <th>ATA章节</th>
                        <th>模型结构体名</th>
                        <th>接口</th>
                        <th>接口类型</th>
                        <th>是否可选</th>
                        <th>是否为数组</th>
                        <th>第一维大小</th>
                        <th>第二维大小</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        `;

        this.shadowRoot.querySelector('#select-all').addEventListener('change', (e) => {
            const checkboxes = this.shadowRoot.querySelectorAll('input[type="checkbox"]:not(#select-all)');
            checkboxes.forEach(checkbox => {
                checkbox.checked = e.target.checked;
                const id = checkbox.closest('tr').dataset.id;
                if (e.target.checked) {
                    this.selectedRows.add(id);
                } else {
                    this.selectedRows.delete(id);
                }
            });
        });
    }
}

customElements.define('interface-data-table', InterfaceDataTable);