<template>
  <div
    :class="[
      'additionallog d-flex flex-column text-left',
      { split: showAdditional }
    ]"
  >
    <virtual-list
      :size="scrollistConfig.size"
      :remain="scrollistConfig.remain"
      :bench="scrollistConfig.bench"
    >
      <Item
        class="d-flex flex-row px-2 border-top"
        v-for="item in details.entries"
        :key="item.time"
        :line="item"
      />
    </virtual-list>
  </div>
</template>

<style scoped>
.additionallog {
  overflow-y: auto;
}
.additionallog.split {
  max-height: 35vh;
}
.additionallog > div:not(:first-child) {
  border-top-style: dashed !important;
}
.additionallog > div:hover {
  background-color: #fcfcfc;
}
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";
import virtualList from "vue-virtual-scroll-list";

export default {
  name: "additionallogs",
  components: {
    "virtual-list": virtualList,
    Item: () => import("./LogItem.vue")
  },
  computed: {
    ...mapState("imports", ["showAdditional", "details"]),
    scrollistConfig() {
      const smallLayout = {
        size: 20,
        remain: 10,
        bench: 12
      };
      const largeLayout = {
        size: 22,
        remain: 12,
        bench: 14
      };
      if (this.showAdditional) return smallLayout;
      return largeLayout;
    }
  }
};
</script>