import { NImage } from 'naive-ui'
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, currentImage } = useGantt({
      route,
      router,
    })

    onMounted(() => {
      nextTick(() => {
        renderMainTask(document.querySelector('#tableContainer'))
      })
    })
    watch(
      () => props.scale,
      val => {
        changeTimeScales(val)
      }
    )

    const imgRef = ref(null)
    watch(currentImage, imgUrl => {
      nextTick(() => {
        if (imgUrl) {
          imgRef.value.click()
        }
      })
    })
    return () => (
      <>
        <div id="tableContainer" class="bg-[#1c202c] w-h-full"></div>
        <NImage
          class="absolute h-0"
          ref={imgRef}
          src={currentImage.value?.[0]}
        ></NImage>
      </>
    )
  },
})