Vue.component('pipework-history', {
    //language=Vue
    template: `<tt-card>
      
      
      <div class="filter-row">
        <tt-input label="Addresse" v-model="address" placeholder="Adresse" row sm/>
        <tt-autocomplete :items="window.TT_CONFIG.NETWORKS" v-model="selectedNetwork" label="Netzgebiet" row/>
        <tt-date-picker date-range v-model="dateRange" label="Datum" row sm/>
        
        <tt-button :disabled="checkParameters !== true" @click="getPipeworkHistory" text="Anzeigen" sm icon="fa-solid fa-magnifying-glass" additional-class="btn-primary"/>
        <span v-if="checkParameters !== true" class="text-danger">{{ checkParameters }}</span>
      </div>
      
      <div>
        <tt-table v-if="pipeworkHistory.length > 0" :config="pipeworkHistoryTableConfig" :data="pipeworkHistory" :key="pipeworkHistoryTableIndex"> 
          <template #item_type="{ row }">
            <span v-if="row.value_int !== null">{{ row.value_int }}</span>
            <span v-else-if="row.value_string !== null">{{ row.value_string }}</span>
            <span v-else-if="row.value_text !== null">{{ row.value_text }}</span>
            <span v-else>Unbekannt</span>
          </template>
          
            <template #last_edited_at="{ row }">
            <span v-if="row.last_edited_at">{{ window.moment.unix(row.last_edited_at).format('DD.MM.YYYY HH:mm') }}</span>
            <span v-else>Unbekannt</span>
            </template>
          
            <template #last_edited_by_user_id="{ row }">
            <span v-if="row.last_edited_by_user_id">{{ window.TT_CONFIG.USERS.find(user => user.value === row.last_edited_by_user_id)?.text }}</span>
            <span v-else>Unbekannt</span>
            </template>
          
          <template #item_id="{ row }">
            <tt-button @click="openPipework(row)" text="Zum Tiefbau" icon="fa-solid fa-pen-to-square" additional-class="btn-primary" sm/>
          </template>
          
        </tt-table>
      </div>
      
      
    </tt-card>`,
    data() {
        return {
            window: window,
            address: '',
            dateRange: {
                from: window.moment().subtract(4, 'weeks').unix(),
                to: window.moment().unix()
            },
            selectedNetwork: null,
            pipeworkHistory: [],
            pipeworkHistoryLoading: true,
            pipeworkHistoryError: false,
            pipeworkHistoryTableIndex: 0,
            pipeworkHistoryTableConfig: {
                key:             'PipeworkHistoryTable',
                tableHeader:     'Tiefbau Historie',
                defaultPageSize: 50,
                headers:         [
                    {text: 'Straße', key: 'building_street'},
                    {text: 'Ort', key: 'building_city'},
                    {text: 'Feld', key: 'item_label'},
                    {text: 'Wert', key: 'item_type'},
                    {text: 'Editiert', key: 'last_edited_at'},
                    {text: 'Von', key: 'last_edited_by_user_id'},
                    {text: 'Actions', key: 'item_id'},
                ],
            }
        }
    },
    computed: {
        checkParameters() {
            if (!this.selectedNetwork) {
                return 'Bitte Netzgebiet auswählen';
            } else if (this.dateRange.from && this.dateRange.to) {
                const from = window.moment.unix(this.dateRange.from);
                const to = window.moment.unix(this.dateRange.to);
                const diff = to.diff(from, 'days');
                if (diff > 28) {
                    return 'Bitte Zeitraum von maximal 4 Wochen auswählen';
                }
            }
            return true;
        }
    },
    methods: {
        async getPipeworkHistory() {
            this.pipeworkHistoryLoading = true;
            this.pipeworkHistoryError = false;

            try {
                const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Pipework/HistoryAPI`, {
                    params: {
                        network_id: this.selectedNetwork,
                        street_filter: this.address,
                        from: this.dateRange.from,
                        to: this.dateRange.to
                    }
                })
                this.pipeworkHistory = response.data.data;
                this.pipeworkHistoryLoading = false;
                this.pipeworkHistoryTableIndex++;
            } catch (error) {
                console.error(error);
                this.pipeworkHistoryLoading = false;
                this.pipeworkHistoryError = true;
                this.window.notify('error', 'Fehler beim Abrufen der Daten');
            }
        },
        openPipework(row) {

            const networkId = this.selectedNetwork;
            const street = row.building_street;

            this.window.open(`${window.TT_CONFIG.BASE_PATH}/Pipework?filter[network_id]=${networkId}&filter[street]=${street}&filter[status_id]=`, '_blank');
        }
    }
})