<template>
  <div class="ganCss">
    <!-- v-show="showGantt" -->
    <gantt-elastic :options="options" :tasks="tasks" @tasks-changed="tasksUpdates" @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate">
    </gantt-elastic>

    <!-- -->
  </div>
</template>

<style>

</style>
<script>
import GanttElastic from "gantt-elastic";
import dayjs from "dayjs";
// import GanttHeader from "gantt-elastic-header";

//tasks是数据 真实的项目需要接口赋值数据
let that;
let options = {
  taskMapping: {
    progress: "percent",
  },
  maxRows: 10,
  maxHeight: 500,
  // title: {
  //   label: "Your project title as html (link or whatever...)",
  //   html: false
  // },
  row: {
    height: 30, //设置行高
  },
  times: {
    timeScale: 60 * 1000,
    timeZoom: 20,
  },

  chart: {
    grid: {
      horizontal: {
        gap: 6, //*
      },
    },
    text: {
      offset: 4, //*
      xPadding: 10, //*
      display: true, //*
    },

    expander: {
      type: "chart",
      display: true, //*
      displayIfTaskListHidden: true, //*
      offset: 4, //*
      size: 18,
    },
  },

  taskList: {
    // expander: {
    //   straight: true,
    // },
    columns: [
      {
        id: 2,
        label: "任务描述",
        value: "label2",
        width: 300,
        expander: true,
        html: true,
        events: {
          click({ data, column }) {
            if (that.flags != "1") {
              that.showDialog(data);
            }
          },
        },
      },
      {
        id: 4,
        label: "开始时间",
        value: 'start',
        width: 78,
      },
      {
        id: 5,
        label: "结束时间",
        value: 'end',
        width: 78,
      },
    ],
  },

  calendar: {
    workingDays: [1, 2, 3, 4, 5, 6], //*
    gap: 0,
    strokeWidth: 5,
    hour: {
      display: false,
    },
  },

  locale: {
    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    months: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
  },
};
export default {
  props: ['Json'],
  //   name: "Gantt",
  components: {
    GanttElastic,
    // GanttHeader
  },
  // props: {
  //   gantData: {},
  //   flags: {
  //     type: String,
  //   },
  // },
  data() {
    return {
      showGantt: false,
      dialogVisible: false,
      orderModal: false,
      TaskData: [],
      sontaskData: "",
      tasks: [
        // {
        //   id: 1,
        //   label: "项目一",
        //   start: this.getTody(new Date(), 4),
        //   end: this.getTody(new Date(), -30),
        //   duration: 30 * 24 * 60 * 60 * 1000,
        //   percent: 85,
        //   type: "task",
        //   style: {
        //     base: {
        //       fill: "#4a83d0",
        //       stroke: "#4a83d0",
        //     },
        //   },
        // },
        // {
        //   id: 2,
        //   label: "项目二",
        //   start: this.getTody(new Date(), 10),
        //   end: this.getTody(new Date(), -50),
        //   duration: 30 * 24 * 60 * 60 * 1000,
        //   percent: 85,
        //   type: "task",
        //   style: {
        //     base: {
        //       fill: "#4a83d0",
        //       stroke: "#4a83d0",
        //     },
        //   },
        // },
        // {
        //   id: 3,
        //   label: "项目三",
        //   start: this.getTody(new Date(), 15),
        //   end: this.getTody(new Date(), -80),
        //   duration: 30 * 24 * 60 * 60 * 1000,
        //   percent: 85,
        //   type: "task",
        //   style: {
        //     base: {
        //       fill: "#4a83d0",
        //       stroke: "#4a83d0",
        //     },
        //   },
        // },
        // {
        //   id: 4,
        //   label: "项目四",
        //   start: this.getTody(new Date(), 7),
        //   end: this.getTody(new Date(), -15),
        //   duration: 30 * 24 * 60 * 60 * 1000,
        //   percent: 85,
        //   type: "task",
        //   style: {
        //     base: {
        //       fill: "#4a83d0",
        //       stroke: "#4a83d0",
        //     },
        //   },
        // },
        // {
        //   id: 5,
        //   label: "项目五",
        //   start: this.getTody(new Date(), 3),
        //   end: this.getTody(new Date(), -40),
        //   duration: 30 * 24 * 60 * 60 * 1000,
        //   percent: 85,
        //   type: "task",
        //   style: {
        //     base: {
        //       fill: "#4a83d0",
        //       stroke: "#4a83d0",
        //     },
        //   },
        // },
      ],
      options,
      dynamicStyle: {},
      successStyle: {
        base: {
          fill: "#4a83d0",
          stroke: "#4a83d0",
          height: 20,
        },
      },
      unfinishedStyle: {
        base: {
          fill: "#4a83d0",
          stroke: "#4a83d0",
        },
      },
      comName: "newSelectProdct",
      titles: "新品选品",
      flag: true,
    };
  },
  created() { },
  mounted() {
    this.getTaskList();
  },
  computed: {},
  watch: {
    Json: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        var unitJson = this.Json
        this.tasks = []
        for (var i = 0; i < unitJson.length; i++) {
          let task = unitJson[i].chapterInfo[0].taskJson
          this.tasks.push({
              id: i ,
              label2: '第' + (i + 1) + '阶段',
              label: this.datedifference('', ''),
              start: '',
              end: '',
              percent: 85,
              type: "task",
              style: {
                base: {
                  fill: "#4a83d0",
                  stroke: "#4a83d0",
                },
              },
            })
          for (var j = 0; j < task.length; j++) {
            this.tasks.push({
              id: i + '-' + j,
              label2: '任务' + (j + 1) + '-' + task[j].task,
              label: this.datedifference(task[j].time ? task[j].time[0] : '', task[j].time ? task[j].time[1] : ''),
              start: this.getTody(task[j].time ? task[j].time[0] : ''),
              end: this.getTody(task[j].time ? task[j].time[1] : ''),
              parentId:i,
              percent: 85,
              type: "task",
              style: {
                base: {
                  fill: "#4a83d0",
                  stroke: "#4a83d0",
                },
              },
            })
          }
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    getTody(n, ds = 0, ys = 0) {
      var now = new Date(n);
      var time = now - 24 * 60 * 60 * 1000 * ds; //获取前N天
      var d = new Date(time);
      var year = d.getFullYear() - ys; //获取前N年的时间
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      var week = d.getDay();
      var hour = d.getHours();
      var secd = d.getMinutes();
      var week = d.getDay();
      var times = "";
      if (mon == 0) {
        times = 12 + "-" + (day < 10 ? "0" + day : day);
      } else if (mon < 10) {
        times =
          (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
      } else {
        times = mon + "-" + (day < 10 ? "0" + day : day);
      }
      var today = year + "-" + times;

      return year ? today : '无';
    },
    //计算时间差
    datedifference(date1, date2) {
      //sDate1和sDate2是2006-12-18格式
      var dateSpan, tempDate, iDays;
      var sDate1 = this.getTody(date1);
      sDate1 = Date.parse(sDate1);
      var sDate2 = this.getTody(date2);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays ? iDays + '天' : "";
    },
    //获取数据-----------------------------------------------------
    getTaskList() {
      var unitJson = this.Json
      this.tasks = []
      for (var i = 0; i < unitJson.length; i++) {
        let task = unitJson[i].chapterInfo[0].taskJson
        for (var j = 0; j < task.length; j++) {
          this.tasks.push({
            id: i + '-' + j,
            label2: '第' + (i + 1) + '阶段-' + '任务' + (j + 1) + '-' + task[j].task,
            label: this.datedifference(task[j].time ? task[j].time[0] : '', task[j].time ? task[j].time[1] : ''),
            start: this.getTody(task[j].time ? task[j].time[0] : ''),
            end: this.getTody(task[j].time ? task[j].time[1] : ''),
            percent: 85,
            type: "task",
            style: {
              base: {
                fill: "#4a83d0",
                stroke: "#4a83d0",
              },
            },
          })
        }
      }
    },
    //点击弹出-----------------------------------------------------
    showDialog(data) { },

    tasksUpdates(tasks, num) {
      if (num == 2) {
        // this.tasks = [];
        this.tasks = tasks;
      } else {
        return;
      }
    },
    optionsUpdate(options, num) {
      if (num == 2) {
        this.options = options;
      }
    },
    styleUpdate(style) {
      this.dynamicStyle = style;
    },
  },
};
</script>
<style scoped>
.ganCss >>> .gantt-elastic__task-list-header{
  min-height: 40px;
}
</style>

