<script>
import {mapGetters, mapMutations, useStore} from "vuex"
import Tabulator from "@molecules/VTabulator/VTabulator.vue"
import { EventStore } from "@store/hooks/EventStore"

export default {
  name: 'HistoryViews',
  components: {Tabulator},
  setup () {
    const initLocalStorage = new EventStore()
    const historyData = initLocalStorage.localStoreGetData({key: 'historyViews', onlyGet: true})
    const isHistoryData = historyData && historyData.length > 0
    // const updatedData = historyData.filter((el, idx, arr) => arr.findIndex((item) => item.machine_id === el.machine_id) === idx).slice(0, 50) // uniq values
    const updatedData = isHistoryData ? historyData.slice(0, 50) : []
    const store = useStore()
    store.commit('layout_machines/setHistoryData', updatedData)
  },
  computed: {
    ...mapGetters('layout_machines', ['historyData']),
    tabulatorOtps() {
      return {
        dataSource: this.historyData,
        columns: [
          {
            title: "ID машины",
            field: "machine_id",
            width: 150
          },
          {
            title: "Тип машины",
            field: "machine_type",
            width: 150
          },
          {
            title: "Карточка машины",
            field: "link",
            log: true,
            width: 180,
            render: `<div class="flex items-center gap-2">
                      <a target="_blank" class="underline decoration-dashed" href="{{ link }}">Открыть карточку машины</i></a>
                    </div>`
          },
          {
            title: "Время просмотра",
            field: "created_at",
            width: 150
          }
        ],
        height: "550px"
      }
    }
  },
  methods: {
    ...mapMutations('layout_machines', ['setHistoryData']),
  }
}

</script>

<template>
  <Tabulator v-bind="tabulatorOtps" />
</template>