<template>
<loader :active="isLoading"/>
<!-- 1-{{ $store.state.settings.divBgColor }}-1 -->
<div v-if="lngLoaded" :style="bckgrColor('divBgColor')">
  <details-page v-if="detailsPage" 
    :url="url"
    @backTolist="detailsPage=false"
    @gotoPrev="gotoPrev"
    @gotoNext="gotoNext"
  />
  <search-page v-else
    @detailClick="detailClick"
    @brandChanged="brandChanged"
    @reloadData="reloadData"
  />
</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,
      },
      url: 'https://motorradhandel.ch',
      // url: 'https://staging.motorradhandel.ch',
      // url: 'http://mh3.com',
      isLoading: false,
      lngLoaded: false,
      detailsPage: false,
    }
  },
  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: {
    brandChanged() {
      this.isLoading = true;
      axios
        .get(this.url + "/api/ext/getModels?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
        .then(response => {
          this.$store.commit('updateModels', response);
          this.reloadData();
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          this.isLoading = false;
        })
    },
    reloadData() {
      this.isLoading = true;
      axios
        .get(this.url + "/api/ext/loadResults?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
        .then(response => {
          this.$store.commit('updateResults', response);
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          this.isLoading = false;
        })
    },
    detailClick(id) {
      this.isLoading = true;
      // this.details = {};
      axios
        .get(this.url + "/api/ext/getDetails?id=" + id)
        .then(response => {
          this.$store.commit('updateDetails', response);
          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.$store.commit('updateSettings', response);
          loadLanguage(i18n, this.$store.state.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: {
  //   bgColor: function() {
  //     return this.$store.state.settings.divBGColor ? 'background: #' + this.$store.state.settings.divBGColor : '';
  //   },
  // },
}
</script>

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