<template>
  <div>
    <!-- <carouselSection :propertyImages="propertyImages" @Loaded="carouselLoaded = true" /> -->
    <main id="main" style="margin-top: 20px">
      <contentSection
        :property="property"
        :propertyImages="propertyImages"
        @Loaded="contentloaded = true"
      />
    </main>
    <div v-if="Wait" id="preloader"></div>
  </div>
  <!-- #intro -->
</template>

<script>
/* eslint-disable */

import { mapState, mapActions, mapGetters } from "vuex";
import makeOffer from "../../../processFlow/makeOffer";
// import carouselSection from "./carouselSection";
import contentSection from "./contentSection";

export default {
  name: "property",
  components: {
    makeOffer,
    contentSection,
  },
  data() {
    return {
      index: null,
      date: new Date(),
      wait: true,
      contentloaded: false,
      dataProp: {},
      dataImages: {},
    };
  },
  mounted() {
    this.clearPropertyImages();
    this.getDisplayProperty(this.$route.params.id).then((data) => {
      this.getSavedPropertyImages(data.id).then(() => {
        this.wait = false;
      });
    });
    // await this.getPropertyImages(this.$route.params.id);
    // this.mayEditProperty(this.$route.params.id);
  },
  computed: {
    ...mapState("property", ["property", "propertyImages"]),
    Wait() {
      if (this.wait && !this.contentloaded) {
        return true;
      }
      return false;
    },
  },
  methods: {
    ...mapActions("property", [
      "getDisplayProperty",
      "clearPropertyImages",
      "getSavedPropertyImages",
    ]),
    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 "";
    },
    ContentDone() {
      this.contentloaded = true;
    },
  },
  beforeDestroy() {
    this.clearPropertyImages();
  },
};
</script>

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