External-lists/resources/vue/bmwExtPages/components/ResultItem.vue

<template>
  <a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
    <div :style="[bgColor]">
      <div ref="rImageContainer" class="ListeCol newListeImageContainer" style="text-align: center;">
        <result-image
          data-src=""
          :alt="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
          :title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
          :result="result"
          class=""
        />
      </div>
      <div class="ListeCol newListeTitleDetailsContainer" :style="fontColor">
        <div class="newListeTitleDetailsFirst" style="width:500px;">
          <span v-html="fahrzWoZus" :style="titleColor" class="newListeTitletext mobileTruncate"></span>
          <br>
        </div>
        <div class="newListeTitleDetailsSecond">
          <span class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
          {{result.rel_art['bezeichnung_' + lang]}} <br>
          <span v-if="result.fzg_art == '1' || result.fzg_art == '2'">
            <template v-if="result.fzg_rubrik_vermietung == 0">
              <span v-if="result.fzg_km_distanz == 0">
                {{ formatNum(result.fzg_km) }} {{ $t("front_extern.km") }}
              </span>
              <span v-else>
                {{ formatNum(result.fzg_km) }} {{ $t("front_extern.h") }}
              </span>
              <br />
            </template>
            <template v-if="result.fzg_1iv != ''">
              {{ $t("front_extern.1iv") }} {{ formatDate(result.fzg_1iv) }}<br />
            </template>
            {{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
          </span>
          <span v-else-if="result.fzg_art == '3' || result.fzg_art == '4' || result.fzg_art == '5'">
            <template v-if="result.garantie_typ == '2'">
              <template v-if="result.garantie_monate != ''">
                {{ result.garantie_monate }}
                {{ $t("front_extern.monate") }}
              </template>
              <template v-if="result.garantie_monate != '' && result.garantie_km != ''">
                {{ $t("front_extern.oder") }}
              </template>
              <template v-if="result.garantie_km != ''">
                {{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
              </template>
            </template>
            <template v-if="result.garantie_typ == '3'">
              <template v-if="result.garantie_monate != ''">
                {{ result.garantie_monate }}
                {{ $t("front_extern.monate") }}
              </template>
              <template v-if="result.garantie_monate != '' && result.garantie_km != ''">
                {{ $t("front_extern.oder") }}
              </template>
              <template v-if="result.garantie_km != ''">
                {{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
              </template>
            </template>
            <template v-if="result.garantie_monate != '' && result.garantie_km == ''">
              <br />
            </template>
            <template v-if="result.fzg_1iv != '' && result.fzg_art == '5'">
              {{ $t("front_extern.1iv") }} {{ result.fzg_1iv }}<br />
            </template>
            {{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
          </span>
          <span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + lang] }}
        </div>
      </div>
      <div class="ListeCol exportShowNormal" style="width: 12px;" :style="fontColor">
        <span style="border-left: 1px solid #ccc; display: block; height: 85px; margin-top: 10px;">&nbsp;</span>
      </div>
      <div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="fontColor">
        <template v-if="result.fzg_rubrik_vermietung == 1">
          <span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
            {{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
          </span>
        </template>
        <span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
          <b>{{formatPrice(result.actualprice, 0)}}</b>
        </span>
      </div>
    </div>
  </a>
</template>

<script>
  import ResultImage from './ResultImage.vue'
  import PathMixin from '../mixins/PathMixin.js'
  import Numberformatting from '../mixins/Numberformatting.js'

  export default {
    mixins: [PathMixin, Numberformatting],
    props: ['result', 'lang', 'settings'],
    components: {
      'result-image': ResultImage
    },
    data() {
      return {
      }
    },
    methods: {
      // formatPrice(price){
      //   if(price == 0) {
      //     return this.$t('front_detail.on_request')
      //   }else{
      //     var options = { style: "currency", currency: "CHF", roundingIncrement: 1, maximumFractionDigits: 0 }
      //     return Intl.NumberFormat("de-CH", options).format(price) + '.-';
      //   }
      // },
      formatNum(price, digits = 0){
        var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
        return Intl.NumberFormat("de-CH", options).format(price);
      },
      // formatDate(value){
      //   if(!value) {
      //     return '-';
      //   }
      //   const date = new Date(value);
      //   if(!date instanceof Date || isNaN(date)) {
      //     return '-';
      //   }
      //   return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
      // },
      getCategoryText(id) {
        switch (id) {
          case 4:
          case 5:
          case 6:
          case 7:
          case 8:
          case 11:
          case 15:
          case 19:
            return this.$t('front_extern.result_motorrad');
            break;
          default:
            return '';
            break;
        }
      },
      getArtClass(result) {
        switch (result.fzg_art) {
          case 1:
            return 'bg-mhsecondary-orange';
            break;
          case 2:
            return 'bg-mhsecondary-cyan';
            break;
          case 3:
            return 'bg-mhsecondary-moss';
            break;
          case 4:          
          default:
            return 'bg-mhsecondary-yellow';
            break;
          case 5:
            return 'bg-mhsecondary-beige';
            break;
        }
      },
      createUrl(result) {
        return this.adSlug(this.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
      },
    },
    computed: {
      fahrzWoZus() {
        return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
      },
      titleColor: function() {
        return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
      },
      bgColor: function() {
        return this.settings.bgColor ? 'background-color: #' + this.settings.bgColor : '';
      },
      fontColor: function() {
        return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
      },
  },
  }
</script>