<script>
import Task from './Task/Task.vue'
import TaskModal from './Task/TaskModal.vue'
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import PacksContainer from '@frames/PacksContainer/PacksContainer.vue'
import PacksContainerBody from '@frames/PacksContainer/PacksContainerBody.vue'
import tableConfig from './helpers/tableConfig'
import {tasks} from './helpers/historyData'
// import {mapGetters} from 'vuex'
// import Input from '@atoms/VInput.vue'
import Button from '@atoms/VButton.vue'

export default {
  name: "CronTasks",
  components: {
    Task,
    TaskModal,
    Spinner,
    PacksContainer,
    PacksContainerBody,
    Button
  },
  props: {
    serviceOfCron: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    const paramsFields = {
    }
    return {
      config: tableConfig,
      paramsFields,
      pageState: "isLoaded", // await | loading | isLoaded | error
      errorImei: null,
    }
  },
  computed: {
    // ...mapGetters('tasks', ['tasks']),
    tasks () {
      return tasks
    }
  },
  watch: {
    tasks: {
      handler (tasks) {
        if (tasks) {
          this.pageState = "isLoaded"
        }
      }
    }
  },
  methods: {
    addTask (e) {
      console.log('e', e)
    },
    editFields (params) {
      const result = this.serviceOfPacks.setPackFields(this.paramsFields, params)
      this.paramsFields = result.paramsFields
      this[result.errorKey] = result.errorValue
    },
    async getTasks () {
      this.pageState = "loading"
      await this.serviceOfPacks.getLastPacks({
        imei: this.paramsFields.imei, 
        dtStart: this.paramsFields.dtStart, 
        dtFinish: this.paramsFields.dtFinish, 
        format: this.paramsFields.dateFormat
      })
    }
  }
}

</script>


<template>
  <PacksContainer>
    <PacksContainerBody
      bodyClass="lg:col-span-12 xl:col-span-12 2xl:col-span-12 col-span-12 bg-light shadow"
    >
      <div class="w-fit px-4 ml-2 mt-2 mb-5">
        <TaskModal
          taskId="new"
          isOpen=""
        >
          <template #button>
            <Button
              type="button"
              class="!w-[200px] col-span-4 cursor-pointer bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 text-white font-semibold py-1 text-ssm border border-primary  rounded-lg text-center transition_up"
              title="Добавить задачу"
              @click="addTask"
            />
          </template>
        </TaskModal>
      </div>
      <div
        v-if="pageState === 'loading'"
        id="tasks"
        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="tasks"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md p-2"
      >
        {{ console.log('tasks', tasks) }}
        <Task
          v-for="(task, idx) in tasks"
          :key="`${idx}_key`"
          :serviceOfCron="serviceOfCron"
          :index="idx"
          :name="task.name"
          :description="task.description"
          :period="task.period"
          :body="task.body"
        />
      </div>
    </PacksContainerBody>
  </PacksContainer>
</template>: any: any
