
<template>
    <div>
        <div class="radio">
            <label class="radio-inline">
                <input autocomplete="off" type="radio" id="scale0" value="0" v-model="scale"/>时标度
            </label>
            <label class="radio-inline">
                <input autocomplete="off" type="radio" id="scale1" value="1" v-model="scale"/>日标度
            </label>
            <label class="radio-inline">
                <input autocomplete="off" type="radio" id="scale2" value="2" v-model="scale"/>周标度
            </label>
            <label class="radio-inline">
                <input autocomplete="off" type="radio" id="scale3" value="3" v-model="scale"/>月标度
            </label>
            <label class="radio-inline">
                <input autocomplete="off" type="radio" id="scale4" value="4" v-model="scale"/>年标度
            </label>
            <button type="button" class="btn btn-link pull-right" @click="saveGantt">
                 <i class="fa fa-download" aria-hidden="true" ></i>
            </button>
            <button v-if="hideButtons != true" type="button" class="btn btn-link pull-right" @click="showGanttChanged">
                <span v-if="showGantt == 1" >显示甘特图</span>
                <span v-if="showGantt == 2" >显示表格</span>
            </button>
        </div>
        <Modal v-model:show="create" @cancel="$refs.create.show = false" large="true" @ok="runSaveGantt" >
            <template #header>
               保存甘特图
            </template>
            <div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="ganttName" class="col-xs-4 col-sm-3 col-md-2 col-lg-1 control-label">
                            <nobr>甘特图名称</nobr>
                        </label>
                        <div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
                            <input autocomplete="off"  type="text" class="form-control" id="ganttName" v-model="ganttName" />
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>


