SearchListBlock: Personellayout

Vue.component("searchlistblock", {
  props: ["initData", "searchUrl","personelLayout", "roomText"],
  data() {
    return {
      url: this.searchUrl,
      query: 'Företag',
      queryPersonel: 'koordinator',
      personal: (this.personelLayout.toLowerCase() == "true"), 
      dataResults: [],
      personalText: 'personal',
      loading: false,
      room: this.roomText
    };
  },
  computed: {
    personelByLastname: function() {
      return _.orderBy(this.dataResults, "surname", ["asc"]);
    }
  },
  mounted() {
    if (this.personal) {
      this.query = this.queryPersonel;
    }
    this.search(this.query);
  },
  methods: {
    async search(query) {
      this.loading = true;
      let initData = {
        ...JSON.parse(this.initData)
      };
      let req = {
        query: {
          querytext: initData.querytext,
          mainfacet: initData.mainfacet,
          facets: [],
          metafacets: initData.metafacets,
          take: initData.totaltake,
          skip: 0,
          returnSuggestions: true,
          addSuggestionsToQuery: false,
          sortorder: initData.sortorder,
          SearchPageId: initData.SearchPageId,
          Language: initData.lang,
          NoHitHighlight: true,
          DoNotTrack: true
        }
      };
      console.log(req);
      await axios.post(this.url,req)
        .then(result => { 
          this.loading = false;
          
          console.log("asd")
          if(result && result.data && result.data.d && result.data.d.SearchHits && result.data.d.SearchHits.length > 0) {
            let persons = result.data.d.SearchHits;

             persons.map(person => {
              if(person.Title) {
                let name = person.Title;
                let surname = name.split(" ")[1];
                person.surname = surname
              }
            })
          }
          this.dataResults = result.data.d.SearchHits;
        })
        .catch(error => { this.loading = false; console.error(error); throw error; });
    },
    todate (date) {
      var matches = date.match(/\((.*?)\)/);
      var a = new Date(parseInt(matches[1]));
      var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      var year = a.getFullYear();
      var month = months[a.getMonth()];
      var datum = a.getDate();
      var result = datum+' '+month+' ' +year;
      return result;
    }
  },
  template: `
      <div class="searchresultblock_personal block-content" >
            <vloading :height="32" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
            
                <div class="overflow-hidden" v-if="personal">
                <a :href="result.Url" :key="result.Id"  :title="result.Title" v-for="result in personelByLastname" class="personal_result_tag">
                  <article  class="personal_result row">
                    <div class="col-12 col-md-auto">
                        <div class="searchresultblock_img_container" v-if="result.MetaData.PersonalImage.StringValue">
                          <div class="lazyload searchresultblock_img_person" :data-bg="result.MetaData.PersonalImage.StringValue" :alt="result.Title"></div>
                        </div>
                    </div>
                    <div class="col-12 col-md-10">
                        <h3 class="personal__title heading-level-3" v-html="result.Title"></h3>
                        <div class="result-card-info d-flex flex-row flex-wrap align-items-center " v-if="result && result.MetaData">
                          <p v-if="result.MetaData.Title && result.MetaData.Title.StringValue">{{result.MetaData.Title.StringValue}}</p>
                          <p v-if="result.MetaData.AreaOfResponsibility && result.MetaData.AreaOfResponsibility.StringValue">
                            &nbsp;{{result.MetaData.AreaOfResponsibility.StringValue}}
                          </p>
                        </div>
                        <div class="person-card-info d-flex flex-row flex-wrap align-items-center" v-if="result && result.MetaData && result.MetaData.RoomNumber || result.MetaData.Location">
                          <p v-if="result.MetaData.RoomNumber && result.MetaData.RoomNumber.StringValue">{{room}}:&nbsp;</p>
                          <p v-if="result.MetaData.RoomNumber && result.MetaData.RoomNumber.StringValue">{{result.MetaData.RoomNumber.StringValue}}</p>
                          <p v-if="result.MetaData.Title && result.MetaData.Location.StringValue">
                            <template v-if="result && result.MetaData && result.MetaData.RoomNumber && result.MetaData.RoomNumber.StringValue && result.MetaData.Location && result.MetaData.Location.StringValue">, </template>
                            {{result.MetaData.Location.StringValue}}
                          </p>
                        </div>
                        <p class="result-card-info" v-if="result.MetaData.TelephoneNumber && result.MetaData.TelephoneNumber.StringValue">{{result.MetaData.TelephoneNumber.StringValue}}</p>
                        <a class="result-email" :href="'mailto:' + result.MetaData.Email.StringValue" v-if="result.MetaData.Email && result.MetaData.Email.StringValue">{{result.MetaData.Email.StringValue}}</a>
                    </div>
                  </article>
                </a>
                </div>
                <div v-else>
                  <a :key="result.Id" :href="result.Url" :title="result.Title" v-for="result in dataResults" class="personal_result_tag">
                    <article class="personal_result ">
                        <h3 class="personal__title heading-level-3" v-html="result.Title"></h3>
                        <p v-html="result.Content"></p>
                        <p class="date">{{todate(result.SearchPublishDate)}}</p>
                    </article>
                  </a>
                </div>
      </div>
    `
});