<template>
  <div class="grid grid-cols-12 gap-6 col-span-12 h-full">
    <form
      phx-submit="fetch_pack"
      class="rounded-md bg-light px-4 pt-4 pb-6 gap-2 shadow lg:col-span-4 xl:col-span-3 2xl:col-span-2 col-span-12"
      autocomplete="off"
    >
      <h1 class="font-medium leading-tight text-xl mb-4 text-slate-600">
        Последние пакеты
      </h1>
      <div class="grid gap-3 mb-3 ">
        <div class="relative ">
          <label
            for="imei"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
          >
            imei
          </label>
          <input
            id="selected_imei"
            required=""
            class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full 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 "
            placeholder="imei"
            name="imei"
            type="text"
            autocomplete="off"
            :value="imei"
            @input="(e) => setImei(e.target.value)"
          >
        </div>
      </div>
      <div class="mb-3">
        <label
          for="dt_start"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
        >Дата начала</label>
        <Datepicker
          :defaultDate="dtStart"
          :enableTime="true"
          :onchange="setDtStart"
        />
      </div>
      <div class="mb-3">
        <label
          for="dt_finish"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
        >Дата окончания</label>
        <Datepicker
          :defaultDate="dtFinish"
          :enableTime="true"
          :onchange="setDtFinish"
        />
      </div>
      <div class="grid gap-3 grid-cols-4">
        <button
          type="button"
          class="col-span-4 lg:col-span-4 cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto px-5 py-1 text-center  dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
          @click="uploadData"
        >
          Выгрузить
        </button>
        <MachinesModal />
        <ButtonModal btnClass="cursor-pointer col-span-4 bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up">
          <template #button>
            <div id="question">
              <i class="ri-question-mark" />
            </div>
          </template>
          <div class="overflow-auto min-w-[70vw] h-[70vh] p-4">
            <div style="display: flex; flex-direction: column; gap: 1rem;">
              <span style="font-size: 1.1em; font-weight: bold;">Страница предназначена для получения сведений о последних полученных пакетах от машин<br></span><span style="border-left: 5px solid rgba(0, 0, 0, 0.45); padding: 10px 5px;"><span style="font-weight: bold;">Работа со страницей</span><br><span>Поля выбора находятся на странице. Чтобы загразить данные необходимо -<ol style="font-size: 0.9em; margin-bottom: 0px;"><li>1. ввести пакеты через запятую</li><li>2. ввести imei или выбрать машину/устройство</li><li>3. нажать на кнопку 'загрузить' и дождаться загрузки</li><li style="font-size: 0.9em; color: gray;">(опционально) изменить даты</li></ol></span></span>
            </div>
          </div>
        </ButtonModal>
      </div>
    </form>
    <div class="lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow">
      <div
        v-if="pageState == 'await'"
        id="report_packs"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
      >
        <span> Выберите машину и нажмите выгрузить</span>
      </div>
      <div
        v-if="pageState == 'loading'"
        id="report_packs"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md  w-full h-full flex items-center justify-center"
      >
        <Spinner />
      </div>
      <div
        v-if="pageState == 'isLoaded'"
        id="report_packs"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
      >
        <Tabulator v-bind="tabulatorOtps" />
      </div>
    </div>
  </div>
</template>

<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Datepicker from "@molecules/VDatepicker/VDatepicker.vue"
import {mapGetters, mapMutations, mapActions} from 'vuex'
import Tabulator from "@molecules/VTabulator/VTabulator.vue"
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import MachinesModal from "@molecules/MachinesModal/MachinesModal.vue"

export default {
  name: 'LastPacks',
  components: {
    Datepicker,
    ButtonModal,
    Tabulator,
    Spinner,
    MachinesModal
  },
  data() {
    return {
      packNum: null,
    }
  },
  computed: {
    ...mapGetters('last_packs', ['dtStart', 'dtFinish', 'imei', 'pageState', 'packsData']),
    tabulatorOtps() {
      return {
        dataSource: this.packsData,
        columns:     [
          {
            title: "Нормер пакета",
            field: "pack_number",
            width: 150
          },
          {
            title: "Количество записей",
            field: "count",
            width: 150
          },
          {
            title: "Последняя дата пакета",
            field: "pack_dt",
            width: 150,
            render: "{{ dt_format (dt_shift pack_dt 3 'hour') }}"
          }
        ],
        height: "550px"
      }
    }
  },
  methods: {
    ...mapMutations('last_packs', [
      "setDtStart",
      "setDtFinish",
      "setImei"
    ]),
    ...mapActions('last_packs', ['uploadData'])
  }
}

</script>
