<template>
  <div>
    <!-- <carouselSection v-if="boolLoaded" :resortImages="resort.images" /> -->
    <main id="main" style="margin-top:-20px">
      <contentSection :resortId="resortId" />
    </main>
  </div>
</template>

<script>
/* eslint-disable */
import carouselSection from "./carouselSection";
import { mapState, mapActions } from "vuex";
import contentSection from "./contentSection";
export default {
  components: {
    carouselSection,
    contentSection
  },
  data() {
    return {
      boolLoaded: false
    };
  },
  props: {
    resortId: {}
  },
  async created() {
    this.getResortData(this.resortId);
    // .then(() => {
    //   setTimeout(() => (this.boolLoaded = true), 2000);
    // });
  },
  computed: {
    ...mapState("resort", ["resort", "description", "images", "layout"]),
    mapUrl() {
      return this.resort
        ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
        : "";
    }
  },
  methods: {
    ...mapActions("resort", ["getResortData"]),
    routerGoTo(goto) {
      this.$router.push(goto);
    }
  }
};
</script>

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