<template>
  <div>
    <div v-if="loaded" class="container">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <br />
              <h1 class="title-d" style="text-align:left; font-size: 250%">Search {{ name }}</h1>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="container">
            <ListView
              v-if="name === 'Timeshare'"
              :items="items"
              :showNew="false"
              :showColumnChooser="false"
              @onRowClick="onRowClick"
            />
            <ListView2 v-else :items="propertiesLive" :showNew="false" @onRowClick="onRowClick" />
          </div>
        </div>
      </div>
    </div>
    <div v-else class="text-center mt-5">
      <vue-loaders
        class="my-auto"
        name="line-spin-fade-loader"
        color="black"
        scale="1"
      ></vue-loaders>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import ListView from "../../shared/listView.vue";
import ListView2 from "../../shared/listView.vue";
import Log from "../../../assets/Log";

export default {
  name: "CarouselSearch",
  props: {
    name: String
  },
  components: {
    ListView,
    ListView2
  },
  data() {
    return {
      loaded: false,
      user: Log.getUser()
    };
  },
  mounted() {
    this.loadData().then(() => {
      setTimeout(() => {
        this.loaded = true;
      }, 100);
    });
  },
  computed: {
    ...mapState("myWeeks", ["items"]),
    ...mapState("propertyList", ["propertiesLive"]),
    // eslint-disable-next-line vue/return-in-computed-property
    nameChanged() {
      if (this.name === "Timeshare") {
        this.getItems(this.user.id);
      } else {
        this.getLiveProperties();
      }
    }
  },
  methods: {
    ...mapActions("myWeeks", ["getItems"]),
    ...mapActions("propertyList", ["getLiveProperties"]),
    onRowClick(item) {
      // if (this.name === 'Timeshare') {
      //   const week = this.items[item];
      //   this.$emit('onSelected', week);
      // } else {
      //   const prop = this.propertiesLive[item];
      //           alert(JSON.stringify(prop));
      this.$emit("onSelected", item);
      //}
    },
    async loadData() {
      if (this.name === "Timeshare") {
        await this.getItems(this.user.id);
      } else {
        await this.getLiveProperties();
      }
    }
  },
  watch: {
    nameChanged() {
      return null;
    }
  }
};
</script>
