Vue.component('Preordercampaign', {
    template: `
                <tt-card>
                  <tt-table :data="window['TT_CONFIG']['CAMPAIGNS']" :config="PreordercampaignTableConfig">
                    <template v-slot:top-buttons>
                      <button v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'" type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['ADD_URL']">
                        <i class="fas fa-plus"></i> Vorbestellkampagne hinzufügen
                      </button>
                      <a v-if="window['TT_CONFIG']['SHOW_MISC_BUTTONS'] === '1'" class="btn btn-purple" :href="window['TT_CONFIG']['PREORDER_DISCOUNT_IMPORT_URL']">
                        <i class="fas fa-tags fa-fw"></i> Gutscheincodes importieren</a>
                      <a v-if="window['TT_CONFIG']['SHOW_MISC_BUTTONS'] === '1'" class="btn btn-purple ml-1" :href="window['TT_CONFIG']['PREORDER_STATUS_UPDATE_IMPORT_URL']">
                        <i class="fas fa-retweet fa-fw"></i> Statusupdates importieren</a>
                    </template>

                    <template v-slot:status="{ row: campaign }">
                      <span class="fa-stack" title="Vorbestellkampagne aktiv" v-if="campaign.from <= Date.now()/1000 && campaign.to >= Date.now()/1000">
                        <i class="fas fa-alarm-clock fa-stack-1x text-success" style="z-index:20"></i>
                        <i class="fas fa-circle-check" style="color:Tomato;font-size:.7em"></i>
                      </span>
                    </template>

                    <template v-slot:add="{ row: campaign }">
                      <a class="btn btn-sm btn-outline-primary" :href="window['TT_CONFIG']['ADD_PREORDER_URL'] + '?preordercampaign_id=' + campaign.id">
                        <i class="fas fa-plus" title="Vorbestellung hinzufügen"></i></a>
                    </template>

                    <template v-slot:progress="{ row: campaign }">
                      <div class="campaign-grid">
                        <a :href="window['TT_CONFIG']['VIEW_URL'] + '?filter[preordercampaign_id]=' + campaign.id" class="campaign-icon">
                          <i class="fas fa-list-alt" title="Bestellungen anzeigen"></i></a>
                        <div class="progress-grid">
                          <template v-if="campaign.count_total_units.total_unit_count_sd > 0">
                            <span>EFH:</span><span>{{ campaign.active_preorder_count.sd_count }} /</span>
                            <span>{{ campaign.count_total_units.total_unit_count_sd }}</span>
                            <span>({{ ((campaign.active_preorder_count.sd_count / campaign.count_total_units.total_unit_count_sd) * 100 || 0).toFixed(2) }} %)</span>
                          </template>
                          <template v-if="campaign.count_total_units.total_unit_count_md > 0">
                            <span>MPH:</span><span>{{ campaign.active_preorder_count.md_count }} /</span>
                            <span>{{ campaign.count_total_units.total_unit_count_md }}</span>
                            <span>({{ ((campaign.active_preorder_count.md_count / campaign.count_total_units.total_unit_count_md) * 100 || 0).toFixed(2) }} %)</span>
                          </template>
                          <template v-if="campaign.count_total_units.total_unit_count > 0">
                            <span>Gesamt:</span><span>{{ campaign.active_preorder_count.total_count }} /</span>
                            <span>{{ campaign.count_total_units.total_unit_count }}</span>
                            <span>({{ ((campaign.active_preorder_count.total_count / (campaign.count_total_units.total_unit_count)) * 100 || 0).toFixed(1) }} %)</span>
                          </template>
                          <template v-if="campaign.count_total_units.total_unit_count_not2connect > 0">
                            <span>N2C:</span><span>{{ campaign.active_preorder_count.not2connect_count }} /</span>
                            <span>{{ campaign.count_total_units.total_unit_count_not2connect }}</span>
                            <span>({{ ((campaign.active_preorder_count.not2connect_count / campaign.count_total_units.total_unit_count_not2connect) * 100 || 0).toFixed(2) }} %)</span>
                          </template>
                        </div>
                      </div>
                    </template>

                    <template v-slot:from="{ row: campaign }">{{ formatDate(campaign.from) }}</template>
                    <template v-slot:to="{ row: campaign }">{{ formatDate(campaign.to) }}</template>
                    <template v-slot:rimo_workoders="{ row: campaign }">{{ campaign.rimo_workoders }} / {{ campaign.active_preorder_count.total_count }}</template>

                    <template v-slot:actions="{ row: campaign }">
                      <div class="preorder-campaign-table-actions">
                         <a :href="window['TT_CONFIG']['PREORDER_NOTIFICATION_URL'] + '?filter[preordercampaign_id]=' + campaign.id" title="Email Aussendungen"><i class="far fa-envelope"></i></a>
                        <template v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
                            <a class="ml-2" :href="window['TT_CONFIG']['EDIT_URL'] + '?id=' + campaign.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
                            <a class="ml-2" :href="window['TT_CONFIG']['ADMIN_URL'] + '?id=' + campaign.id"><i class="far fa-a" title="Adminfunktionen"></i></a>
                        </template>
                      </div>
                    </template>
                  </tt-table>
                </tt-card>

              `,

    data() {
        return {
            window:                      window,
            PreordercampaignTableConfig: {
                key:             'PreordercampaignTable',
                tableHeader:     'Vorbestellkampagnen',
                defaultPageSize: 25,
                headers:         [
                    {text: 'Status', key: 'status', class: 'text-center',sortable: false,filter:false, priority: 20},
                    {text: '', key: 'add', class: 'text-center',filter:false, sortable: false, priority: 18},
                    {text: 'Netzgebiet', key: 'network_name', priority: 19},
                    {text: 'Name', key: 'name', priority: 14},
                    {text: 'Fortschritt', key: 'progress', priority: 17,filter:false,sortable: false},
                    {text: 'Workorders', key: 'rimo_workoders', class: 'text-center', priority: 16,filter:false},
                    {text: 'Von', key: 'from', class: 'text-center', priority: 13,filter:false,sortable: false},
                    {text: 'Bis', key: 'to', class: 'text-center', priority: 12,filter:false,sortable: false},
                    {text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, priority: 21,filter:false}
                ],
                customRowClass: (row) => {
                    if (row.from <= Date.now()/1000 && row.to >= Date.now()/1000) {
                        return 'active';
                    }
                }
            }
        }
    },
    mounted() {
        if (window.TT_CONFIG.IS_ADMIN === "1") {
            this.PreordercampaignTableConfig.headers.splice(3, 0, {text: 'Netzbesitzer', key: 'network_owner_name', priority: 4, filter: 'select', filterOptions: window['TT_CONFIG']['NETWORK_OWNER_OPTIONS']});
        }
    },
    methods: {
        formatDate:  date => window.moment(date * 1000).format('DD.MM.YYYY'),
    }
});