<script>
import {mapGetters, mapActions} from "vuex"
import Modal from '@molecules/VModal/VModal.vue'
import Accordion from '@atoms/VAccordion.vue'
import PackView from '@organisms/PackView/index.vue'
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import {getMachineInfo} from './helpers'

export default {
  name: 'DataModal',
  components: {
    Modal,
    Accordion,
    PackView,
    Spinner
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    },
    id: {
      type: String,
      default: ""
    },
    text: {
      type: String,
      default: ""
    },
    headerClass: {
      type: String,
      default: ""
    },
    containerClass: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      machineMainInfo: null,
      machineOverInfo: null
    }
  },
  computed: {
    ...mapGetters('machines', ['machineInfo', 'reportPacks']),
  },
  updated () {
    this.$nextTick(function () {
      if (this.data && this.id && this.open) {
        // const newMap = new CoordsMap(this.id)
        // newMap.loadMap(this.data.coords, this.data.machine)
        console.log('this.data', this.data)
        this.machineMainInfo = getMachineInfo(this.machineInfo.machine_info, true)
        this.machineOverInfo = getMachineInfo(this.machineInfo.machine_info, false)
      }
    })
  },
  methods: {
    ...mapActions('machines', ['loadPack']),
  }
}

</script>


<template>
  <Modal
    v-if="open"
    :close="close"
    :isOpen="true"
  >
    <div class="border-b p-4 font-bold">
      Последние данные
    </div>
    {{ console.log('reportPacks', reportPacks)
    }}
    <div
      :id="id"
      class="w-[95vw] h-[85vh] m-auto p-5"
    >
      <div
        v-if="!machineInfo"
        id="dataLoader"
        class=" h-full flex justify-center items-center"
      >
        <Spinner style="padding: 0" />
      </div>
      <div
        v-if="machineInfo"
        class="w-full flex flex-col gap-5"
      >
        <div class="w-full">
          <Accordion id="machineInfo">
            <template #header>
              <div
                v-if="machineInfo?.machine_name"
                id="machineInfoTitle"
                class="font-bold text-xl"
              >
                {{ machineInfo.machine_name }}
              </div>
            </template>
            <template #body>
              <div
                v-if="machineInfo.machine_info?.length > 0"
                id="machineInfoBody"
                class="flex w-full justify-start 2xl:justify-between gap-3 flex-wrap"
              >
                <div class="flex p-4">
                  <div class="flex mr-8 flex-col bg-slate-200 p-3 rounded">
                    <h2 clas="font-bold flex items-center">
                      <i class="ri-flashlight-line mr-1" /> Основная информация
                    </h2>
                    <div class="mt-2 p-2 rounded-md flex flex-col bg-slate-300">
                      <div
                        v-if="machineMainInfo?.length > 0"
                        class="flex flex-col gap-2"
                      >
                        <div
                          v-for="(info, idx) in machineMainInfo"
                          :key="idx"
                          class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"
                        >
                          <div class="text-slate-700 font-bold mr-2">
                            {{ info.title }}
                          </div>
                          <div class="text-slate-500">
                            {{ info.val }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    style="min-width: 300px;"
                    class="flex flex-col bg-slate-200 p-3 rounded"
                  >
                    <h2 clas="font-bold flex items-center">
                      <i class="ri-git-pull-request-line mr-1" /> Дополнительно
                    </h2>
                    <div class="mt-2 p-2 rounded-md flex flex-col bg-slate-300">
                      <div
                        v-if="machineOverInfo?.length > 0"
                        class="flex flex-col gap-2"
                      >
                        <div
                          v-for="(info, idx) in machineOverInfo"
                          :key="idx"
                          class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"
                        >
                          <div class="text-slate-700 font-bold mr-2">
                            {{ info.title }}
                          </div>
                          <div class="text-slate-500">
                            {{ info.val }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </Accordion>
        </div>
        <Accordion
          id="machine_packs"
          :isOpen="true"
        >
          <template #header>
            <div class="font-bold text-xl">
              Пакеты
            </div>
          </template>
          <template #body>
            <div class="flex flex-col gap-4">
              <div id="packReportButtons">
                <div class="flex flex-col gap-5">
                  <div class="grid grid-cols-12 gap-3">
                    <div
                      v-if="reportPacks.length === 0"
                      class="flex items-center justify-center text-slate-700 text-2xl font-bold col-span-12"
                    >
                      <h2>Нет данных по машине</h2>
                    </div>
                    <div v-if="reportPacks.length > 0">
                      <div
                        v-for="(pack, idx) in reportPacks"
                        :key="idx"
                        class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 flex items-start flex gap-1 justify-center rounded-md bg-slate-300"
                      >
                        <div class="flex-col flex-grow flex py-1">
                          <div class="flex text-slate-700 font-medium px-3 text-slate-700">
                            <div class="mr-1">
                              Номер
                            </div>
                            <div>{{ pack.pack_number }}</div>
                          </div>
                          <div class="text-slate-600 flex px-3 text-slate-600">
                            <div class="mr-1">
                              Количество
                            </div>
                            <div>{{ pack.count }}</div>
                          </div>
                        </div>
                        <div
                          class="h-full flex items-center justify-center text-white rounded-md px-3 text-center cursor-pointer transitiona-all bg-slate-400 hover:bg-slate-600"
                          @click="loadPack(pack.pack_number)"
                        >
                          <i class="ri-eye-line" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full h-[1px] bg-slate-300" />
              <PackView
                id="machineReport"
                :isLoader="false"
              >
                <template #description>
                  <span class="text-slate-400 text-sm">последние 30</span>
                </template>
                <template #error>
                  Слишком много пакетов для запроса
                </template>
              </PackView>
            </div>
          </template>
        </Accordion>
      </div>
    </div>
  </Modal>
</template>