<template>
  <!-- eslint-disable max-len -->
  <section id="portfolio">
    <div class="container-fluid p-0">
      <div class="row ml-4">
        <div class="col">
          <h2>Search Results</h2>
        </div>
      </div>
      <div class="contianer-fluid">
        <div class="row">
          <div class="col">
            <propertyCard
              v-if="properties.length > 0"
              name="propertyholder"
              :properties="properties"
              :salesType="propertySearch.salesType"
            />
          </div>
        </div>
        <div v-if="properties.length === 0">
          <img src="../../../public/img/no-homes.png" />
          <br />
          <br />
          <p>Sorry no listing where found matching your search</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import propertyCard from "./propertyCard.vue";

export default {
  name: "propertysearch",
  components: {
    propertyCard
  },
  data() {
    return {};
  },
  mounted() {
    if (typeof this.propertySearch.propertyUsageType === "undefined") {
      this.propertySearch.propertyUsageType = "Residential";
    }
    if (this.user) {
      this.propertySearch.userName = this.user.username;
    }

    this.searchProperties(this.propertySearch);
  },
  methods: {
    ...mapActions("propertySearch", [
      "searchProperties",
      "clearProperties",
      "updateResultsShowing"
    ]),
    SetType(item) {
      this.propertySearch.propertyUsageType = item;
    },
    SearchPage() {
      this.clearProperties();
      this.$router.push("/property/search");
    }
  },
  computed: {
    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
    ...mapState("authentication", ["user"]),
    ParamsChanged() {
      console.log(JSON.stringify(this.propertySearch));
      if (typeof this.propertySearch.propertyUsageType === "undefined") {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.propertySearch.propertyUsageType = "Residential";
      }
      this.searchProperties(this.propertySearch);
      return null;
    }
  },
  watch: {
    ParamsChanged() {
      return null;
    }
  }
};
</script>

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