<template>
  <section>
    <div class="container">
      <div class="row" id="resort-profile">
        <div class="col-md-3">
          <img
            src="img/listings/property1/property1-gallery.jpg"
            class="img-fluid"
            alt
          />
          <div class="row no-gutters">
            <div class="col-6">
              <img
                src="img/listings/property1/property1-gallery.jpg"
                class="img-fluid"
                alt
              />
            </div>
            <div class="col-6">
              <img
                src="img/listings/property1/property1-gallery.jpg"
                class="img-fluid"
                alt
              />
            </div>
          </div>
          <gallerySection :images="images" />
          <FilterComponent :hideTop="true" />
        </div>
        <div class="col-md-9 p-5 resort-profile">
          <h2>{{ resort.prName }}</h2>
          {{ resort }}
          <WeekList :resortCode="resortCode" />
          <p>{{ resort.prNotes }}</p>
          <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>
  </section>
</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'

export default {
  props: {
    resortCode: {},
  },
  components: {
    WeekList,
    FilterComponent,
    ResortImages,
    gallerySection,
  },
  // async mounted() {
  //   await this.initResort(this.resortCode);
  //   setTimeout(() => (this.boolLoaded = true), 2000);
  // },
  data() {
    return {
      index: null,
      boolLoaded: false,
    }
  },
  computed: {
    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
    mapUrl() {
      console.log(this.resort.prLatitude)

      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>
.filterweekSection {
  margin-top: -50px;
}
</style>
