UnivateProperties/src/components/admin/status/editTimeShareAdminPage.vue

<template>
  <main id="main">
    <div v-if="wait" id="preloader"></div>
    <section v-else id="contact2">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-header">
              <h2>Week Information</h2>
            </div>
            <div align="left" class="custom-control custom-switch mb-2">
              <div class="row">
                <div align="center" class="col"></div>
              </div>
            </div>
            <div class="form">
              <div id="sendmessage">Your details has been sent. Thank you!</div>
              <div id="errormessage"></div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <div class="input-group">
                    <label v-if="!selectedRegion" class="uniSelectLabel" for="weekInfoRegionSelect"
                      >REGION</label
                    >
                  </div>
                  <float-label label="REGION" fixed>
                    <select
                      class="form-control uniSelect"
                      v-model="selectedRegion"
                      style="font-size: 15px"
                    >
                      <option v-for="(region, r) in regions" :key="r" :value="region.regionCode">
                        {{ region.regionName }}
                      </option>
                    </select>
                  </float-label>

                  <div class="validation"></div>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <div class="input-group">
                    <float-label label="RESORT NAME" style="width: 100%" fixed>
                      <select class="form-control uniSelect" v-model="selectedResort">
                        <option value="Other">Other</option>
                        <option
                          v-for="(resort, r) in filteredResort"
                          :key="r"
                          :value="resort.resortCode"
                        >
                          {{ resort.resortName }}
                        </option>
                      </select>
                    </float-label>

                    <div class="validation"></div>
                  </div>
                  <!-- <div v-else class="input-group">
                    <float-label label="RESORT NAME" style="width:100%" fixed>
                      <select class="form-control uniSelect" v-model="selectedResort">
                        <option value="Other">{{ week.otherResortName }}</option>
                        <option
                          v-for="(resort, r) in filteredResort"
                          :key="r"
                          :value="resort.resortCode"
                          >{{ resort.resortName }}</option
                        >
                      </select>
                    </float-label>

                    <div class="validation"></div>
                  </div> -->
                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      class="form-control"
                      v-if="weekParam.otherResort"
                      placeholder="NAME OF RESORT (* IF OTHER)"
                      type="text"
                      name="other"
                      v-model="week.otherResortName"
                    />
                  </float-label>
                </div>
                <div class="form-group col-md-6">
                  <div v-if="weekParam.otherResort">
                    <label v-if="!weekParam.region" class="uniSelectLabel" for="region"
                      >REGION</label
                    >
                  </div>
                  <float-label>
                    <select
                      class="form-control uniSelect"
                      v-if="weekParam.otherResort"
                      name="region"
                      id="region"
                      v-model="weekParam.region"
                    >
                      <option v-for="(region, r) in regions" :key="r">
                        {{ region.regionName }}
                      </option>
                    </select>
                  </float-label>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      class="form-control"
                      name="unitNumber"
                      id="unitNumber"
                      placeholder="UNIT NUMBER"
                      v-model="weekParam.unitNumber"
                      data-msg="Please enter unit number"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      class="form-control"
                      name="week"
                      id="week"
                      placeholder="WEEK MODULE"
                      v-model="week.module"
                      data-msg="Please enter week number"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="SEASON" fixed>
                    <select
                      class="form-control uniSelect"
                      name="season"
                      id="season"
                      v-model="selectedSeason"
                    >
                      <option :value="season.name" v-for="(season, r) in seasons" :key="r">
                        {{ season.name }}
                      </option>
                    </select>
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="BEDROOM/S" fixed>
                    <select
                      class="form-control uniSelect"
                      name="region"
                      id="region"
                      v-model="selectedBedrooms"
                    >
                      <option v-for="(item, i) in resortBedrooms" :key="i">
                        {{ item }}
                      </option>
                    </select>
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="SLEEP MAX" fixed>
                    <select
                      class="form-control uniSelect"
                      name="region"
                      id="region"
                      v-model="selectedMaxSleep"
                    >
                      <option v-for="(item, i) in maxSleep" :key="i">
                        {{ item }}
                      </option>
                    </select>
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label>
                    <input
                      type="number"
                      class="form-control"
                      name="levy"
                      id="levy"
                      placeholder="Levy Amount"
                      v-model="weekParam.levyAmount"
                      data-msg="Please enter levy amount"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="WEEK TYPE" fixed>
                    <select
                      class="form-control uniSelect"
                      name="region"
                      id="region"
                      v-model="selectedWeekType"
                    >
                      <option :key="0">Flexi</option>
                      <option :key="1">Fixed</option>
                      <option :key="2">Module</option>
                      <option :key="3">Syndicate</option>
                    </select>
                  </float-label>
                </div>
                <div class="form-group col-md-6 mt-2"></div>
                <div class="form-group col-md-6 mt-4">
                  <float-label label="ARRIVAL DATE" fixed>
                    <input
                      type="date"
                      class="form-control"
                      name="occupationDate1"
                      v-model="dateParam"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-4">
                  <float-label label="DEPARTURE DATE" fixed>
                    <input
                      type="date"
                      class="form-control"
                      name="occupationDate2"
                      v-model="depDateParam"
                    />
                  </float-label>
                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="ASKING PRICE" fixed>
                    <currency-input
                      onclick="this.setSelectionRange(0, this.value.length)"
                      name="tsaPrice"
                      :value="week.askingPrice"
                      @input="week.askingPrice = $event"
                      v-model="week.askingPrice"
                      id="resPrice"
                      class="form-control uniInput"
                    />
                  </float-label>
                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6 mt-2">
                  <float-label label="FINAL PRICE">
                    <currency-input
                      onclick="this.setSelectionRange(0, this.value.length)"
                      name="tsPrice"
                      :value="weekParam.sellPrice"
                      @input="weekParam.sellPrice = $event"
                      v-model="weekParam.sellPrice"
                      id="resPrice"
                      class="form-control uniInput"
                    />
                  </float-label>
                  <div class="validation"></div>
                </div>
              </div>
            </div>
            <div align="left" class="custom-control custom-switch mb-2">
              <div class="row">
                <div align="center" class="col">
                  <label class="mr-5">Has your week been spacebanked for the current year?</label>
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customSwitch2"
                    :checked="weekParam.currentYearBanked"
                    @change="changeCurrentBanked"
                  />
                  <label class="custom-control-label" for="customSwitch2">
                    {{ weekParam.currentYearBanked ? "Yes" : "No" }}
                  </label>
                  <div
                    class="spacebanked1"
                    :class="{
                      'spacebanked1--clicked': weekParam.currentYearBanked
                    }"
                  >
                    <div class="col-md-6">
                      <label
                        for="If yes, please confirm with whom"
                        v-if="weekParam.currentYearBanked"
                        >Please confirm with whom</label
                      >
                      <select
                        class="form-control uniSelect"
                        name="spacebankOwner"
                        v-if="weekParam.currentYearBanked"
                        v-model="weekParam.bankedWith"
                      >
                        <option v-for="(item, i) in bankedEntities" :key="i" :value="item">
                          {{ item }}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="section-header" style="margin-top: 50px">
              <h2>Detailed Individual Information</h2>
            </div>
            <div class="form">
              <div v-if="ROLE === 'Super Admin'" class="row mb-4">
                <div class="col">
                  <float-label label="OWNER TYPE" fixed>
                    <select v-model="weekParam.customOwner" class="form-control uniSelect mt-3">
                      <option v-bind:value="true">Custom Owner</option>
                      <option v-bind:value="false">Registered User</option>
                    </select>
                  </float-label>
                </div>
              </div>
              <div v-if="ROLE === 'Super Admin'" class="row mb-4">
                <div class="col">
                  <float-label label="SELECT OWNER" fixed>
                    <select
                      :disabled="weekParam.customOwner"
                      v-model="weekParam.ownerId"
                      class="form-control uniSelect mt-3"
                      @change="updateCurrentUser()"
                    >
                      <option v-for="indiv in individuals" :key="indiv.id" :value="indiv.id">
                        {{ indiv.fullName }}
                      </option>
                    </select>
                  </float-label>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      name="name"
                      :disabled="!weekParam.customOwner"
                      class="form-control"
                      id="name"
                      placeholder="Name"
                      data-rule="minlen:4"
                      data-msg="Please enter your name"
                      v-model="week.owner.name"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      class="form-control"
                      name="surname"
                      id="surname"
                      placeholder="Surname"
                      data-msg="Please enter your surname"
                      v-model="week.owner.surname"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
              </div>
              <div class="row mt-2">
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      name="idnum"
                      class="form-control"
                      id="idnum"
                      placeholder="ID Number"
                      data-rule="minlen:4"
                      data-msg="Please enter your ID number"
                      v-model="week.owner.idNumber"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      class="form-control"
                      name="company"
                      id="company"
                      placeholder="Company Reg Number"
                      data-rule="minlen:4"
                      data-msg="Please enter your company reg number"
                      v-model="week.owner.companyRegNumber"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
              </div>
              <div class="row mt-2">
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      class="form-control"
                      name="email"
                      id="email"
                      placeholder="Email Address"
                      data-msg="Please enter your email address"
                      v-model="week.owner.email"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
              </div>
              <div class="row mt-2">
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      name="cell"
                      class="form-control"
                      id="cell"
                      placeholder="Cell Number"
                      data-rule="minlen:4"
                      data-msg="Please enter your cell number"
                      v-model="week.owner.cellNumber"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
                <div class="form-group col-md-6">
                  <float-label>
                    <input
                      type="text"
                      :disabled="!weekParam.customOwner"
                      class="form-control"
                      name="landline"
                      id="landline"
                      placeholder="Landline Number"
                      data-msg="Please enter your landline number"
                      v-model="week.owner.telephone"
                    />
                  </float-label>

                  <div class="validation"></div>
                </div>
              </div>
            </div>
            <div class="section-header" style="margin-top: 50px">
              <h2>Week Agent</h2>
            </div>
            <div class="row">
              <div class="col-md-6">
                <label for="Name of Agency">Agency</label>
                <select
                  class="form-control uniSelect"
                  id="Agency"
                  name="agency"
                  v-model="weekParam.agencyId"
                >
                  <option value=""></option>
                  <option v-for="(item, i) in agencies" :key="i" :value="item.id">
                    {{ item.agencyName }}
                  </option>
                </select>
              </div>
              <div class="col-md-6">
                <label for="Name of Agent">Agent</label>
                <select
                  class="form-control uniSelect"
                  id="agent"
                  name="agent"
                  v-model="weekParam.agentId"
                  :disabled="!weekParam.agencyId"
                >
                  <option value=""></option>
                  <option v-for="(item, i) in displayNotDeletedAgents" :key="i" :value="item.id">
                    <div>{{ item.name + " " + item.surname }}</div>
                  </option>
                </select>
              </div>
            </div>
            <div v-if="!boolAwaitingPayment">
              <div class="section-header">
                <h2>Publish Timeshare Week</h2>
              </div>
              <div class="form">
                <div class="row">
                  <div class="form-group col-md-6">
                    <float-label label="STATUS" fixed>
                      <select
                        class="form-control uniSelect"
                        name="status"
                        id="status"
                        v-model="weekParam.status.id"
                      >
                        <option :key="status.id" :value="status.id" v-for="status in statusPerRole">
                          {{ status.description }}
                        </option>
                      </select>
                    </float-label>
                  </div>
                  <div class="form-group col-md-6">
                    <float-label label="Publish" fixed>
                      <select
                        class="form-control uniSelect"
                        name="publish"
                        id="publish"
                        v-model="weekParam.publish"
                      >
                        <option :key="0" :value="false">No</option>
                        <option :key="1" :value="true">Yes</option>
                      </select>
                    </float-label>
                  </div>
                  <div class="form-group col-md-6 mt-2">
                    <float-label label="DATE PUBLISHED" fixed>
                      <input
                        type="date"
                        class="form-control"
                        name="publishDate"
                        v-model="pubDateParam"
                      />
                    </float-label>

                    <div class="validation"></div>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col-md-12">
                  <alert :text="errorMessage" :type="errorOccurred" />
                </div>
              </div>
              <div class="row">
                <div class="text-center col-6">
                  <button class="btn-solid-blue" v-on:click="saveEdit()">
                    SAVE
                  </button>
                </div>
                <div class="text-center col-6">
                  <button class="btn-solid-blue" v-on:click="backToListView()">
                    BACK
                  </button>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="row mt-5">
                <div class="col">
                  <p>
                    Payment for this timeshare week has not been confirmed yet.
                  </p>
                </div>
              </div>
              <!-- <div class="row ">
                <div class="col-6">
                  <button class="btn-solid-blue" v-on:click="paygateRedirect()">
                    MAKE PAYMENT
                  </button>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import addressAutoComplete from "../../shared/addressAutoComplete";
