<template>
  <section id="portfolio">
    <div class="container">
      <div v-if="boolLoaded" class="row">
        <div v-for="week in getLatestWeeks" :key="week.id" class="col-lg-3 col-md-4 col-sm-6">
          <div class="portfolio-item justify-content-md-center my-3" style="min-height:430px">
            <img :src="week.image" alt="" style="max-height: 250px" />
            <div class="my-3">
              <h4>{{ week.resortName }}</h4>
              <p>
                <strong>Week</strong> {{ week.module }} &nbsp;|&nbsp; <strong>Season</strong>
                {{ week.season }} <br />
                <strong>Levy</strong> R{{ week.levyAmount }} &nbsp;|&nbsp;
                <strong>Week Reference</strong> #{{ week.id }}
              </p>
              <h4>R{{ week.sellPrice }}</h4>
              <router-link :to="'/resort/' + week.resortCode" class="btn-white-border"
                ><i class="fa fa-search"></i> VIEW</router-link
              >
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <vue-loaders
          class="my-auto"
          style="margin-top:50px !important; margin-bottom:50px !important; margin-y:50%"
          name="line-spin-fade-loader"
          color="black"
          scale="1"
        ></vue-loaders>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("resort", ["resort", "description", "images", "layout"]),
    ...mapGetters("timeshare", ["getLatestWeeks"])
  },
  created() {
    this.LoadData();
  },
  data() {
    return {
      latestWeeks: [],
      boolLoaded: false,
      currImage: "",
      weeks: []
    };
  },
  methods: {
    View(item) {
      this.$router.push(`/resort/${item.resort.resortId}/${item.unitNumber}`);
    },
    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
    ...mapActions("resort", ["getImage1", "getResortData"]),
    ...mapActions("timeshare", ["retrieveLatestWeeks"]),
    LoadData() {
      this.retrieveLatestWeeks().then(() => {
        this.boolLoaded = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
