import { defineComponent, ref, computed, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode } from 'vue';
import '../../../utils/index.mjs';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { debounce } from 'lodash-es';
import { defaultColumns, ganttProps } from './gantt.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "LlGantt"
  },
  __name: "gantt",
  props: ganttProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace("gantt");
    const ganttContainer = ref();
    const ganttInstance = ref();
    const events = ref([]);
    const styleConfig = computed(() => ({
      // 任务条背景颜色
      "--gantt-task-line-bg": props.taskLineBg || "var(--dhx-gantt-task-background)",
      // 悬浮行背景颜色
      "--gantt-hover-row-bg": props.hoverRowBg || "var(--dhx-gantt-base-colors-hover-color)",
      // 选中行背景颜色
      "--gantt-selected-bg": props.selectedRowBg || "var(--dhx-gantt-base-colors-select)",
      // 表头背景颜色
      "--gantt-grid-scale-bg": props.gridScaleBg || "var(--dhx-gantt-timeline-scale-background)"
    }));
    const ganttConfig = computed(() => ({
      scroll_size: props.scrollSize,
      // 滚动条大小
      date_format: props.dateFormat,
      // 日期格式
      show_grid: props.showGrid,
      // 是否显示网格
      readonly: props.readonly,
      // 只读
      select_task: props.selectTask,
      // 选择任务
      show_task_cells: props.showTaskCells,
      // 是否显示任务单元格
      grid_width: props.gridWidth,
      // 网格宽度
      work_time: props.workTime,
      // 是否显示工作时间
      correct_work_time: props.correctWorkTime,
      // 是否修正工作时间
      duration_unit: props.durationUnit,
      // 工期单位
      duration_step: props.durationStep,
      // 工期单位步长
      show_progress: props.showProgress,
      // 显示进度
      drag_progress: props.dragProgress,
      // 允许任务拖动进度
      order_branch: props.orderBranch,
      // 允许行拖拽排布任务
      order_branch_free: props.orderBranchFree,
      // 允许行拖拽任意位置排布任
      scale_height: props.scaleHeight,
      // 表头高度
      row_height: props.rowHeight,
      // 表格行高度
      resize_rows: props.resizeRows,
      // 允许拖拽调整行高
      bar_height: props.barHeight,
      // 任务条高度
      drag_resize: props.dragResize,
      // 允许拖拽调整任务时间
      reorder_grid_columns: props.reorderGridColumns,
      // 允许拖拽表格列
      round_dnd_dates: props.roundDndDates,
      // 拖拽任务时自动对齐单元格
      time_step: props.timeStep,
      // 拖拽任务时间步长
      link_radius: props.linkRadius,
      // 连接线半径
      link_line_width: props.linkLineWidth,
      // 连接线宽度
      min_column_width: props.minColumnWidth,
      // 时间轴最小列宽
      open_tree_initially: props.openTreeInitially,
      // 展开所有任务
      drag_links: props.dragLinks,
      // 允许拖拽连接线
      drag_move: props.dragMove,
      // 允许拖拽移动任务
      // 列配置
      columns: props.columns?.length ? props.columns : defaultColumns,
      // 时间轴日期刻度
      scales: props.scales?.length ? props.scales : [{ unit: "day", step: 1, format: "%m\u6708%d" }],
      // 额外配置合并
      ...props.extraConfig || {}
    }));
    const ganttTemplates = computed(() => props.extraTemplates || {});
    const initGantt = () => {
      if (!ganttContainer.value) return;
      gantt.i18n.setLocale("cn");
      gantt.plugins({
        multiselect: true
      });
      Object.assign(gantt.config, ganttConfig.value);
      Object.assign(gantt.templates, ganttTemplates.value);
      gantt.init(ganttContainer.value);
      Object.keys(props.eventMap).forEach((eventName) => {
        const config = props.eventMap[eventName];
        events.value.push(gantt.attachEvent(eventName, config.handle));
      });
      if (!Object.keys(props.eventMap).includes("onEmptyClick")) {
        events.value.push(
          gantt.attachEvent("onEmptyClick", (e) => {
            if (gantt.utils.dom.closest(
              e.target,
              "[" + gantt.config.link_attribute + "]"
            )) {
              return;
            }
            if (props.multiselect) {
              const selectedTaskIds = gantt.getSelectedTasks();
              selectedTaskIds.forEach((id) => {
                gantt.unselectTask(id);
              });
            } else {
              const selectedTaskId = gantt.getSelectedId();
              if (selectedTaskId) {
                gantt.unselectTask(selectedTaskId);
              }
            }
            return true;
          })
        );
      }
      gantt.parse(props.data);
      ganttInstance.value = gantt;
    };
    const resetGantt = () => {
      if (!ganttInstance.value) return;
      ganttInstance.value.clearAll();
      while (events.value.length) gantt.detachEvent(events.value.pop());
      ganttInstance.value.scrollTo(0, 0);
      ganttInstance.value.unselectAll?.();
      ganttInstance.value.render();
    };
    const render = debounce(() => {
      ganttInstance.value?.render();
    }, 100);
    watch(
      ganttConfig,
      (config) => {
        if (!ganttInstance.value) return;
        Object.assign(ganttInstance.value.config, config);
        render();
      },
      { deep: true }
    );
    watch(
      ganttTemplates,
      (newTemplates) => {
        if (ganttInstance.value) {
          Object.assign(ganttInstance.value.templates, newTemplates);
          render();
        }
      },
      { deep: true }
    );
    onMounted(() => {
      initGantt();
    });
    onUnmounted(() => {
      resetGantt();
    });
    __expose({
      getInstance: () => ganttInstance.value,
      // 甘特图实例
      resetGantt
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(unref(bem).b()),
          style: normalizeStyle(styleConfig.value)
        },
        [
          createElementVNode(
            "div",
            {
              ref_key: "ganttContainer",
              ref: ganttContainer,
              class: normalizeClass(unref(bem).e("container"))
            },
            null,
            2
            /* CLASS */
          )
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=gantt.vue2.mjs.map
