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

<template>
  <!-- eslint-disable max-len -->
  <section class="collapse-items">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="tobuy-img-box">
            <img
              src="img/buy.jpg"
              alt="Timeshare To Buy"
              class="img-fluid"
              style="width:800px;height:400px;"
            />
          </div>
          <div class="sinse-box">
            <h3 class="sinse-title">
              Timeshare To Buy
              <span></span>
            </h3>
          </div>
        </div>

        <div class="container col-md-10">
          <br />
          <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>
          <br />
          <div class="row mb-4">
            <div class="container col-md-4">
              <div class="accordion" id="accordionExample">
                <div class="card" v-for="(region, r) in regions" :key="r">
                  <a
                    class="mb-0 color-text-a"
                    data-toggle="collapse"
                    :data-target="'#collapse' + region.id"
                    aria-expanded="false"
                    :aria-controls="'collapse' + region.id"
                  >
                    <div :id="'header' + region.id">
                      <h5
                        class="btn btn-link font-weight-bold color-b"
                        @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>
      </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>