<script>
import {mapGetters, mapActions} from "vuex"
import PackViewButton from './Button.vue'
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import Tabulator from "@molecules/VTabulator/VTabulator.vue"
import { isEmpty } from "ramda";

export default {
  name: 'PackView',
  components: {
    PackViewButton,
    Spinner,
    Tabulator
  },
  props: {
    isLoader: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
  },
  setup (props, {slots}) {
    const hasDescription = slots.description != undefined
    const hasError = slots.error != undefined
    console.log('slots', slots)
    return {
      hasDescription,
      hasError
    }
  },
  data () {
    return {
      hasData: false
    }
  },
  computed: {
    ...mapGetters('machines', ['packData', 'selectPackStructs', 'selectedPackStruct']),
    buttonsData: () => 
      ([
        {mode: 'askr_logs', isActive: true, name: 'switch_askr_logs', inner: 'обработанные', labelClass: 'rounded-l-lg border'},
        {mode: 'raw', isActive: false, name: 'switch_raw', inner: 'сырые', labelClass: 'border-y'},
        {mode: 'unrecognized', isActive: false, name: 'switch_unrecognized', inner: 'нераспознанные', labelClass: 'rounded-r-lg border'},
      ])
  },
  updated () {
    this.$nextTick(function () {
      if (!isEmpty(this.packData)) {
        this.hasData = true
      }
    })
  },
  methods: {
    ...mapActions('machines', ['updateSelectStruct']),
    updateSelectedValue: function (e) {
      console.log('e', e.target.value)
      this.updateSelectStruct(Number(e.target.value))
    },
  }
}

</script>


<template>
  <div class="w-full relative">
    {{
      console.log('packData', packData)
    }}
    <div
      v-if="!hasData"
      :id="`${id}_loader`"
      class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
    >
      <Spinner />
    </div>
    <div
      v-if="hasData"
      :id="id"
      class="w-full rounded-md bg-light border-rounded p-4"
    >
      <div class="grid grid-cols-12 mb-6">
        <div class="flex flex-col gap-1 col-span-12 sm:col-span-4 md:col-span-5 lg:col-span-5 2xl:col-span-7 sm:mb-0">
          <h2
            :id="`${id}_pack_name`"
            class=" text-lg"
          >
            Пакет: <span v-if="selectPackStructs">{{ selectPackStructs[0]?.packNumber }}</span>
          </h2>
          <div
            v-if="hasDescription"
            class="text-xs text-slate-500"
          >
            <slot name="description" /> 
          </div>
        </div>
        <!-- <form phx-change="c_packs_mode:on_click" :id="`${id}_table_active`" class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center hidden"> -->
        <div class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center">
          <PackViewButton
            v-for="(button, idx) in buttonsData"
            :key="idx" 
            :idx="idx" 
            :mode="button.mode"
            :name="button.name" 
            :active="button.isActive" 
            :inner="button.inner" 
            :labelClass="button.labelClass" 
          />
        </div>
        <!-- </form> -->
      </div>
      <div
        :id="id"
        class="relative"
      >
        <div
          id="selectStructContainer"
          class="flex gap-2 items-center mb-2"
        >
          <span>Выберите структуру:</span>
          <select
            v-if="selectPackStructs"
            id="selectStruct"
            name="struct"
            :value="selectedPackStruct.id"
            class=" w-fit bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            style="--tw-ring-color:focus: none"
            @change="updateSelectedValue"
          >
            <option
              v-for="(el, idx) in selectPackStructs"
              :key="{idx}"
              :value="el.id"
            >
              {{ el.name }}
            </option>
          </select>
        </div>
        <div
          :id="`${id}_report`"
          class="tab-pane active bg-light relative shadow  text-center min-h-[300px] relative rounded-md w-full relative"
        >
          <Tabulator v-bind="packData" />
          <div
            v-if="isLoader"
            :id="`${id}_loader`"
            class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
          >
            <Spinner />
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="hasError"
      :id="`${id}_error`"
      class="w-full rounded-md bg-light border-rounded p-4 flex flex-col gap-5 items-center justify-center hidden"
    >
      <slot name="error" /> 
    </div>
  </div>
</template>

<style scoped>
</style>
