<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import {data as historyData} from '../helpers/historyData'
import Tabulator from "@molecules/VTabulator/VTabulator.vue"
import tableConfig from '../helpers/tableConfig'

export default {
  name: 'TaskHistory',
  components: {
    ButtonModal,
    Tabulator
  },
  props: {
    taskId: {
      default: "",
      type: String
    },
    isOpen: {
      default: false,
      type: Boolean
    },
    name: {
      default: "",
      type: String
    },
    description: {
      default: "",
      type: String
    },
    period: {
      default: "",
      type: String
    },
  },
  data() {
    return {
      task: "",
      task_description: "",
      task_name: "",
      dataSource: [],
      config: tableConfig,
      pageState: "await", // await | loading | isLoaded | error
    }
  },
  computed: {
  },
  watch: {
    isOpen: {
      handler (isOpen) {
        if (isOpen) {
          this.pageState = "loading"
          this.task = this.taskId
        } else {
          this.pageState = "await"
        }
      }
    },
    dataSource: {
      handler (data) {
        if (data.length > 0) {
          this.pageState = "isLoaded"
        }
      }
    }
  },
  mounted () {
    this.dataSource = historyData.data
  },
  methods: {
    onToggle: ({isOpen}) => {
      console.log(isOpen)
    }
  }
}

</script>

<template>
  <ButtonModal
    forcedBtnClass="  "
    containerClass="pt-10 px-4 w-[80vw] 2xl:w-[70vw]"
    :onToggle="onToggle"
  >
    <template #button>
      <span>
        <slot name="button" />
      </span>
    </template>
    <div
      v-if="pageState === 'loading'"
      id="historyData"
      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="historyData"
      class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
    >
      <div class="w-full flex pt-2 pb-1">
        {{ console.log('period', period) }}
        <div class="flex flex-col items-start">
          <div class="ml-3">
            Название
          </div>
          <div class="w-full flex flex-row items-center">
            <div 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 ml-2 py-1 px-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">
              {{ name }} 
            </div>
            <div class="w-full ml-2">
              {{ period }}
            </div>
          </div>
        </div>
      </div>

      <Tabulator 
        :dataSource="dataSource"
        :columns="config.columns"
        :height="config.height"
        layout="fitColumns"
      />
    </div>
  </ButtonModal>
</template>
