<template>
  <div>
    <carouselSection
      v-if="propertyImages.length > 0"
      :images="propertyImages"
      @Loaded="CarouselDone"
    />
    <main id="main" style="margin-top:-20px;padding-bottom:50px">
      <contentSection :property="property" @Loaded="ContentDone" />
    </main>
    <div v-if="Wait" id="preloader"></div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import carouselSection from "./carouselSection";
import contentSection from "./contentSection";
export default {
  components: {
    carouselSection,
    contentSection,
  },
  data() {
    return {
      wait: false,
      carouselLoaded: false,
      contentloaded: false,
    };
  },
  async mounted() {
    this.wait = true;
    this.carouselLoaded = false;
    this.contentloaded = false;
    await this.getDisplayProperty(this.$route.params.id);
  },
  computed: {
    ...mapState("property", ["property", "propertyImages"]),
    Wait() {
      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
        return true;
      }
      return false;
    },
  },
  methods: {
    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
    formatPrice(value) {
      const val = (value / 1).toFixed(2);
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
    },
    formatAddress(value) {
      if (value !== "") {
        return `${value}<br/>`;
      }
      return "";
    },
    CarouselDone() {
      this.carouselLoaded = true;
    },
    ContentDone() {
      this.contentloaded = true;
    },
  },
};
</script>

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