import useGantt from './hooks/gantt'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  props: {
    scale: {
      type: String,
      default: 'day',
    },
  },
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const { renderMainTask, changeTimeScales } = useGantt({ route, router })

    onMounted(() => {
      nextTick(() => {
        renderMainTask(document.querySelector('#tableContainer'))
      })
    })
    watch(
      () => props.scale,
      val => {
        changeTimeScales(val)
      }
    )
    return () => <div id="tableContainer" class="bg-[#1c202c] w-h-full"></div>
  },
})
