<template>
  <section id="services">
    <div v-if="wait" id="preloader"></div>
    <div class="container">
      <div class="col-12">
        <h1>List your property</h1>
      </div>
      <div class="col-12">
        <strong>Type of Property</strong><br />
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link btn-solid-blue active"
              id="pills-residential-tab"
              data-toggle="pill"
              href="#pills-residential"
              role="tab"
              aria-controls="pills-residential"
              aria-selected="true"
              >RESIDENTIAL</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link btn-solid-blue"
              id="pills-commercial-tab"
              data-toggle="pill"
              href="#pills-commercial"
              role="tab"
              aria-controls="pills-commercial"
              aria-selected="false"
              >COMMERCIAL</a
            >
          </li>
        </ul>
      </div>

      <div class="col-12 py-5">
        <div class="tab-content" id="pills-tabContent">
          <div
            class="tab-pane fade show active"
            id="pills-residential"
            role="tabpanel"
            aria-labelledby="pills-residential-tab"
          >
            <ResidentialCreate :propFields="residentialFields" />
          </div>
          <div
            class="tab-pane fade"
            id="pills-commercial"
            role="tabpanel"
            aria-labelledby="pills-commercial-tab"
          >
            <CommercialCreate :propFields="commercialFields" />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import ResidentialCreate from "../residential/createProperty/residentialCreateNew";
import CommercialCreate from "../commercial/createProperty/commercialCreateNew";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    ResidentialCreate,
    CommercialCreate
  },
  data() {
    return {
      wait: true,
      residentialFields: [],
      commercialFields: []
    };
  },
  methods: {
    ...mapActions("property", ["getPropertyTypes", "getPropertyFields"]),
    async loadResidentialFields() {
      await this.getPropertyFields("Residential");
    },
    async loadCommercialFields() {
      await this.getPropertyFields("Commercial");
    }
  },
  computed: {
    ...mapState("property", ["propertyTypes", "propertyFields"]),
    propFields() {
      if (!this.wait) {
        return this.propertyFields[0].fields;
      }
    }
  },
  created() {
    this.loadResidentialFields().then(() => {
      this.residentialFields = this.propertyFields[0].fields.sort((a, b) =>
        a.rank > b.rank ? 1 : -1
      );
      this.loadCommercialFields().then(() => {
        this.wait = false;
        this.commercialFields = this.propertyFields[0].fields.sort((a, b) =>
          a.rank > b.rank ? 1 : -1
        );
      });
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.nav-pills .nav-link.active {
  color: #1b75bb;
  font-weight: 400;
  background-color: white;
}
</style>
