UnivateProperties/src/components/timeshare/resort/unit/summarySection.vue

<template>
  <div class="container pb-5">
    <div class="row">
      <div class="col">
        <div class="section-header">
          <!--<h2>{{ week ? week.resort.resortName : '' }}</h2> -->
        </div>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-md-12 col-lg-4">
        <gallerySection :images="resort.images" />
      </div>
      <div class="col-md-12 col-lg-8 summarySection">
        <h4>
          Unit {{ week ? week.unitNumber : '' }} |
          {{ week ? week.bedrooms : '' }} Bedroom/{{
            week ? week.maxSleep : ''
          }}
          Sleeper
        </h4>
        <p style="text-align: left;">Reference: #{{ week.id }}</p>
        <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">Unit</th>
              <th scope="col">Week / Module</th>
              <th scope="col">Arrival Date</th>
              <th scope="col">Bedrooms</th>
              <th scope="col">Season</th>
              <th scope="col">Current Year Levy</th>
              <th scope="col">Price Incl VAT</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ week ? week.unitNumber : '' }}</td>
              <td>{{ week ? week.weekNumber : '' }}</td>
              <td
                v-if="
                  week.arrivalDate === '0001-01-01T00:00:00' ||
                  week.arrivalDate === '1753-01-01T00:00:00'
                "
              ></td>
              <td v-else>{{ week.arrivalDate | toDate }}</td>
              <td>{{ week ? week.bedrooms : '' }}</td>
              <td>{{ week ? week.season : '' }}</td>
              <td>{{ week ? week.levyAmount : '' | toCurrency }}</td>
              <td>{{ week ? week.sellPrice : '' | toCurrency }}</td>
            </tr>
          </tbody>
        </table>

        <div class="row mt-5">
          <div align="center" class="col-md-6">
            <a href="javascript:history.back()" class="btn-white-border">
              Back
            </a>
          </div>
          <div align="center" class="col-md-6">
            <button
              class="btn-white-border"
              style="color: white;"
              data-toggle="modal"
              data-target="#myModal"
            >
              Make an Offer
            </button>
            <div class="col-md-12">
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                        &times;
                      </button>
                    </div>
                    <div padding-left="20px">
                      <makeOffer
                        name="MakeOffer"
                        :isMakeOffer="true"
                        :isProperty="false"
                        :item="week"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from 'vuex'
import makeOffer from '../../../processFlow/makeOffer.vue'
import gallerySection from '../gallerySection'
export default {
  components: {
    makeOffer,
    gallerySection,
  },
  mounted() {
    this.getWeek(this.weekId)
  },
  computed: {
    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
    ...mapState('weekList', ['week']),
  },
  props: {
    weekId: {},
  },
  methods: {
    ...mapActions('weekList', ['getWeek']),
    formatPrice(value) {
      if (value) {
        const val = (value / 1).toFixed(2)
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.summarySection {
  margin-top: -50px;
}
</style>