

<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import Button from "@atoms/VButton.vue"
import { EventStore } from "@store/hooks/EventStore"
import moment from 'moment'

export default {
  name: 'Machine',
  components: {
    Button,
  },
  props: {
    machine: {
      type: Object,
      default: () => ({})
    },
    openMap: {
      type: Function,
      default: () => {}
    },
    openData: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    
    
    return {
      initLocalStorage: null,
    }
  },
  computed: {
    ...mapGetters('machines', ['machinesData', 'historyData', 'historyMachines']),
  },
  mounted () {
    
  },
  methods: {
    ...mapMutations('machines', ['setInitHistory', 'setHistoryData', 'setHistoryMachines']),
    ...mapActions('machines', ['openMapModal', 'openDataModal']),
    buttonClass: function(value) {
      return `border border-slate-400 flex items-center justify-center cursor-pointer rounded transition-all text-xs text-center py-[5px] px-2 ${value}`
    },
    cardFunc: function(value) {
      this.initLocalStorage = new EventStore()
      if (this.machine.machine_id) {
        const valueStorage = {machine_id: this.machine.machine_id, machine_type: this.machine.machine_type, link: `/html/askr_devices/analyze_device/${this.machine.device_number}`, created_at: moment().format('HH:mm:ss DD-MM-YY')}
        return this.initLocalStorage.localStoreGetData({key: 'historyViews', newData: valueStorage}, this.updateLocalData)
      }
    },
    updateLocalData: function(value) {
      const historyData = value.data ? value.data : []
      const mergedHistory = value.newData !== 'mount' ? [value.newData, ...historyData] : historyData
      // const updatedHistory = mergedHistory.filter((el, idx, arr) => arr.findIndex((item) => item.machine_id === el.machine_id) === idx).slice(0, 50)  // uniq values
      const updatedHistory = mergedHistory.slice(0, 50)
      const initHistory = (Array.isArray(value.newData) && value.newData.length > 0 || value.newData === 'mount') ? true : false
      this.setInitHistory(initHistory)
      this.setHistoryData(updatedHistory)
      return this.initLocalStorage.localStoreSetData({key: 'historyViews', value: updatedHistory})
    },
    mapFunc: function(machine) {
      // console.log('machine', machine)
      this.openMapModal(machine)
      return this.openMap()
    },
    dataFunc: function(machine) {
      // console.log('machine', machine)
      this.openDataModal(machine)
      return this.openData()
    },
  }
}

</script>



<template>
  <div id="card" class="pt-3 border w-[23%] min-w-[310px] border-slate-300 rounded transition-all bg-slate-300}">
    <div class="h-full flex flex-col gap-5 relative text-left  justify-between">
      <div class="flex flex-col items-end absolute text-white top-[-0.75rem] right-0 h-full min-w-[173px] p-2" style="backdrop-filter: blur(10px);">
        <div class="mb-2 text-right drop-shadow" search-mode="machine_id">ID: {{ machine?.machine_id }}</div>
        <div class="flex flex-row">
          <span>{{ machine.railway_name }}</span><i class="ri-route-line ml-2"  title="Дорога:"/>
        </div>
        <div class="flex flex-row">
          <span>{{ machine.org_name }}</span><i class="ri-building-2-line ml-2" title="Компания:"/>
        </div>
        <div class="flex flex-row">
          <span>{{ machine.nomer_zn8 }}</span><i class="ri-number-8 ml-2"       title="8зн номер:"/>
        </div>
        <div class="flex flex-row" search-mode="device_number">
          <span>{{ machine.device_number }}</span><i class="ri-rss-line ml-2"   title="Устройство:"/>
        </div>
      </div>
      <div class="flex flex-col w-full mt-4 mb-2 pl-4 mt-1 z-[1]">
        <div class="text-slate-800 font-bold m-0" search-mode="machine_type">{{ machine.machine_type }}</div>
        <div :machine_id="machine.machine_id" history_click="/html/askr_devices/analyze_comm/#{@machine?.imei}" class="text-slate-500 text-xs underline-offset-4" search-mode="imei">{{ machine.imei }}</div>
      </div>
      <div class="flex lg:flex-row flex-col gap-1 my-2 px-2 z-[1]">
        <div class="flex">
          <a :href="`/html/askr_devices/analyze_device/${machine.device_number}`" id="to_card_machine" no-init="false" @click="cardFunc(machine)" target="_blank" :class="buttonClass('bg-primary text-white')">Карточка</a>
        </div>
        <div class="flex gap-1">
          <div @click="mapFunc(machine)"  :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')"><i class="ri-map-pin-line"/></div>
          <div @click="dataFunc(machine)" :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')">30</div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
#card {
  background: linear-gradient(96.95deg,rgba(236,236,243,.95) 1.45%,hsla(0,0%,100%,.703) 20.43%,hsla(0,0%,100%,0) 98.58%),linear-gradient(277.71deg,rgba(0,8,38,.3),rgba(0,5,20,.076) 45.46%,hsla(0,0%,100%,0) 97.87%),linear-gradient(0deg,rgba(123,134,152,.7),rgba(123,134,152,.7));
}
</style>
