<template>
  <section id="portfolio">
    <div style="margin-top:-60px">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h2>Latest Properties</h2>
          </div>
        </div>
      </div>
      <div v-if="boolLoaded" class="contianer">
        <div class="row">
          <div class="col">
            <propertyCard
              v-if="latestProperties.length > 0"
              name="propertyholder"
              :properties="latestProperties"
              :showSort="false"
            />
          </div>
        </div>
      </div>
      <div v-else class="contianer">
        <div class="row">
          <div class="col">
            <vue-loaders
              class="my-auto"
              style="margin-top:50px !important; margin-bottom:50px !important"
              name="line-spin-fade-loader"
              color="black"
              scale="1"
            ></vue-loaders>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- #listings -->
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import propertyCard from "../property/propertyCard.vue";
export default {
  data() {
    return {
      boolLoaded: false
    };
  },
  components: {
    propertyCard
  },
  computed: {
    ...mapState("propertySearch", ["latestProperties"])
  },
  methods: {
    ...mapActions("propertySearch", ["searchLatestProperties"]),
    async LoadData() {
      await this.searchLatestProperties();
      this.$forceUpdate();
    }
  },
  mounted() {
    this.LoadData().then(() => {
      setTimeout(() => {
        this.boolLoaded = true;
      }, 100);
    });
  }
};
</script>

<style lang="scss" scoped></style>
