UnivateProperties/src/components/processFlow/makeOffer.vue

<template>
  <!-- eslint-disable max-len -->
  <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
    <div>
      <br />
      <div v-if="isProperty">
        <div class="form-group row">
          <div class="col-md-6">
            <div class="title-box-d">
              <h3 class="title-d">{{ item.shortDescription }}</h3>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12" style="text-align:left">
            <div v-html="item.description"></div>
          </div>
        </div>
      </div>
      <div v-if="!isProperty">
        <div class="form-group row">
          <div class="col-md-6 col-lg-5 section-md-t3">
            <div class="title-box-d">
              <h3 class="title-d">{{ item.resort }}</h3>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-6">
            <label for="resortunit">Unit</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>U#</b>
                </span>
              </div>
              <input
                class="form-control"
                type="text"
                id="resort"
                name="resortunit"
                disabled
                v-model="item.unit"
              />
            </div>
          </div>
          <div class="col-md-6">
            <label for="resortWeek">Module / Week Number</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>M</b>
                </span>
              </div>
              <input
                class="form-control"
                type="text"
                id="week"
                name="resortWeek"
                disabled
                v-model="item.module"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-6">
          <label>Current Price</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>R</b>
              </span>
            </div>
            <input class="form-control" type="number" v-model="item.price" disabled />
          </div>
        </div>
        <div class="col-md-6">
          <label>Offer</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>R</b>
              </span>
            </div>
            <input
              class="form-control"
              type="number"
              step="any"
              id="minPrice"
              name="minPrice"
              v-model="item.offer"
              :disabled="!isMakeOffer"
            />
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-12">
          <label>Comments</label>
          <textarea
            class="form-control editor form-control-lg form-control-a"
            name="description"
            v-model="item.comments"
            :disabled="!isMakeOffer"
          ></textarea>
        </div>
      </div>
    </div>
    <div class="container">
      <button
        v-if="isMakeOffer"
        type="button"
        @click="SendOffer()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
        data-dismiss="modal"
      >Send Offer</button>
      <button
        v-if="!isMakeOffer && !isDecline"
        type="submit"
        @click="Accept()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
        data-dismiss="modal"
      >Accept</button>
      <button
        v-if="!isMakeOffer && !isDecline"
        type="button"
        @click="Decline()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
      >Decline</button>
      <div v-if="isDecline" class="form-group row">
        <div class="col-md-12">
          <br />
          <label>Decline Reason</label>
          <textarea class="form-control editor form-control-lg form-control-a" name="description"></textarea>
        </div>
      </div>
      <button
        v-if="isDecline"
        type="button"
        @click="Complete()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
        data-dismiss="modal"
      >Complete</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MakeOffer',
  props: {
    isMakeOffer: Boolean,
    isProperty: Boolean,
    item: Object,
  },
  data() {
    return {
      isDecline: false,
    };
  },
  methods: {
    SendOffer() {
      // Save Offer data
    },
    Accept() {
      // Accept Offer
    },
    Decline() {
      this.isDecline = true;
    },
    Complete() {
      this.isDecline = false;
    },
    Close() {},
  },
};
</script>

<style scoped>
.myWell {
  width: 100%;
  background-color: rgba(217, 217, 217, 0.85);
  border-radius: 6px;
  padding: 5px;
  margin: 3px;
}
</style>