Vue.component('OrderProductchange', {
    //language=Vue
    template: `
      <tt-card style="min-height:50vh;" class="border-top-purple">

        <div class="row">
          <div class="col">
            
            <p class="alert alert-purple">Wählen Sie den Vertragsinhaber aus, um die aktiven Produkte anzuzeigen.<br />
              Produktwechsel sollten immer mit dem <strong>Hauptprodukt</strong> durchgeführt werden. Dies ist fast immer das <strong>Internetzugangsprodukt</strong>.</p>

            <tt-autocomplete :api-url="window['TT_CONFIG']['ADDRESS_API_URL'] + '?do=findAddress'"
                             v-model="owner_id" label="Vertragsinhaber suchen" placeholder="Tippen zum Suchen..."></tt-autocomplete>

            <div v-if="owner_id !== ''">
              <tt-card class="col-6" v-if="owner_id !== '' && typeof owner === 'object'">
                {{owner.name}}<br/>
                {{owner.street}}<br/>
                {{owner.zip}} {{owner.city}}
              </tt-card>
              
              <tt-table
                  :fetch-url="\`\${window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=\${owner_id}\`"
                  :config="OrderProductchangeTableConfig" :small="false" class="sm"
                  disable-filtering ref="contractTable">

                <template v-slot:actions="{ row }">
                  <a v-if="!row.product_name.match(/Service Pauschale/i) && row.billing_period > 0"
                      :href="window['TT_CONFIG']['ORDER_PRODUCTCHANGE_URL'] + '?contract_id=' + row.id"
                     class="btn btn-purple"><i class="fas fa-fw fa-square-up"></i> Produktwechsel erstellen</a>
                </template>
                <template v-slot:billing_period="{ row }">
                  <span v-if="row.billing_period == 1">Monatlich</span>
                  <span v-else-if="row.billing_period == 12">Jährlich</span>
                  <span v-else-if="row.billing_period == 0">Einmalig</span>
                  <span v-else>{{row.billing_period}}</span>
                </template>
                <template v-slot:finish_date="{ row }">
                  <span v-if="row.finish_date > 0">{{window.moment.unix(row.finish_date).isValid() ? window.moment.unix(row.finish_date).format('DD.MM.YYYY') : ''}}</span>
                </template>
                <template v-slot:cancel_date="{ row }">
                  <span v-if="row.cancel_date > 0">{{window.moment.unix(row.cancel_date).isValid() ? window.moment.unix(row.cancel_date).format('DD.MM.YYYY') : ''}}</span>
                </template>
                <template v-slot:price="{ row }">
                  <span :class="(row.price < 0) ? 'text-danger' : ''">€ {{row.price | formatPrice}}</span>
                </template>
                <template v-slot:price_setup="{ row }">
                  <span :class="(row.price_setup < 0) ? 'text-danger' : ''">€ {{row.price_setup | formatPrice}}</span>
                </template>


              </tt-table>
            </div>

          </div>
        </div>
      </tt-card>

    `, data() {
        return {
            window: window,
            OrderProductchangeTableConfig: {
                headers: [
                    {text: "", key: "actions", class: "text-right", headerClass: "text-right"},
                    {text: "Contract ID", key: "id", class: "text-right", headerClass: "text-right"},
                    {text: "Produkt", key: "product_name", headerClass: "text-left"},
                    {text: "Matchcode", key: "matchcode", headerClass: "text-left"},
                    {text: "Preis", key: "price", headerClass: "text-left"},
                    {text: "Periode", key: "billing_period", headerClass: "text-left"},
                    {text: "Herstellungskosten", key: "price_setup", headerClass: "text-left"},
                    {text: "Fertigstellung", key: "finish_date", filter: "date", headerClass: "text-left"},
                    {text: "Kündigung", key: "cancel_date", filter: "date", headerClass: "text-left"}
                ],
                tableHeader: 'Zu änderndes Produkt wählen',
                key: 'OrderProductchange',
            },
            owner_id: "",
            owner: false
        }
    },
    filters: {
        formatPrice(price) {
            roundedPrice = Math.round((parseFloat(price) + Number.EPSILON) * 100) / 100;
            return roundedPrice.toFixed(4);
        }
    },
    beforeMount() {
        const urlSearchParams = new URLSearchParams(window.location.search);
        if (urlSearchParams.has("owner_id")) {
            this.owner_id = urlSearchParams.get("owner_id");
        }
    }

})