<template>
  <div class="container">
    <div ref="gantt" class="gantt-container"></div>
    <div class="search-wrap">
      <div class="select-process">
        <span>选择工序：</span>
        <el-select v-model="value" placeholder="请选择" @change="selectChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="search-item">
        <span>工作中心:</span>
        <el-select v-model="searchParams.workCenter" placeholder="请选择工作中心" @change="search">
          <el-option v-for="item in workCenterOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="title">在产主要项目进度分析</div>
    </div>
    <div ref="gantt" class="gantt-container"></div>
  </div>

</template>
<script>
import {gantt} from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import 'font-awesome/css/font-awesome.min.css';
import {listProcedure1, listProcedureGX} from "@/api/system/procedure";

export default {
  name: 'index1',
  data() {
    return {
      tasks: {
        data: []
      },
      options: [{
        value: '1',
        label: '下   料'
      }, {
        value: '2',
        label: '铆   焊'
      }, {
        value: '3',
        label: '热 处 理'
      }, {
        value: '4',
        label: '普车钻床'
      }, {
        value: '5',
        label: '走心 机'
      }, {
        value: '6',
        label: '龙门立加'
      }, {
        value: '7',
        label: '表面处理'
      }, {
        value: '8',
        label: '外购  件'
      }],
      value: '1',
      searchParams: {
        workCenter: ''
      },
      workCenterOptions: [
        {
          value: '车间1',
          label: '车间1'
        },
        {
          value: '车间2',
          label: '车间2'
        }
      ]
    }
  },
  created() {

  },
  methods: {

    //开始时间-结束时间参数
    DateDifference: function (strDateStart, strDateEnd) {
      var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
      var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
      var date3 = endtime_ms - begintime_ms //时间差的毫秒数
      var days = Math.floor(date3 / (24 * 3600 * 1000))
      return days
    },
    initData: function () {
      this.loading = true;
      listProcedure1().then(response => {
        if (response && Array.isArray(response)) {
          this.loading = false;
          response.forEach(item => {
            item.day = item.duration
            if (!item.hasOwnProperty('progess')) {
              item.progess = 0
            }
          });

          // 处理多级菜单数据
          // 当前结构：项目(父任务) -> 工序(子任务)
          // 建议结构：项目 -> 物料编码 -> 工序
          this.tasks.data = response.map(function (current, ind, arry) {
            var newObj = {}
            if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
              if (current.type === 1) { //冒烟
                newObj = Object.assign({}, current, {
                  'color': '#35a6e2'
                })
              } else if (current.type === 2) { //单元
                newObj = Object.assign({}, current, {
                  'color': '#e5a087'
                })
              } else if (current.type === 3) { //回归
                newObj = Object.assign({}, current, {
                  'color': '#62ddd4'
                })
              } else if (current.type === 4) {

                newObj = Object.assign({}, current, {
                  'color': '#d1a6ff'
                })
              } else if (current.type === 5) {

                newObj = Object.assign({}, current, {
                  'color': '#890864'
                })
              } else if (current.type === 6) {

                newObj = Object.assign({}, current, {
                  'color': '#b64e58'
                })
              } else if (current.type === 7) {

                newObj = Object.assign({}, current, {
                  'color': '#19842a'
                })
              } else if (current.type === 8) {

                newObj = Object.assign({}, current, {
                  'color': '#529578'
                })
              } else if (current.type === 9) {

                newObj = Object.assign({}, current, {
                  'color': '#e6a33d'
                })
              }
            } else { //一级菜单是蓝色的
              newObj = Object.assign({}, current, {
                'color': '#5692f0'
              })
            }
            return newObj
          })
          // this.initData(); // 调用初始化甘特图数据的方法
          // 数据解析
          gantt.parse(this.tasks)
          this.loading = false;
        } else {
          console.error('Invalid response data:', response);
        }
      }).catch(error => {
        console.error('Error fetching tasks:', error);
        this.loading = false;
      });
    },

    selectChange(val) {
      console.log(val)
      this.loading = true;
      //将options.值传给后端
      const selectedOption = this.options.find(option => option.value===val)
      const text = selectedOption ? selectedOption.label : '';
      listProcedureGX({text: text}).then(response => {
      // 在这里处理返回的响应数据
        if (response && Array.isArray(response)) {
          this.loading = false;
          response.forEach(item => {
            item.day = item.duration
            if (!item.hasOwnProperty('progess')) {
              item.progess = 0
            }
          });

          this.tasks.data = response.map(function (current, ind, arry) {
            var newObj = {}
            if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
              console.log(333333,current)
              if (current.type === 1) { //冒烟
                newObj = Object.assign({}, current, {
                  'color': '#35a6e2'
                })
              } else if (current.type === 2) { //单元
                newObj = Object.assign({}, current, {
                  'color': '#e5a087'
                })
              } else if (current.type === 3) { //回归
                newObj = Object.assign({}, current, {
                  'color': '#62ddd4'
                })
              } else if (current.type === 4) {

                newObj = Object.assign({}, current, {
                  'color': '#d1a6ff'
                })
              } else if (current.type === 5) {

                newObj = Object.assign({}, current, {
                  'color': '#890864'
                })
              } else if (current.type === 6) {

                newObj = Object.assign({}, current, {
                  'color': '#b64e58'
                })
              } else if (current.type === 7) {

                newObj = Object.assign({}, current, {
                  'color': '#19842a'
                })
              } else if (current.type === 8) {

                newObj = Object.assign({}, current, {
                  'color': '#529578'
                })
              } else if (current.type === 9) {

                newObj = Object.assign({}, current, {
                  'color': '#e6a33d'
                })
              }
            } else { //一级菜单是蓝色的
              newObj = Object.assign({}, current, {
                'color': '#5692f0'
              })
            }
            return newObj
          })


           //this.initData(); // 调用初始化甘特图数据的方法
          gantt.clearAll()
          // 数据解析
          gantt.parse(this.tasks)
          this.loading = false;
        } else {
          console.error('Invalid response data:', response);
        }
      }).catch(error => {
        console.error('Error fetching tasks:', error);
        this.loading = false;
      })
    },

    search() {
      // 构建查询参数
      const params = {
        ...this.searchParams,
        text: this.options.find(option => option.value === this.value).label
      };

      // 调用后端API进行查询
      listProcedureGX(params).then(response => {
        // 处理返回的数据
        if (response && Array.isArray(response)) {
          // ...
          // 这里的数据处理逻辑和selectChange方法中的类似
          // ...
          gantt.clearAll();
          gantt.parse(this.tasks);
        } else {
          console.error('Invalid response data:', response);
        }
      }).catch(error => {
        console.error('Error fetching tasks:', error);
      });
    }
  },


  mounted() {
    this.initData()

    gantt.config.autofit = true;
    gantt.config.autosize = true;
    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = true;
    //只读模式
    gantt.config.readonly = false;
    //是否显示左侧树表格
    gantt.config.show_grid = true;

      // 启用任务拖拽
      gantt.config.drag_move = true;
      gantt.config.drag_resize = true;

      // 自定义拖拽外观
      gantt.config.drag_lightbox = true;

      // 任务更新时触发事件
      gantt.attachEvent("onTaskChanged", (id, task) => {
        console.log("任务更新:", id, task);
      const index = this.ganttData.data.findIndex(item => item.id === id);
      if (index !== -1) {
        this.$set(this.ganttData.data, index, { ...this.ganttData.data[index], ...task });
      }
        return true;
      });

      // 任务拖拽结束时触发事件
      gantt.attachEvent("onAfterTaskDrag", (id, mode, e) => {
        console.log("任务拖拽完成:", id, mode, e);
        return true;
      });

    gantt.config.columns = [
  {
    name: 'text',
    label: '生产令号',
    tree: true,
    width: 300, // 增大宽度
    align: "left",
    editor: {type: 'text', map_to: 'text'},
    onrender: function (task, node) {
      node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status);
    }
  },
  {name: "start_date", label: "开始时间", width: 100, resize: true, align: "left"}, // 增大宽度
  {name: "duration", label: "天数", width: 80, resize: true, align: "center"},     // 增大宽度
  {name: 'end_date', label: '完成时间', width: 90, resize: true, align: "left"},   // 增大宽度
]


    var weekScaleTemplate = function (date) {
      var dateToStr = gantt.date.date_to_str("%m %d");
      var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      var weekNum = gantt.date.date_to_str("第 %W 周");
      return weekNum(date)
    };
    var daysStyle = function (date) {
      var dateToStr = gantt.date.date_to_str("%D");
      if (dateToStr(date) === "六" || dateToStr(date) === "日") return "weekend";
      return "";
    };
    gantt.config.subscales = [{
      unit: "week",
      step: 1,
      template: weekScaleTemplate
    },
      {
        unit: "day",
        step: 1,
        format: "%d",
        template: daysStyle
      }
    ];
    // 今日标线需要用到插件marker
    // gantt需要用到的插件
    gantt.plugins({
      marker: true,
      fullscreen: true
    });
    let today = new Date();
    gantt.addMarker({
      start_date: today,
      css: 'today',
      text: '',
    });
    gantt.plugins({
      tooltip: true
    });
    gantt.attachEvent("onGanttReady", function () {
      var tooltips = gantt.text.tooltips;
      gantt.templates.tooltip_text = function (start, end, task) {

        return task.toolTipsTxt + "<br/>" +
            "阶段：" + task.text + "<br/>" +
            "时长：" + task.duration + "天" + "<br/>" +
            gantt.templates.tooltip_date_format(start)
      };
    });


    //设置任务条进度内容
    gantt.templates.progress_text = function (start, end, task) {
      return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) +
          "% </div>";
    };

    //任务条显示内容
    gantt.templates.task_text = function (start, end, task) {
      // return task.text + '(' + task.duration + '天)';
      return "<div style='text-align:center;color:#fff'>" + task.text + '(' + task.day + '天)' +
          "</div>";
    }


    // gantt.templates.scale_cell_class = function(date) {
    //     /*if(date.getDay()== 0 || date.getDay()== 6){
    //       return "weekend";
    //     }*/
    //     return 'weekend'
    // }


    //任务栏周末亮色
    gantt.templates.timeline_cell_class = function (item, date) {
      if (date.getDay() === 0 || date.getDay() === 6) {
        return "weekend";
      }
    };


    //任务条上的文字大小 以及取消border自带样式
    gantt.templates.task_class = function (start, end, item) {
      return item.$level === 0 ? 'firstLevelTask' : 'secondLevelTask'
    }

    //甘特图图表宽度自适应
    gantt.config.autofit = true;
    gantt.config.layout = {
      css: "gantt_container",
      cols: [{
        width: 560,
        min_width: 200,
        rows: [{
          view: "grid",
          scrollX: "gridScroll",
          scrollable: true,
          scrollY: "scrollVer"
        },
          {
            view: "scrollbar",
            id: "gridScroll",
            group: "horizontal"
          }
        ]
      },
        {
          resizer: true,
          width: 1
        },
        {
          rows: [{
            view: "timeline",
            scrollX: "scrollHor",
            scrollY: "scrollVer"
          },
            {
              view: "scrollbar",
              id: "scrollHor",
              group: "horizontal"
            }
          ]
        },
        {
          view: "scrollbar",
          id: "scrollVer"
        }
      ]
    };

    //时间轴图表中，任务条形图的高度
    gantt.config.task_height = 28
    //时间轴图表中，甘特图的高度
    gantt.config.row_height = 36
    //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
    gantt.config.show_task_cells = true
    //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true
    gantt.config.min_column_width = 50;
    gantt.config.auto_types = true;
    gantt.config.date_format = "%Y-%m-%d";
    gantt.config.scale_unit = "month";
    gantt.config.step = 1;
    gantt.config.date_scale = "%Y年%M";
    gantt.config.start_on_monday = true;
    gantt.config.scale_height = 90;
    gantt.config.autoscroll = true;
    gantt.config.calendar_property = "start_date";
    gantt.config.calendar_property = "end_date";
    gantt.config.readonly = true;
    gantt.config.drag_links = true;
    gantt.config.drag_tasks = true;
    gantt.config.wide_form = true;
    gantt.i18n.setLocale('cn');

    // 初始化
    gantt.init(this.$refs.gantt)
    // 数据解析
    gantt.parse(this.tasks)
    gantt.render()
    gantt.refreshData()
    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: ["日", "一", "二", "三", "四", "五", "六"]
      },
      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: "请确认是否撤销修改!",
        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: "年"
      }
    }

  },
  beforeDestroy() {
    if (gantt.$_initialized) {
      gantt.destructor();
      gantt.$_initialized = false;
    }
  },
};
</script>
<style lang="scss">
.firstLevelTask {
  border: none;

  .gantt_task_content {
    font-size: 13px;
  }
}