import Alert from "../../shared/alert.vue";
import Log from "../../../assets/Log";
import _ from "lodash";

export default {
  name: "EditTimeshare",
  props: {
    weekParam: {},
    weekId: {
      default: 0
    }
  },
  data() {
    return {
      wait: true,
      userLoggedIn: Log.isLoggedIn(),
      listedWeekId: this.$route.params.id,
      selectedItems: [],
      selectedRegion: {},
      selectedResort: {},
      selectedSeason: {},
      selectedBedrooms: {},
      selectedMaxSleep: {},
      selectedWeekType: {},
      selectedStatus: {},
      selectedPublish: {},
      dateParam: {},
      depDateParam: {},
      pubDateParam: {},
      boolAwaitingPayment: false,
      selectedUser: "",
      errorOccurred: "",
      errorMessage: ""
    };
  },
  components: {
    addressAutoComplete,
    Alert
  },
  async mounted() {
    if (this.sellItem.id) {
      this.newSale();
    }
    if (this.weekParam.season === "Peak") {
      this.selectedSeason = "Peak 1";
    } else {
      this.selectedSeason = this.weekParam.season;
    }
    this.initTimeshare(0);
    this.getIndividual(Log.getUser().id);
    this.getBanks();
    //this.getWeek(this.weekParam.id);
    // console.log(this.regions);
    // console.log(this.weekParam.region.regionCode);
    this.selectedRegion = this.weekParam.region.regionCode;
    this.selectedResort = this.weekParam.resort.resortCode;
    this.selectedBedrooms = this.weekParam.bedrooms;
    this.selectedMaxSleep = this.weekParam.maxSleep;
    this.selectedWeekType = this.weekParam.weekType;
    this.selectedStatus = this.weekParam.status;
    this.selectedPublish = this.weekParam.publish;
    this.fixDates();
    if (
      this.weekParam.status.description === "Awaiting Payment" ||
      this.weekParam.status.description === "Awaiting EFT Payment"
    ) {
      if (this.ROLE !== "Super Admin") {
        this.boolAwaitingPayment = true;
      }
    }
    //console.log(this.individuals);
  },
  created() {
    this.initTimeshare(this.weekId);
    this.getIndividuals();
    this.getStatusList();
    this.getWeek(this.weekParam.id).then(() => {
      if (this.weekParam.customOwner) {
        this.retrieveNonRegIndiv(this.weekParam.id).then(() => {
          this.week.owner.name = this.getIndiv[0].name;
          this.week.owner.surname = this.getIndiv[0].surname;
          this.week.owner.idNumber = this.getIndiv[0].idNumber;
          this.week.owner.companyRegNumber = this.getIndiv[0].companyRegNumber;
          this.week.owner.email = this.getIndiv[0].emailAddress;
          this.week.owner.cellNumber = this.getIndiv[0].cellNumber;
          this.week.owner.telephone = this.getIndiv[0].telephoneNumber;
          this.wait = false;
        });
      } else {
        this.wait = false;
      }
    });
  },
  computed: {
    ...mapState("timeshare", [
      "resorts",
      "regions",
      "detailedRegion",
      "seasons",
      "result",
      "resortBedrooms",
      "maxSleep",
      "bankedEntities",
      "sellItem",
      "agencies",
      "agents",
      "getTemplate"
    ]),
    ...mapGetters("nonRegIndividual", ["getIndiv"]),
    ...mapState("individual", ["indiv"]),
    ...mapState("authentication", ["isLoggedIn"]),
    ...mapState("myWeeks", ["items", "week"]),
    ...mapState("status", ["statusList"]),
    ...mapGetters({
      user: "authentication/getUser",
      person: "authentication/getPerson"
    }),
    ...mapState("bank", ["banks"]),
    ...mapState("register", ["individuals", "removeIndividual"]),
    ...mapGetters("fees", ["getListingFee"]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    },
    ROLE() {
      var userObj = JSON.parse(localStorage.getItem("user"));
      return userObj.role;
    },
    statusPerRole() {
      var list = [];
      this.statusList.forEach(status => {
        if (this.ROLE !== "Super Admin") {
          if (status.code !== "AP") {
            if (status.code !== "APEFT") {
              list.push(status);
            }
          }
        } else {
          list.push(status);
        }
      });
      return list;
    },
    filteredResort() {
      let list = [];
      if (this.week && this.week.region && this.selectedRegion) {
        const item = this.detailedRegion.find(
          region => region.region.regionCode === this.selectedRegion
        );
        if (item) {
          list = item.children;
        }
      } else {
        list = this.resorts;
      }
      return _.sortBy(list, x => x.resortName);
    },
    isLoggedIn() {
      return this.user && this.person;
    },
    displayNotDeletedAgents() {
      var notDeletedArr = [];
      this.agents.forEach(agent => {
        if (!agent.isDeleted) {
          if (agent.agencyId === this.weekParam.agencyId) {
            notDeletedArr.push(agent);
          }
        }
      });
      return notDeletedArr;
    }
  },
  methods: {
    ...mapActions("individual", ["getIndividual"]),
    ...mapActions("nonRegIndividual", ["retrieveNonRegIndiv"]),
    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
    ...mapActions("payment", ["addPayment"]),
    ...mapActions("bank", ["getBanks"]),
    ...mapActions("myWeeks", ["getItems", "getWeek", "editSave"]),
    ...mapActions("status", ["getStatusList"]),
    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
    newSale() {
      this.weekId = 0;
      this.getBlankWeek();
    },
    fixDates() {
      var date = new Date(this.weekParam.arrivalDate).setHours(+4);
      var finDate = new Date(date).toISOString().substring(0, 10);
      this.dateParam = finDate;
      var depDate = new Date(this.weekParam.departureDate).setHours(+4);
      var finDepDate = new Date(depDate).toISOString().substring(0, 10);
      this.depDateParam = finDepDate;
      var datePub = new Date(this.weekParam.pulbishedDate).setHours(+4);
      var finDatePub = new Date(datePub).toISOString().substring(0, 10);
      this.pubDateParam = finDatePub;
    },
    updateCurrentUser() {
      this.individuals.forEach(indiv => {
        if (this.weekParam.ownerId === indiv.id) {
          this.week.owner.name = indiv.name;
          this.week.owner.surname = indiv.surname;
          this.week.owner.idNumer = indiv.idNumber;
          this.week.owner.companyRegNumber = indiv.companyRegNumber;
          this.week.owner.email = indiv.emailAddress;
          this.week.owner.cellNumber = indiv.cellNumber;
          this.week.owner.landlineNumber = indiv.telephone;
          //console.log(this.week.owner);
        }
      });
    },
    saveEdit() {
      this.regions.forEach(region => {
        if (region.regionCode === this.selectedRegion) {
          //console.log(region);
          this.weekParam.regionId = region.id;
        }
      });
      this.resorts.forEach(resort => {
        if (resort.resortCode === this.selectedResort) {
          this.weekParam.resortCode = resort.resortCode;
          this.weekParam.resortName = resort.resortName;
        }
      });
      console.log(this.selectedSeason);
      this.weekParam.season = this.selectedSeason;

      this.resortBedrooms.forEach(bedroom => {
        if (bedroom === this.selectedBedrooms) {
          this.weekParam.bedroom = bedroom;
        }
      });
      this.maxSleep.forEach(sleepMax => {
        if (sleepMax === this.selectedMaxSleep) {
          this.weekParam.maxSleep = sleepMax;
        }
      });
      if (this.week.owner.cellNumber === "") {
        delete this.week.owner.cellNumber;
      }
      if (this.week.owner.telephone === "") {
        delete this.week.owner.telephone;
      }
      if (this.week.owner.spouseTelephone === "") {
        this.week.owner.spouseTelephone = null;
      }
      if (this.week.owner.spouseCellnumber === "") {
        this.week.owner.spouseCellnumber = null;
      }
      this.weekParam.arrivalDate = new Date(this.dateParam).toISOString().substring(0, 10);
      this.weekParam.departureDate = new Date(this.depDateParam).toISOString().substring(0, 10);
      //console.log(this.pubDateParam);
      if (this.pubDateParam) {
        this.weekParam.pulbishedDate = new Date(this.pubDateParam).toISOString().substring(0, 19);
      }
      this.weekParam.owner = this.week.owner;
      this.weekParam.askingPrice = this.week.askingPrice;
      this.weekParam.module = this.week.module;
      parseFloat(this.weekParam.sellPrice);
      parseFloat(this.weekParam.levyAmount);
      this.weekParam.weekType = this.selectedWeekType;
      delete this.weekParam.Owner;
      delete this.weekParam.agency;
      delete this.weekParam.agent;
      //delete this.status;
      delete this.weekParam.owner.howMarried;
      delete this.weekParam.cellNumber;
      console.log(this.week.owner);
      this.week.owner.name =
        this.week.owner.name.charAt(0).toUpperCase() + this.week.owner.name.slice(1);
      this.week.owner.surname =
        this.week.owner.surname.charAt(0).toUpperCase() + this.week.owner.surname.slice(1);
      this.weekParam.statusId = this.selectedStatus.id;
      //console.log(this.weekParam);
      //console.log(JSON.stringify(this.weekParam));
      //console.log(this.weekParam);
      this.editSave(this.weekParam)
        .then(e => {
          this.backToListView();
        })
        .catch(ex => {
          //console.log(ex);
          this.errorOccurred = "ERRORHTML";
          this.errorMessage = ex;
        });
    },
    resortChange() {
      this.onResortChange({
        resortName: this.week.resort.resortName,
        resortCode: this.week.resort.resortCode
      });

      if (this.week && this.week.resort === "Other") {
        this.week.otherResortName = undefined;
        this.week.otherResort = true;
      } else {
        this.week.otherResortName = undefined;
        this.week.otherResort = false;
      }
    },
    changeCurrentBanked() {
      this.weekParam.bankedWith = undefined;
      this.weekParam.currentYearBanked = !this.weekParam.currentYearBanked;
    },
    backToListView() {
      this.$router.push("/status/timeshareAdmin");
    },
    paygateRedirect() {
      var amount = this.getListingFee.amount;
      var paymentObj = {
        timeshareWeekId: this.weekParam.id, // this.sellItem.Id,
        propertyId: 0,
        creatydById: Log.getUser().id, //Log.getUser().id,
        amount: amount,
        paymentStatus: "",
        paymentToken: ""
      };

      this.addPayment(paymentObj).then(res => {
        this.$router.push({
          name: "PaymentGateway",
          params: {
            paymentReqId: res.PAY_REQUEST_ID,
            checksum: res.CHECKSUM
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.refbyAgent {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.refbyAgent--clicked {
  height: 150px;
}

.spacebanked1 {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.spacebanked1--clicked {
  height: 150px;
}

.custom-file-label {
  border-width: 2px;
  border-color: rgb(27, 117, 187);
  margin-bottom: 20px;
}

.custom-file-label::after {
  border-left: none;
  border-bottom: solid;
  border-width: 2px;
  border-color: rgb(27, 117, 187);
  font-family: "Muli";
}
</style>