Vue.component('warehouse-shipping-note-positions', {
    //language=Vue
    props:       {
        positions: Array,
        hoursEntries: Array
    }, data() {
        return {
            articleData: {}, loading: false, articlePacketData: {}, userData: {}
        }
    }, template: `
                   <div>
                     <div v-if="loading" class="text-center">
                       <i class="fa fa-spinner fa-spin"></i>
                     </div>


                     <ul v-if="!loading">
                       <li v-for="position in positions">
                         <span>{{ position.amount }}x
                           {{ position.article ? articleData[position.article]?.text : position.articlePacket ? articlePacketData[position.articlePacket]?.text : position.articleText }}</span>
                       </li>
                       <template v-for="entry in hoursEntries">
                       <li><span>{{ entry.hourCount }}h Arbeitszeit</span></li>
                         <li v-if="entry.carId">{{entry.kilometerCount}}km Anfahrt</li>
                       </template>
                     </ul>
                   </div>
                 `, async mounted() {
        this.loading = true;
        for (const position of this.positions) {
            if (position.article) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticle/autoComplete?searchedID=' + position.article);
                this.$set(this.articleData, position.article, response.data[0]);
            } else if (position.articlePacket) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticlePacket/autoComplete?searchedID=' + position.articlePacket);
                this.$set(this.articlePacketData, position.articlePacket, response.data[0]);
            }
        }
        for (const entry of this.hoursEntries) {
            if (entry.userId) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/userAutoComplete?searchedID=' + entry.userId);
                this.$set(this.userData, entry.userId, response.data[0]);
            }
        }
        this.loading = false;
    }
})

// noinspection JSUnusedLocalSymbols
Vue.component('warehouse-shipping-note', {
    //language=Vue
    template: `
                <tt-card>
                  <warehouse-shipping-note-modal v-if="shippingNoteModalId" :id="shippingNoteModalId" @close="shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()" 
                                                 @open-signing-modal="signingShippingNoteId = $event"/>
                  <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
                  <warehouse-shipping-note-signature-pad v-if="signingShippingNoteId" :shipping-note-id="signingShippingNoteId" @close="signingShippingNoteId = null"/>

                  <button @click="shippingNoteModalId = 'create'" class="btn btn-primary">Lieferschein erstellen</button>

                  <tt-table-crud emit-edit
                                 @openHistory="historyModal = true; historyModalId = $event.id"
                                 @print="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id)"
                                 @printWithPrice="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id + '&price=true')"
                                 @edit="shippingNoteModalId = $event.id"
                                 ref="table">

                    <template v-slot:expandedRow="{ row }">
                      <warehouse-shipping-note-positions :positions="JSON.parse(row.positions)" :hours-entries="JSON.parse(row.hoursEntries)"/>
                    </template>

                  </tt-table-crud>
                </tt-card>
              `, data() {
        return {
            window:         window,
            historyModal:   false,
            historyModalId: null,
            shippingNoteModalId: null,
            signingShippingNoteId: null
        }
    },
    mounted() {
        // check if get parameter doAction = createNew is set, if so open the modal with 'create' as id
        if (window.location.search.includes('doAction=createNew')) {
            this.shippingNoteModalId = 'create';
        }
    }
})