<template>
  <div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Region</th>
          <th>Resort</th>
          <th>Unit Number</th>
          <th>Week Number</th>
          <th>Arrival Date</th>
          <th>Departure Date</th>
          <th>Bedrooms</th>
          <th>Price</th>
          <th>Status</th>
          <th>Interested</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in filteredWeeks" :key="i">
          <td>{{item.region ? item.region.regionName : ''}}</td>
          <td>{{item.resort ? item.resort.resortName : ''}}</td>
          <td>{{item.unitNumber}}</td>
          <td>{{item.weekNumber}}</td>
          <td>{{item.arrivalDate}}</td>
          <td>{{item.departureDate}}</td>
          <td>{{item.bedrooms}}</td>
          <td>{{item.sellPrice | toCurrency}}</td>
          <td>{{item.status ? item.status.description : ''}}</td>
          <td>
            <div class="col-md-12">
              <button
                type="button"
                class="btn btn-b-n"
                data-toggle="modal"
                data-target="#myModal"
              >Make an Offer</button>
              <div id="myModal" 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="true"
                        :isProperty="false"
                        :item="item"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import makeOffer from '../../processFlow/makeOffer.vue';

export default {
  components: {
    makeOffer,
  },
  computed: {
    ...mapState('weekList', ['weeks']),
    ...mapGetters({
      filteredWeeks: 'weekList/filteredWeeks',
    }),
  },
  mounted() {
    this.getWeeks();
  },
  methods: {
    ...mapActions('weekList', ['getWeeks', 'addDummyWeek']),
  },
};
</script>
<style>
</style>
