<template>
  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="section-header">
              <h2>Bid Offers</h2>
            </div>
          </div>
        </div>
        <div class="container">
          <listView
            :items="bidItems"
            :showNew="false"
            :editable="true"
            :deleteable="false"
            :displayColumns="columns"
            :displayFormats="formats"
            :displayHeaders="columnHeaders"
            :sortKey="'date'"
            @onEdit="Edit"
          />
        </div>
        <div
          :id="'myModalOffer'"
          class="modal fade"
          role="dialog"
          :ref="'MyModalForm'"
        >
          <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>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import makeOffer from './makeOffer.vue'
import listView from '../shared/listView.vue'
import Log from '../../assets/Log'

export default {
  name: 'offers',
  components: { makeOffer, listView },
  data() {
    return {
      item: {},
      columns: [
        'date',
        'type',
        'shortDescription',
        'status',
        'price',
        'offer',
        'madeBy',
      ],
      formats: ['date', 'text', 'text', 'text', 'money', 'money', 'text'],
      columnHeaders: ['', '', 'description', '', '', 'offerPrice', 'offerBy'],
    }
  },
  methods: {
    ...mapActions('bid', ['getBids']),
    Edit(item) {
      this.item = item

      const element = this.$refs.MyModalForm
      $(element).modal('show')
    },
  },
  computed: {
    ...mapState('bid', ['bidItems']),
  },
  mounted() {
    this.getBids(Log.getUser().username)
  },
}
</script>
