<template>
  <div ref="ganttContainer"></div>
</template>

<script setup lang="ts">
  import { gantt } from 'dhtmlx-gantt';
  import { onMounted, ref } from 'vue';
  const ganttContainer = ref();
  const props = defineProps({
    tasks: {
      type: Object,
      required: true,
    },
  });
  onMounted(() => {
    gantt.config.date_format = '%Y-%m-%d';
    gantt.init(ganttContainer.value);
    gantt.config.columns = [
      { name: 'text', label: 'Task name', tree: true, width: '*' },
      { name: 'start_date', label: 'Start time', align: 'center' },
      { name: 'end_date', label: 'End time', align: 'center' },
      { name: 'duration', label: 'Duration', align: 'center' },
      { name: 'add', label: '' },
    ];
    gantt.parse(props.tasks);
    // gantt.parse(this.$props.tasks);
  });
  defineOptions({
    name: 'HuaxinGantt',
  });
</script>

<style lang="less" scoped></style>
