UnivateProperties/src/components/property/commercial/singleView/contentSection.vue

<template>
  <section>
    <div class="container">
      <div class="row" id="resort-profile">
        <div class="col-md-4">
          <div class="resPortfolioSection" style="margin-top:-5px">
            <iframe
              v-if="property.video !== null"
              width="100%"
              src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              style="margin-bottom:-6px"
            ></iframe>
            <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
              <div v-if="i < 3">
                <img
                  v-if="i === 0"
                  style="width:100%; height:201px;object-fit: cover"
                  :src="image.image"
                />
                <div v-else-if="i !== 0">
                  <img
                    v-if="i % 2 === 0"
                    style="width:50%; height:140px; float:right;"
                    :src="image.image"
                  />
                  <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
                </div>
              </div>
            </div>

            <gallery :images="Images" :index="index" @close="index = null"></gallery>
          </div>

          <div class="panel-left p-5" style="margin-top:140px;">
            <h2>Property Detial</h2>
            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
            <p>{{ property.city }}, {{ property.suburb }}</p>
            <div v-if="property.displayData.length > 0">
              <div v-for="(data, i) in property.displayData" :key="i">
                <div v-for="field in data.values" :key="field.id">
                  <p v-if="field.name === 'Floor Size'">{{ field.value }}</p>
                </div>
              </div>
            </div>
            <!-- <div v-for="field in property.displayData[0].values" :key="field.id">
              <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
              <p v-if="field.name === 'Rates & Taxes'">
                Rates & Taxes: R{{ field.value | toCurrency }}
              </p>
            </div>-->
            <p>{{ property.shortDescription }}</p>
            <p>{{ property.price | toCurrency }}</p>
          </div>
          <div class="panel-left px-5 pb-5 text-center">
            <h4 class="text-white">Share this Property</h4>
            <a
              href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
              target="_blank"
            >
              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
            </a>
            <a
              href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
            >
              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
            </a>
            <a
              href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
              data-action="share/whatsapp/share"
              target="_blank"
            >
              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
            </a>
          </div>
        </div>
        <div class="col-md-8 p-5 resort-profile">
          <h2 v-if="property.showAddress">
            <div style="display:inline" v-if="property.propertyName !== null">
              {{ property.propertyName }} /
            </div>
            {{ property.streetNumber }} {{ property.streetName }}
          </h2>
          <h2 v-else>{{ property.propertyName }}</h2>
          <p>{{ property.shortDescription }}</p>
          <h4>Property Features</h4>
          <div v-if="property.displayData.length > 0">
            <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
              <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                <div
                  :style="field.value.toUpperCase() === 'FALSE' ? 'display:none' : 'display:show'"
                  v-if="field.value.toUpperCase() != 'TRUE'"
                >
                  <i class="fa fa-check-circle"></i>
                  {{ field.value }} {{ field.name }}
                </div>
                <div v-else>
                  <i class="fa fa-check-circle"></i>
                  {{ field.name }}
                </div>
              </div>
            </div>
          </div>

          <div class="mt-5" v-html="property.description"></div>
          <router-link
            style="float:right; white-space: nowrap;"
            class="btn-solid-blue mt-3"
            :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
            >ENQUIRE NOW</router-link
          >

          <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
          <iframe
            v-if="property.virtualTour !== null"
            width="100%"
            height="500px"
            :src="property.virtualTour"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            style="margin-bottom:-6px"
            class="mt-3"
          ></iframe>

          <h4 v-if="property.video !== null" class="mt-5">Video</h4>
          <iframe
            v-if="property.video !== null"
            width="100%"
            src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            style="margin-bottom:-6px"
            class="mt-3"
          ></iframe>
          <!-- <div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">Reference</th>
                  <th scope="col">Unit</th>
                  <th scope="col">Location</th>
                  <th scope="col">Kitchen</th>
                  <th scope="col">Extras</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>#{{ property.id }}</td>
                  <td>#{{ property.unit }}</td>
                  <td>Second Floor</td>
                  <td>yes</td>
                  <td v-if="property.displayData && property.displayData.length > 0">
                    <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
                      <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
                        <div></div>
                        {{ feat.name }} ({{ feat.value }})
                      </div>
                    </div>
                  </td>
                  <td>
                    
                  </td>
                </tr>
              </tbody>
            </table>
          </div>-->

          <!-- <div class="d-flex mt-3">
            <iframe
              width="100%"
              height="200"
              id="gmap_canvas"
              src=""
              frameborder="0"
              scrolling="no"
              marginheight="0"
              marginwidth="0"
            ></iframe>
          </div>-->
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import gallery from "../../../shared/gallerySlideShow";
export default {
  components: {
    gallery
  },
  props: {
    property: {},
    propertyImages: {}
  },
  mounted() {
    console.log(this.property);
  },
  data() {
    return {
      index: null,
      date: new Date()
    };
  },
  computed: {
    Images() {
      const list = [];
      for (let i = 0; i < this.propertyImages.length; i++) {
        list.push(this.propertyImages[i].image);
      }
      return list;
    }
  },
  created() {
    this.$emit("Loaded", true);
  }
};
</script>

<style lang="scss" scoped>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 575px) {
  .resPortfolioSection {
    margin-bottom: 100px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
  .resPortfolioSection {
    margin-bottom: 140px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .resPortfolioSection {
    margin-bottom: 50px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .resPortfolioSection {
    margin-bottom: 60px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .resPortfolioSection {
    margin-bottom: 80px;
  }
}
</style>