<template>
    <div v-if="showStagingArea" :class="stagingAreaStyle">
        <div class="p-3">
            <div
                @click="$store.commit('application/showStagingArea', !showStagingArea);"
                class="ui-element close-showStagingArea position-absolute"
            >
                <i class="fa fa-close"></i>
            </div>
            <div class="card-title mb-4 headline">
                <h4>Staging area</h4>
                <hr>
            </div>
            <div class="d-flex flex-row input-group mb-4">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Location</th>
                            <th>Datatype</th>
                            <th>Importdate</th>
                            <th>ImportID</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="data in filteredData" :key="data.id">
                            <td>{{data.name}}</td>
                            <td>{{data.location}}</td>
                            <td>{{data.date}}</td>
                            <td>{{data.type}}</td>
                            <td>{{data.importID}}</td>
                            <td>
                                <input
                                    type="checkbox"
                                    aria-label="Checkbox for following text input"
                                >
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

const demodata = [
  {
    id: 1,
    name: "B1",
    date: "2018-11-19",
    location: "bla",
    status: "Not approved",
    importID: "123456789",
    type: "bottleneck"
  },
  {
    id: 2,
    name: "B2",
    date: "2018-11-19",
    location: "bla",
    status: "Not approved",
    importID: "123456789",
    type: "bottleneck"
  },
  {
    id: 3,
    name: "s1",
    date: "2018-11-13",
    location: "bla",
    status: "Not approved",
    importID: "987654321",
    type: "soundingresult"
  },
  {
    id: 4,
    name: "s2",
    date: "2018-11-13",
    location: "bla",
    status: "Not approved",
    importID: "987654321",
    type: "soundingresult"
  }
];

export default {
  computed: {
    ...mapState("application", ["showStagingArea"]),
    filteredData() {
      return demodata;
    },
    stagingAreaStyle() {
      return [
        "ui-element staging-card bg-white ml-3 pt-3 mx-auto rounded border-top position-relative",
        {
          stagingcollapsed: !this.showStagingArea,
          stagingextended: this.showStagingArea
        }
      ];
    }
  }
};
</script>

<style lang="sass" scoped>
.close-showStagingArea
  z-index: 2
  right: 0
  top: 7px
  height: $icon-width
  width: $icon-height

.stagingcollapsed
  width: 0
  height: 0
  transition: $transition-fast

.stagingextended
  min-width: 600px

.staging-card
  position: relative
  background-color: #ffffff
  padding-top: $offset
  opacity: $slight-transparent
  transition: left 0.3s ease
  overflow: hidden
  background: #fff
  margin-left: $offset !important
  margin-top: -$offset !important
  width: 90%

.table th,
td
  font-size: 0.9rem
  border-top: 0px !important
  text-align: left
  padding: 0.5rem !important
</style>