<template>
  <div>
    <div ref="gantt" :style="'height:' + tabheight + 'px'" />
  </div>
</template>

<script>
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { extendDeeply } from "@base/utils/index.js";
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import { getAction, putAction } from '@/api/manage'
export default {
  name: "ganttPerson",
  props: ["ganttData", "dateType", "option"],
  watch: {
    ganttData: {
      handler(val) {
        /* this.tasks = {
          data: val,
        };
        this.init(); */
        this.loadData(val);
      },
      deep: true,
    },
  },
  mounted() {
    let h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.tabheight = h - 60;
    if (this.height) {
      this.tabheight = this.height;
    }
    this.tasks = {
      data: this.$baseLodash.cloneDeep(this.ganttData),
    };
    this.init();
  },
  beforeDestroy() {
    this.destroyGantt();
  },
  // mixins: [JeecgListMixin],
  data() {
    return {
      ganttInstance: null,
      // 注册事件拦截
      onTaskDblClick: null,
      // 甘特图配置
      tasks: {
        data: [
          //  把父节点的开始结束设置为同一天，就可以实现隐藏父节点的bar
          // # 字段解释
          //  id:   数据id  必须是唯一值，父子也不能重复
          //  text: 会显示在bar上的字段，如不显示就设为 ''
          //  progress: 完成度， 0 - 1
          //  start_date: 开始的日期，格式在js里设置，
          //  end_date: 结束的日期  要时分秒！ 只给日期会视为日期的 00:00:00  要特殊处理一下!!
          //  open: 如果是父节点，是否默认展开
          //  parent:  子节点必须有，设置为父节点的id，会自动处理，数据顺序无所谓
          // #=================================================================
        ],
        // #字段解释
        // 格式 id:数据id
        //     source:开始链接的项目id  ----为tasks.data中数据的id
        //     target:要链接项目的id  ----为tasks.data中数据的id
        //     type: 0--进行-开始  `尾部链接头部`
        //           1--开始-开始  `头部链接头部`
        //           2--进行-进行  `尾部链接尾部`
        //           3--开始-进行  `头部链接尾部`
        // 任务之间连接线，目前注释掉了，需要的话打开
        // links: [
        // 	{ id: '10', source: '11', target: '12', type: '1' },
        // 	{ id: '11', source: '11', target: '13', type: '1' },
        // 	{ id: '12', source: '11', target: '14', type: '1' },
        // 	{ id: '13', source: '11', target: '15', type: '1' },
        // 	{ id: '14', source: '23', target: '16', type: '0' },
        // 	{ id: '15', source: '13', target: '17', type: '1' },
        // 	{ id: '16', source: '17', target: '18', type: '0' },
        // 	{ id: '17', source: '18', target: '19', type: '0' },
        // 	{ id: '18', source: '19', target: '20', type: '0' },
        // 	{ id: '19', source: '15', target: '21', type: '2' },
        // 	{ id: '20', source: '15', target: '22', type: '2' },
        // 	{ id: '21', source: '15', target: '23', type: '0' }
        // ]
      },

      url: {
        // list: "/projectManage/projectPlan/queryProjectPlanGTT",
        // delete: "/projectManage/projectModule/delete",
        // deleteBatch: "/projectManage/projectModule/deleteBatch",
        // exportXlsUrl: "/projectManage/projectModule/exportXls",
        // importExcelUrl: "/projectManage/projectModule/importExcel",
        // budgetExportXlsUrl: "/projectManage/projectModule/budgetExportXls",
        // budgetImportUrl: "/projectManage/projectModule/budgetImportExcel",
      },
      tabheight: 0,
    };
  },
  methods: {
    loadData(rows) {
      gantt.clearAll();
      this.tasks = {
        data: rows || [],
      };
      gantt.parse(this.tasks);
    },
    destroyGantt() {
      // gantt.destroy();
      // gantt.destructor();
    },
    // 初始化
    init() {
      gantt.i18n.setLocale("cn"); // 汉化 - 默认是英文
      // 格式化日期
      gantt.locale.date = {
        month_full: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        month_short: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      };

      gantt.locale.labels = {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除计划?",
        section_description: "描述:",
        section_time: "时间范围:",
        section_type: "类型:",
        section_text: "计划名称:",
        section_test: "测试:",
        section_projectClass: "项目类型:",
        taskProjectType_0: "项目任务",
        taskProjectType_1: "普通任务",
        section_head: "负责人:",
        section_priority: "优先级:",
        taskProgress: "任务状态",
        taskProgress_0: "未开始",
        taskProgress_1: "进行中",
        taskProgress_2: "已完成",
        taskProgress_3: "已延期",
        taskProgress_4: "搁置中",
        section_template: "Details",
        /* grid columns */
        column_text: "计划名称",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_add: "",
        column_priority: "难度",
        /* link confirmation */
        link: "关联",
        confirm_link_deleting: "将被删除",
        message_ok: "确定",
        message_cancel: "取消",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",
        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年",
      };

      //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.autosize = false;
      //只读模式
      // gantt.config.readonly = true;
      gantt.config.readonly = false;
      //是否显示左侧树表格
      gantt.config.show_grid = true;
      // 设置表头高度
      gantt.config.scale_height = 50;
      // 设置bar的高度
      gantt.config.bar_height = 26;
      // 设置行的高度
      gantt.config.row_height = 32;
      // 设置时间识别格式
      gantt.config.xml_date = "%Y-%m-%d %H:%i";
      // //表格列设置
      /* gantt.config.columns = [
        {
          name: "text",
          label: "项目名称",
          tree: true,
          width: "200",
          align: "left",
          template: (task) => {
            if (task.parent) {
              return task.text;
            } else {
              return `<div style="font-weight: 700">${task.text}</div>`;
            }
          },
        },
        { name: "person", label: "项目成员", width: "100", align: "center" },
        // { name: 'post', label: '岗位名称', width: '100', align: 'center' },
        // { name: 'department', label: '部门名称', width: '100', align: 'center' },
        { name: "task", label: "项目任务", width: "100", align: "center" },
        // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
        // {
        // 	name: 'duration',
        // 	label: '工期',
        // 	align: 'center',
        // 	template: function(obj) {
        // 		return obj.duration + '天';
        // 	}
        // }
        // {name:"start_date", label:"开始时间", align: "center" },
        // {name:"end_date",   label:"结束时间",   align: "center" },
      ];*/
      // 为每个bar增加class
      /* gantt.templates.task_class = function (start, end, item) {
        switch (item.status) {
          case "400": // 已完成
            return "gantt_success";
          case "100": // 未开始
            return "gantt_begined";
          case "200": // 进行中
            return "gantt_primary";
          case "300": // 暂停
            return "gantt_warning";
          default:
            // 已终止 500
            return "gantt_info";
        }
      }; */
      // 自动延长时间刻度
      gantt.config.fit_tasks = true;
      // 允许拖放
      gantt.config.drag_project = true;
      // 定义时间格式
      if (this.dateType === "year") {
        // 年 格式
        gantt.config.scales = [{ unit: "year", step: 1, date: " %Y 年" }];
      } else if (this.dateType === "month") {
        // 月 格式
        gantt.config.scales = [
          { unit: "year", step: 1, date: " %Y 年" },
          { unit: "month", step: 1, date: "%F" },
        ];
      } else {
        // 日 格式
        gantt.config.scales = [
          { unit: "month", step: 1, date: " %Y 年  %F" },
          { unit: "day", step: 1, date: "%d" },
        ];
      }
      // //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true;
      /*
      // 添加弹窗属性
      gantt.config.lightbox.sections = [
        {
          name: "description",
          height: 70,
          map_to: "text",
          type: "textarea",
          focus: true,
        },
        { name: "type", type: "typeselect", map_to: "type" },
        { name: "time", type: "duration", map_to: "auto" },
      ];

      // 给每行增加双击事件 ，亲测事件会重复注册，用这个方法拦截一下
      if (this.onTaskDblClick) gantt.detachEvent(this.onTaskDblClick);
      // 双击bar任务事件（单击会有问题，点击展开时也会触发）
      this.onTaskDblClick = gantt.attachEvent(
        "onTaskDblClick",
        (id, e) => {
          this.$emit("rowDbClick", id);
          return true;
        },
        { id: "onTaskDblClick" }
      );*/

      this.initConfig();
      // 清空旧数据
      gantt.clearAll();
      // 销毁gantt实例   按需开启
      // gantt.destructor()
      // 初始化

      // 启用插件
      gantt.plugins({
        tooltip: true,
        marker: true,
      });

      // 配置工具提示模板
      gantt.templates.tooltip_text = function (start, end, task) {
        return `<b>任务名称:</b> ${task.text}<br/>
            <b>开始时间:</b> ${gantt.templates.tooltip_date_format(start)}<br/>
            <b>结束时间:</b> ${gantt.templates.tooltip_date_format(end)}`;
      };

      this.ganttInstance = gantt.init(this.$refs.gantt);
      // 数据解析
      gantt.parse(this.tasks);
    },
    extendDeeply(result, child) {
      for (var prop in child) {
        // 如果属性本身,就是一个数组或者Json对象,进行深拷贝
        if (child[prop]?.constructor === Object) {
          if (!result[prop]) result[prop] = {};
          // 实现深拷贝
          this.extendDeeply(result[prop], child[prop]);
        } else {
          result[prop] = child[prop];
        }
      }
      return result;
    },
    initConfig() {
      if (this.option) {
        this.extendDeeply(gantt, this.option);
      }
    },
    getGanttTarget() {
      return gantt;
    },
    getGanttInstance() {
      return this.ganttInstance;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .gantt_row.gantt_row_project:hover {
  background: #e4e4e4 !important;
}

::v-deep .gantt_row.gantt_row_task:hover {
  background: #e4e4e4 !important;
}
::v-deep .gantt_selected {
  background: #ececec !important;
}
::v-deep .gantt_task_row.gantt_selected .gantt_task_cell {
  background: #ececec !important;
  border-right-color: #ebebeb !important;
}

::v-deep .gantt_grid_head_cell {
  background-color: #f7f7f7;
  font-weight: 700;
  font-size: 13px;
  color: #000000;
}
::v-deep .gantt_scale_cell {
  background-color: #f7f7f7;
  font-weight: 700;
  color: #000000 !important;
  border-bottom: 1px solid #ebebeb;
}
::v-deep .gantt_task_line {
  border: none !important;
  box-shadow: none !important;
}
::v-deep .gantt_task_progress_wrapper {
  border: none !important;
  background-color: #e1e1e1;
  border-radius: 8px;
}
::v-deep .gantt_task_content {
}
::v-deep .gantt_task_line {
  border: none;
  border-radius: 8px;
  background-color: transparent;
}
::v-deep .gantt_success .gantt_task_progress {
  background: #13c400 !important;
  border: none !important;
}
::v-deep .gantt_primary .gantt_task_progress {
  background: #3a84ff !important;
  border: none !important;
}
::v-deep .gantt_begined .gantt_task_progress {
  background: #9a9a9a !important;
  border: none !important;
}
::v-deep .gantt_info .gantt_task_progress {
  background: #fe0000 !important;
  border: none !important;
}
::v-deep .gantt_warning .gantt_task_progress {
  background: #ff7700 !important;
  border: none !important;
}
</style>
