<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <section class="intro-single">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-lg-8">
              <div class="title-single-box">
                <h1 class="title-single">Bid Offers</h1>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Type</th>
            <th>Description</th>
            <th>Status</th>
            <th>Price</th>
            <th>Offered Price</th>
            <th>Offer By</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in bidItems" :key="i">
            <td>{{ item.type }}</td>
            <td>{{ item.shortDescription }}</td>
            <td>{{ item.status }}</td>
            <td>R {{ formatPrice(item.price) }}</td>
            <td>R {{ formatPrice(item.offer) }}</td>
            <td>{{ item.madeBy }}</td>
            <td>
              <button
                type="button"
                class="btn btn-b-n"
                data-toggle="modal"
                :data-target="'#myModal' + i"
              >View</button>
              <div :id="'myModal' + i" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div padding-left="20px">
                      <makeOffer
                        name="MakeOffer"
                        :isMakeOffer="false"
                        :isProperty="item.type === 'Property'"
                        :canEdit="item.statusCode === 'E1'"
                        :item="item"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import makeOffer from './makeOffer.vue';

export default {
  name: 'offers',
  components: { makeOffer },
  data() {
    return {
      item: {},
    };
  },
  methods: {
    ...mapActions('bid', ['getBids']),
    // SetItem(data) {
    //   this.item = data;
    //   const element = this.$refs.modal.$el;
    //   $(element).modal('show');
    // },
    formatPrice(value) {
      const val = (value / 1).toFixed(2);
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
    },
  },
  computed: {
    ...mapState('bid', ['bidItems']),
  },
  mounted() {
    this.getBids();
  },
};
</script>