.secondLevelTask {
  border: none;
}

.thirdLevelTask {
  border: 2px solid #da645d;
  color: #da645d;
  background: #da645d;
}

// 新增多级菜单样式
.project-level {
  background: #5692f0;
  color: white;
  font-weight: bold;
}

.material-level {
  background: #35a6e2;
  color: white;
}

.process-level {
  background: #62ddd4;
  color: white;
}

.milestone-default {
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
  border: none;
  background: #5692f0;
}

.milestone-finished {
  border: none;
  background: #84bd54;
}

.milestone-canceled {
  border: none;
  background: #da645d;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;

  .gantt_grid_head_cell {
    padding-left: 20px;
    text-align: left !important;
    font-size: 14px;
    color: #333;
  }

  .search-wrap{
    width: 100%;
    margin: 5px;
    padding: 15px;
    border: 0.5px solid #dad9d9;
    border-radius: 10px;
    display: flex;

    .select-process{
      color: #a6aeb0;
    }

    .title{
      font-size: 20px;
      font-weight: 600;
      color: #4f9ec5;
      margin: auto;
    }
  }



  .select-wrap {
    position: absolute;
    top: 25px;
    z-index: 99;
    width: 90px;
    left: 180px;

    .el-input__inner {
      border: none;
    }
  }

  .left-container {
    height: 100%;
  }

  .parent {
    .gantt_tree_icon {
      &.gantt_folder_open {
        background-image: url(assets/gantt-icon.svg) !important;
      }

      &.gantt_folder_closed {
        background-image: url(assets/gantt-icon-up.svg) !important;
      }
    }
  }

  .green,
  .yellow,
  .pink,
  .popular {
    .gantt_tree_icon.gantt_file {
      background: none;
      position: relative;

      &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .green {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #84bd54;
      }
    }
  }

  .yellow {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #fcca02;
      }
    }
  }

  .pink {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #da645d;
      }
    }
  }

  .popular {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #d1a6ff;
      }
    }
  }

}

.left-container {
  height: 100%;
}

.gantt_task_content {
  text-align: left;
  padding-left: 10px;
}

.search-item {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.search-item span {
  margin-right: 10px;
}

.gantt-container {
  width: 100vw;
  min-width: 900px;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
}
</style>
