<template>
<loader :active="isLoading"/>
<div v-if="lngLoaded">
  <details-page v-if="detailsPage" 
    :list="list.results"
    :details="details"
    :lang="settings.lang"
    :settings="settings"
    :url="url"
    @backTolist="detailsPage=false"
    @gotoPrev="gotoPrev"
    @gotoNext="gotoNext"
  />
  <search-page v-else
    :data="list"
    :lang="settings.lang"
    :settings="settings"
    @detailClick="detailClick"
  />
</div>
</template>

<script>
import axios from 'axios'

import PageSearch from './components/PageSearch.vue'
import PageDetail from './components/PageDetail.vue'
import {i18n, loadLanguage} from './modules/i18n'

export default {
  components: {
    'search-page': PageSearch,
    'details-page': PageDetail,
  },
  data() {
    return {
      configParams: {
        clientID: 0,
        rowID: 0,
      },
      listParams: {
        arts: [],
        brands: [],
        categories: [],
      },
      list: {},
      settings: {},
      // url: 'https://motorradhandel.ch',
      // url: 'https://staging.motorradhandel.ch',
      url: 'http://mh3.com',
      isLoading: false,
      lngLoaded: false,
      detailsPage: false,
      details: {},
    }
  },
  mounted() {
    var t = document.getElementsByClassName('wrapperJSON');
    if(t.length) {
      this.configParams.clientID = t[0].dataset.ui;
      this.configParams.rowID = t[0].dataset.fzl;
      this.getSettings();
    }
  },
  methods: {
    detailClick(id) {
      this.isLoading = true;
      // this.details = {};
      axios
        .get(this.url + "/api/ext/getDetails?id=" + id)
        .then(response => {
          this.details = response.data;
          this.detailsPage = true;
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          this.isLoading = false;
        })
    },
    getSettings() {
      this.isLoading = true;
      var configParams = this.configParams;
      axios
        .get(this.url + "/api/ext/getSettings?clientID=" + configParams.clientID + '&rowID=' + configParams.rowID)
        .then(response => {
          this.settings = response.data.settings;
          this.settings.srchParObj = JSON.parse(this.settings.srchParams);
          this.listParams.arts = this.settings.fzart ? this.settings.fzart.split(",") : [];
          this.listParams.brands = this.settings.marken ? this.settings.marken.split(",") : [];
          this.listParams.categories = this.settings.kategorie ? this.settings.kategorie.split(",") : [];
          this.list = response.data.data;
          loadLanguage(i18n, this.settings.lang, response.data.trans);
          this.lngLoaded = true;
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          this.isLoading = false;
        })
    },
    gotoPrev(id) {
      this.detailClick(id);
    },
    gotoNext(id) {
      this.detailClick(id);
    }
  },
  computed: {
  },
}
</script>

<style>
@import "https://motorradhandel.ch/extern/css/custom.css";
</style>
