UnivateProperties/src/components/timeshare/buy/buyPage.vue

<template>
  <section>
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h1 class="title-single" style="text-align:left;">Timeshare To Buy</h1>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-left">
          <p>
            The resorts have been listed in their relevant provinces.
            Please select the resort for which you would like to view
            the available weeks and then select the weeks that interest
            you on the resort page.
          </p>
          <p>
            Arrival and departure dates are indicated but please note
            that these dates may vary annually.
          </p>
          <p>
            As with any property related sale, upon purchasing the holiday
            of your choice, there will be a transfer fee payable for the
            change of ownership. This fee will depend on the relevant resort
            or managing agent.
          </p>
        </div>
      </div>

      <div class="row mb-4">
        <div class="col-md-4">
          <div class="accordion" id="accordionExample">
            <div class="card" v-for="(region, r) in regions" :key="r">
              <a
                class="btn btn-b-n"
                type="button"
                data-toggle="collapse"
                :data-target="'#collapse' + region.id"
                aria-expanded="false"
                :aria-controls="'collapse' + region.id"
              >
                <div :id="'header' + region.id">
                  <h5
                    class="mb-0"
                    @mouseover="updateMapProvince(region.regionName)"
                  >{{ region.regionName }}</h5>
                </div>
              </a>
              <div
                :id="'collapse' + region.id"
                class="collapse"
                :aria-labelledby="'header' + region.id"
                data-parent="#accordionExample"
              >
                <div class="card-body">
                  <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
                    <a
                      class="cursor-pointer"
                      href="#"
                      @click="routerGoTo('/resort/' + resort.resortCode)"
                      @mouseover="updateMap(resort.resortCode)"
                    >{{resort.resortName}}</a>
                    <br />
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="tab-content" id="myTabContent">
            <div
              class="tab-pane fade show active"
              id="directions"
              role="tabpanel"
              aria-labelledby="directions-tab"
            >
              <iframe
                :src="mapUrl"
                width="100%"
                height="450"
                frameborder="0"
                style="border:0"
                allowfullscreen
              ></iframe>
              <br />

              <small>
                <a
                  :href="mapUrl"
                  style="color:#60CBEB;text-align:left"
                  target="_blank"
                >See map bigger</a>
              </small>
            </div>
            <div
              class="tab-pane fade"
              id="resort-layout"
              role="tabpanel"
              aria-labelledby="resort-layout-tab"
            >
              <img class="img-fluid" :src="layout" alt="Resort Layout" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'TimeshareToBuy',
  data() {
    return {
      myMap: 'SouthAfrica',
      myZoom: 5,
    };
  },
  mounted() {
    this.getRegions();
  },
  computed: {
    ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
    mapUrl() {
      // return 'http://maps.google.com/maps/place/Gauteng/';
      return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
    },
    regions() {
      return _.sortBy(this.detailedRegion, r => r.regionName);
    },
  },
  methods: {
    ...mapActions('timeshareBuy', ['getRegions', 'getResort']),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    updateMap(resortCode) {
      this.myMap = 'SouthAfrice';
      this.getResort(resortCode);
      // `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=7&output=embed`;
      this.myMap = `${this.resort.prLatitude},${this.resort.prLongitude}`;
      this.myZoom = 10;
    },
    updateMapProvince(province) {
      this.myMap = province.replace(/\s/g, '');
      this.myZoom = 7;
    },
  },
};
</script>