<script>
import { Common } from 'pc-component-v3';
import { Notify, Uuid } from 'pc-component-v3';
export default {
    /**
     * ganttDivId : 甘特图DIV的id
     */
    props: ["ganttDivId","hideIndex","hideButtons"],

    data: function() {
        return {
            scale: 1,
            showGantt: 1,   // 1：表格和甘特图一起显示  2：仅显示表格  3：仅显示甘特图  
            columnsTemp:[],
            ganttName:"",
            create: false
        };
    },

    components:{
    },

    methods: {
        showGanttChanged:function(){
            if (this.showGantt >= 2){
                this.showGantt = 1;
            } else{
                this.showGantt ++;
            }
        },
        /**
         * 设置默认的标度
         */
        setDefaultScale: function(){
			this.setScaleConfig("1");
        },

        /**
         * 设置标度
         */
        setScaleConfig: function(value) {
            switch (value) {
                case "0":
                    gantt.config.scale_unit = "day";
                    gantt.config.date_scale = "%l, %F %d";
                    gantt.config.min_column_width = 20;
                    gantt.config.scale_height = 20 * 3;
                    gantt.templates.task_cell_class = function(task, date) {
                        if (date.getHours() == 8) {
                            return "day_start";
                        }
                        if (date.getHours() == 18) {
                            return "day_end";
                        }
                        return "";
                    };
                    var weekScaleTemplate = function(date) {
                        var dateToStr = gantt.date.date_to_str("%d %M");
                        var weekNum = gantt.date.date_to_str("(week %W)");
                        var endDate = gantt.date.add(
                            gantt.date.add(date, 1, "week"),
                            -1,
                            "day"
                        );
                        return (
                            dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date)
                        );
                    };
                    gantt.config.subscales = [
                        { unit: "week", step: 1, template: weekScaleTemplate },
                        { unit: "hour", step: 1, date: "%G" }
                    ];
                    /* gantt.ignore_time = function(date) {
                        if (date.getDay() == 0 || date.getDay() == 6) return true;
                        if (date.getHours() < 8 || date.getHours() > 18) return true;
                        return false;
                    };*/
                    break;
                case "1":
                    gantt.config.scale_unit = "day";
                    gantt.config.step = 1;
                    gantt.config.date_scale = "%M %d日";
                    gantt.config.subscales = [];
                    gantt.config.scale_height = 27;
                    gantt.config.min_column_width = 50;
                    gantt.templates.date_scale = null;
                    break;
                case "2":
                    var weekScaleTemplate = function(date) {
                        var dateToStr = gantt.date.date_to_str("%M %d日");
                        var startDate = gantt.date.week_start(new Date(date));
                        var endDate = gantt.date.add(
                        gantt.date.add(startDate, 1, "week"),
                        -1,
                        "day"
                        );
                        return dateToStr(startDate) + " - " + dateToStr(endDate);
                    };

                    gantt.config.scale_unit = "week";
                    gantt.config.step = 1;
                    gantt.templates.date_scale = weekScaleTemplate;
                    gantt.config.min_column_width = 50;
                    gantt.config.subscales = [{ unit: "day", step: 1, date: "%D" }];
                    gantt.config.scale_height = 50;
                    break;
                case "3":
                    gantt.config.scale_unit = "month";
                    gantt.config.date_scale = "%Y年%F";
                    gantt.config.subscales = [{ unit: "day", step: 1, date: "%j, 周%D" }];
                    gantt.config.scale_height = 50;
                    gantt.config.min_column_width = 50;
                    gantt.templates.date_scale = null;
                    break;
                case "4":
                    gantt.config.scale_unit = "year";
                    gantt.config.step = 1;
                    gantt.config.date_scale = "%Y年";
                    gantt.config.min_column_width = 50;
                    gantt.config.scale_height = 90;
                    gantt.templates.date_scale = null;
                    gantt.config.subscales = [{ unit: "month", step: 1, date: "%M" }];
                    break;
            }
            gantt.render();
        },
        saveGantt:function(){
            this.create = true;
            
        },
        runSaveGantt:function(){
            var _self = this;
            var ganttData = [];
            gantt.eachTask(item =>{
                var event = {
                    id:item.id,
                    text:item.text,
                    type:item.type,
                    parant : item.parent
                }
                if(item.start_date){
                    event.start_date = item.start_date.getTime();
                }
                if(item.end_date){
                    event.end_date = item.end_date.getTime();
                }

                if(item.unscheduled == true){
                    event.start_date = undefined;
                    event.end_date = undefined;
                }
                   
                ganttData.push(event);
            });

            var ganttInfo ={
                name : _self.ganttName,
                ganttType : "TJDHJ",
                ganttJson : JSON.stringify(ganttData)
            }
            $.ajax({
                url :Common.getApiURL("GeneticAlgorithmParameterResource/saveGantt"),
                type : "post",
                dataType : "json",
                contentType : "application/json",
                data : JSON.stringify(ganttInfo),
                beforeSend : function(request){
                    Common.addTokenToRequest(request);
                },
                success : function(data){
                    Notify.success("提示","甘特图保存成功，可在排产回放界面查看",1500);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown){     
                    Common.processException(XMLHttpRequest, textStatus, errorThrown);
                }
            });
        }
    },

    watch: {
        scale: function(newValue, oldValue) {
            this.setScaleConfig(newValue);
        },

        showGantt: function(newValue, oldValue){
            if(newValue == 1){
                if( this.columnsTemp != undefined &&  this.columnsTemp.length > 0){
                    gantt.config.columns = this.columnsTemp;
                }
                    gantt.config.grid_width = this.grid_width;
            }else if(newValue == 2){
                this.columnsTemp =  gantt.config.columns;
                this.grid_width = gantt.config.grid_width;
                if(this.hideIndex == true){
                     gantt.config.columns = [
                        {name:"text", label:"名称", width: 200 , tree:true}
                    ];
                }else{
                    gantt.config.columns = [
                        {name:"index", label:"序号", width: 40, align: "center"},
                        {name:"text", label:"名称", width: 200 , tree:true}
                    ];
                }
                
                gantt.config.grid_width = 240; 
            }
            gantt.render();
        }
    }
};
</script>
