<template>
  <div :style="'height:' + height + 'px'">
    <div ref="gantt" class="gantt-container"></div>
  </div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt'
import  demo from './demo.json'

export default {
  name: 'gantt',
  props: {
    //容器高度
    height: {
      type: [String, Number],
      default: 300
    },
    //时间刻度类型，可选值： hour day
    scaleType:{
      type: String,
      default: 'hour'
    },
    //是否显示左侧grid表格
    showGrid:{
      type:Boolean,
      default:true
    },
    //grid显示列
    columns:{
      type:Array,
      default: ()=> [
        {name: "wbs", label: "序号", width: 40, template: gantt.getWBSCode},
        {name: "produce_no", label: "工单单号", tree: true, width: 220,resize: true},
        {name: "dispatch_no", label: "派工单号",align: "center", width: 150,resize: true},
        {name: "node", label: "工序", align: "center",width: 50,resize: true},
        {name: "station", label: "工位", align: "center",width: 50,resize: true},
        {name: "prod_user", label: "工号", align: "center",width: 50},
        {name: "dispatch_num", label: "派工数量",align: "center", width: 60},
        {name: "report_num", label: "报工数量", align: "center",width: 60},
        {name: "dispatch_status", label: "工单状态", align: "center",width: 60},
        {name: "report_status", label: "报工状态", align: "center",width: 60},
        {name: "start_date", label: "计划开始时间",align: "center", width: 90},
        {name: "end_date", label: "计划完成时间",align: "center", width: 90},
      ]
    },
    data:{
      type:Object,
      default: ()=> demo
    }
  },
  watch: {
    data () {
      this.refresh()
    }
  },
  data() {
    return {
      tasks: {
        data: []
      },
      scales: {
        hour:[
          { unit: "day",
            format: function(date){
              return new Date(date).format("yyyy-MM-dd");
            },
            css: function (date) {
              if (date.getDay() == 0 || date.getDay() == 6) {
                return 'day-item weekend weekend-border-bottom'
              } else {
                return 'day-item'
              }
            }
          },
          {unit: "hour", step: 8, format: "%H:%i"}
        ],
        day:[
          {unit: "month", step: 1,  format: "%Y年%m月"},
          {unit: "day", step: 1, format: "%j日, 周%D",
            css: function (date) {
              if (date.getDay() == 0 || date.getDay() == 6) {
                return 'day-item weekend weekend-border-bottom'
              } else {
                return 'day-item'
              }
            }}
        ]
      }
    }
  },
  methods: {
    init() {
      //是否显示grid
      gantt.config.show_grid = this.showGrid;
      //设置列
      gantt.config.columns = this.columns
      //初始化
      gantt.init(this.$refs.gantt)
      this.refresh()
    },
    refresh() {
      //清空数据源
      gantt.clearAll()
      //转换数据
      gantt.parse(this.data)
    }
  },
  mounted() {
    gantt.config.grid_resize = true;
    //grid行高
    gantt.config.row_height = 30
    //进度条行高
    gantt.config.bar_height = 24
    //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
    gantt.config.auto_types = true
    //是否只读
    gantt.config.readonly = true
    //设置语言
    gantt.i18n.setLocale('cn')
    //是否显示grid
    gantt.config.show_grid = this.showGrid;
    //设置时间跨度
    gantt.config.scales = this.scales[this.scaleType]
    //时间刻度行高
    gantt.config.scale_height = 30;

    //进度文字
    gantt.templates.progress_text = function (start, end, task) {
      return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + "% </span>";
    };
    //设置列
    gantt.config.columns = this.columns
    //初始化
    gantt.init(this.$refs.gantt)
    //转换数据
    gantt.parse(this.data)
  }


}
</script>

<style scoped>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
/*容器大小*/
.gantt-container {
  width: 100%;
  height: 100%;
}

/*周末字体*/
/deep/ .weekend {
  color: rgb(45, 140, 240)!important;
}

/*gantt进度字体*/
/deep/ .gantt_task_progress {
  text-align: left;
  padding-left: 4px;
  box-sizing: border-box;
  color: white;
  font-weight: bold;
}

/*grid选中行*/
/deep/ .gantt_grid_data .gantt_row.gantt_selected{
  background: #C4D9FF!important;
}

/*grid行hover*/
/deep/ .gantt_grid_data .gantt_row:hover{
  background: transparent;
}

/*gantt选中行*/
/deep/.gantt_task_row.gantt_selected{
  background: transparent;
}

/*grid表头字体*/
/deep/ .gantt_grid_head_cell{
  font-size:12px;
  font-weight:700;
  color: #606266;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

/*gantt表头字体*/
/deep/ .gantt_task .gantt_task_scale .gantt_scale_cell{
  font-size:12px;
  font-weight:700;
  color: #606266;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
</style>
