<template>
  <div>
    <main id="main" style="margin-top: 20px">
      <contentSection :property="property" :propertyImages="propertyImages" :status="checkStatus" />
    </main>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
/* eslint-disable */

import { mapState, mapActions } 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(),
      boolLoaded: false,
      wait: true
    };
  },
  mounted() {
    this.clearPropertyImages();
    this.getDisplayProperty(this.$route.params.id).then(data => {
      this.wait = false;
    });
  },
  computed: {
    ...mapState("property", ["property", "propertyImages"]),
    checkStatus() {
      if (
        this.property.statusCode === "CIP" ||
        this.property.statusCode === "S" ||
        this.property.statusCode === "P"
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
    ...mapActions("propertyEdit", ["mayEditProperty"]),
    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 "";
    }
  },
  beforeDestroy() {
    this.clearPropertyImages();
  }
};
</script>

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