<template>
  <main id="main" style="padding-bottom:50px">
    <!-- <carouselSection v-if="!wait" :resortImages="resort.images" /> -->
    <summarySection :resortCode="resortCode" :unitNumber="unitNumber" />
    <div class="container">
      <div class="row mt-5">
        <div class="col">
          <tabSection
            style="margin-bottom:100px"
            :resortCode="calculatedCode"
            :resortCoords="resort.prPostAdd1"
            :layoutImages="layouts"
            :resortName="resort.prName"
          />
        </div>
      </div>
    </div>
    <div v-if="wait" id="preloader"></div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import gallerySection from "../gallerySection";
import tabSection from "./tabSection";
import summarySection from "./summarySection";
import carouselSection from "./carouselSection";

export default {
  name: "unit",
  components: {
    gallerySection,
    tabSection,
    summarySection,
    carouselSection
  },
  props: {
    resortCode: {},
    unitNumber: {}
  },
  data() {
    return {
      wait: false
    };
  },
  mounted() {
    // await this.initResort(this.resortCode);
    // if (this.resortCode) {
    //   this.applyResortFilter(this.resortCode);
    // }
    // await this.layouts.push(this.layout);
    // await this.getWeeks();
    // setTimeout(() => {
    //   this.boolLoaded = true;
    // }, 500);
    this.wait = true;
    this.getResortData(this.resortCode.includes("SILV") ? "SILV1" : this.resortCode).then(
      fulfilled => {
        this.applyResortFilter(this.resortCode.includes("SILV") ? "SILV1" : this.resortCode);
        this.getWeeks();
        this.wait = false;
      }
    );
  },
  computed: {
    ...mapState("resort", ["resort"]),

    ...mapGetters({
      weekById: "weekList/weekById"
    }),
    week() {
      return this.weekById(
        this.resortCode.includes("SILV") ? "SILV1" : this.resortCode,
        this.unitNumber
      );
    },
    layouts() {
      var layouts = [];
      layouts.push(this.resort.layout);
      return layouts;
    },
    calculatedCode() {
      return this.resortCode.includes("SILV") ? "SILV1" : this.resortCode;
    }
    // ...mapState('week', ['currentWeek']),
  },
  methods: {
    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
    ...mapActions("resort", ["getResortData"]),
    // ...mapActions('week', ['initWeek']),
    formatPrice(value) {
      if (value) {
        const val = (value / 1).toFixed(2);
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
      }
      return "";
    }
  }
};
</script>

<style lang="scss" scoped>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .summarySection {
    margin-top: 1px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .summarySection {
    margin-top: 1px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .summarySection {
    margin-top: -50px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}
</style>
