Vue.component('WarehouseArticlePacket', {
    //language=Vue
    template: `
      <tt-card>
        <tt-table-crud @openHistory="historyModal = true; historyModalId = $event.id" ref="WarehouseArticlePacketCrud">

          <template v-slot:subitems="{row}">
            <template v-for="item in JSON.parse(row.subItems)">
                        <span v-if="articles.find(article => article.value === item.id)">
                        {{item.amount + 'x '}}{{articles.find(article => article.value === item.id).text}}<br>
                        </span>
              <span v-else></span>
            </template>
          </template>

          <template v-slot:subitems-modal="{crudModalData}">
            <tt-positions-manager :config="WarehouseArticlePacketItemsConfig" v-model="crudModalData.subItems"/>
          </template>

        </tt-table-crud>
      </tt-card>
    `, data() {
        return {
            window: window,
            historyModal: false,
            historyModalId: null,
            WarehouseArticlePacketItemsConfig: {
                fields: {
                    id: {type: 'input-article', label: 'Artikel', customFieldReference: 'WarehouseArticle'},
                    amount: {type: 'input', label: 'Menge', inputType: 'number'},
                },
                validateFormOptions: [
                    {key: 'id', message: 'Bitte füllen Sie den Artikel aus'},
                    {key: 'amount', message: 'Bitte füllen Sie die Menge aus'},
                ]
            },
            articles: [],
        }
    }, beforeMount() {
        // Dynamically filter articles based on the user's shop context
        // This assumes TT_CONFIG is available and contains userAddressId
        const userAddressId = window['TT_CONFIG']['userAddressId'];
        let articleFilter = {};
        if (userAddressId === 209) {
            articleFilter = { isEShop: 1 };
        } else if (userAddressId === 210) {
            articleFilter = { isSbidiShop: 1 };
        }

        // The current implementation directly uses `window['TT_CONFIG']['CRUD_CONFIG'].columns.find(...)`
        // which might not reflect the filtered articles.
        // To properly filter, the `input-article` component or its underlying API call needs to be aware of the shop context.
        // For now, this will just get all articles that were passed from the backend during initial config.
        // A more robust solution would involve modifying the `WarehouseArticle/autocomplete` API to accept shop filters.
        this.articles = window['TT_CONFIG']['CRUD_CONFIG'].columns.find(column => column.key === 'subItems').modal.items;
    }
})