<template>
  <div>
    <!-- <carouselSection v-if="!wait" :resortImages="resort.images" /> -->
    <main id="main" style="margin-top: 20px;">
      <section>
        <div class="container">
          <div class="row" id="resort-profile">
            <div class="col-md-3">
              <gallerySection :images="resort.images" />
              <FilterComponent :hideTop="true" />
            </div>
            <div
              class="col-md-9 resort-profile"
              style="margin-top: 15px; margin-bottom: 15px;"
            >
              <h2>{{ resort.prName }}</h2>
              <WeekList :resortCode="resortCode" />
              <p v-if="description && description !== ''">
                {{ description }}
              </p>
              <br v-if="description && description !== ''" />
              <div class="d-flex mt-3">
                <iframe
                  width="100%"
                  height="200"
                  id="gmap_canvas"
                  :src="
                    'https://maps.google.com/maps?q=' +
                    resort.prLatitude +
                    ',' +
                    resort.prLongitude +
                    '&hl=en&z=14&amp;output=embed'
                  "
                  frameborder="0"
                  scrolling="no"
                  marginheight="0"
                  marginwidth="0"
                ></iframe>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <router-link
                style="float: right;"
                class="btn-white-border mb-4"
                to="/timeshare/buy"
              >
                Back
              </router-link>
            </div>
          </div>
        </div>
      </section>
    </main>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import WeekList from '../buy/weekListComponent.vue'
import FilterComponent from '../searchTimeshare.vue'
import ResortImages from './resortImage.vue'
import gallerySection from './gallerySection'
import carouselSection from './carouselSection'

export default {
  name: 'ResortPageNew',
  components: {
    carouselSection,
    WeekList,
    FilterComponent,
    ResortImages,
    gallerySection,
  },
  data() {
    return {
      wait: true,
      rCode: '',
    }
  },
  props: {
    resortCode: {},
  },
  methods: {
    ...mapActions('resort', ['getResortData', 'getDescription']),
    routerGoTo(goto) {
      this.$router.push(goto)
    },
  },
  computed: {
    ...mapState('resort', ['resort', 'images', 'description']),
  },
  created() {
    console.log('Resort Description')
    console.log(this.resortCode)
    this.getDescription(this.resortCode)

    console.log(this.resort.description)
    this.getResortData(
      this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode,
    ).then(() => (this.wait = false))
  },
}
</script>

<style lang="scss" scoped>
.container {
  max-width: 1400px;
}
</style>
