<template>
  <a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
    <div :style="[bckgrColor('divBgColor')]">
      <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_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
          :title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
          :result="result"
          class=""
        />
      </div>
      <div class="ListeCol newListeTitleDetailsContainer" :style="color('fontColor')">
        <div class="newListeTitleDetailsFirst" style="width:500px;">
          <span v-html="fahrzWoZus" :style="color('titleColor')" class="newListeTitletext mobileTruncate"></span>
          <br>
        </div>
        <div class="newListeTitleDetailsSecond">
          <template v-if="$store.state.settings.srchParObj.rental">
            <span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="exportShowMobile">
              {{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
            </span>
          </template>
          <span v-else class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
          {{result.rel_art['bezeichnung_' + $store.state.settings.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_' + $store.state.settings.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 > 0)">
                &nbsp;{{ $t("front_extern.oder") }}
              </template>
              <template v-if="(result.garantie_km > 0)">
                {{ 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 > 0)">
                &nbsp;{{ $t("front_extern.oder") }}
              </template>
              <template v-if="(result.garantie_km > 0)">
                {{ 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_' + $store.state.settings.lang]}}
          </span>
          <span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + $store.state.settings.lang] }}
        </div>
      </div>
      <div class="ListeCol exportShowNormal" style="width: 12px;" :style="color('fontColor')">
        <span style="border-left: 1px solid #ccc; display: block; height: 100px; margin-right: 10px;">&nbsp;</span>
      </div>
      <div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="color('fontColor')">
        <template v-if="$store.state.settings.srchParObj.rental">
          <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>
        <template v-else>
          <template v-if="result.fzg_rubrik_vermietung == 0 || (result.fzg_rubrik_vermietung == 1 && result.inserat_status_vermietet_anzeigen == 1)" class="price beschNormal">
            <span v-if="result.actualprice != result.fzg_preis" class="newListePriceDetailsContainerFirst">
              {{ $t("front_extern.special_price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b><br />
              {{ $t("front_extern.normal_price") }}: <span class="strikethrough">{{formatPrice(result.fzg_preis, 0)}}</span><br />
              {{ $t("front_extern.special_price_bis") }}: {{formatDate(result.fzg_preis_aktion_bis)}}
            </span>
            <span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
              {{ $t("front_extern.price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b>
            </span>
            <span v-else class="newListePriceDetailsContainerFirst">
              {{ $t("front_extern.price") }}: {{ $t('front_extern.price_on_request') }}
            </span>
          </template>
          <template v-if="result.fzg_rubrik_vermietung == 1">
            <span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
              <br />
              {{ $t("front_extern.mietbar_ab") }}: <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
            </span>
          </template>
        </template>
        <span v-if="$store.state.locations.length > 1" class="newListePriceDetailsContainerLocation">
          {{ $t("front_extern.standort") }}: {{  result.standort.firma_name }}
        </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'],
    components: {
      'result-image': ResultImage
    },
    data() {
      return {
      }
    },
    methods: {
      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.$store.state.settings.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
      },
    },
    computed: {
      fahrzWoZus() {
        return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
      },
  },
  }
</script>
<style scoped>
  .strikethrough {
    position: relative;
  }
  .strikethrough:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: inherit;

    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
  span.newListePriceDetailsContainerLocation {    
    font-size: 15px;    
    display: inherit;    
    font-weight: 400;    
    padding-top: 20px;

  }  
</style>