<h3>{{ labels.Title  + (!readonly ? "  |  " : "")}}
    <a v-if="!readonly" style="cursor:pointer" @click="add()">{{ ButtonTextCreate }}</a>
</h3>
<div id="WorkflowDesignerTimersList" class="WorkflowDesignerWindowForm">
    <table class="WorkflowDesignerTable">
        <tr>
            <th></th>
            <th>{{labels.Name}}</th>
            <th>{{labels.Type}}</th>
            <th>{{labels.Value}}</th>
            <th>
                <el-tooltip :content="labels.OverrideHint" placement="top-start">
                    <div>
                        {{labels.Override}}<i class="el-icon-question" style="display: contents; opacity: 0.6; margin-left: 2px;"></i>
                    </div>
                </el-tooltip>
            </th>
        </tr>
        <tr v-for="(item, index) in items"
            :class="dragOverIndex == index && dragOverBlock  == item ? 'dragOver' : ''"
            @dragstart="dragstart(index, $event)" @dragend="dragend($event)"
            @dragover="dragover(item, index, $event)">
            <td class='WorkflowDesignerTableMoveCol' :draggable="!readonly" ><div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div></td>
            <td>
                <el-input
                    v-model="item.Name" 
                    :title="validateField('Name', item)" 
                    :class="validateField('Name', item) ? 'WorkflowDesignerInputError' : ''"
                    :readonly="readonly"
                ></el-input>
            </td>
            <td>
                <el-select
                    @change="item.Value = null"
                    v-model="item.Type"
                    style="width: 100%;" 
                    :disabled="readonly"
                    filterable
                    :title="validateField('Type', item)" 
                    :class="validateField('Type', item) ? 'WorkflowDesignerInputError' : ''">
                    <el-option v-for="type in timertypes" :key="type" :label="type" :value="type"></el-option>
                </el-select>
            </td>
            <td>
                <el-input v-if="item.Type == 'Interval'"
                    v-model="item.Value"
                    :title="validateField('Value', item)" 
                    :class="validateField('Value', item) ? 'WorkflowDesignerInputError' : ''"
                    :readonly="readonly">
                </el-input>
                <el-time-picker
                        v-if="item.Type == 'Time'"
                        arrow-control
                        v-model="item.Value"
                        :title="validateField('Value', item)"
                        :readonly="readonly"
                        :class="validateField('Value', item) ? 'WorkflowDesignerInputError' : ''">
                </el-time-picker>
                <el-date-picker
                        v-if="item.Type == 'Date'"
                        v-model="item.Value"
                        :title="validateField('Value', item)"
                        :class="validateField('Value', item) ? 'WorkflowDesignerInputError' : ''"
                        type="date"
                        :readonly="readonly">
                </el-date-picker>
                <el-date-picker
                        v-if="item.Type == 'DateAndTime'"
                        v-model="item.Value"
                        :title="validateField('Value', item)"
                        :class="validateField('Value', item) ? 'WorkflowDesignerInputError' : ''"
                        :readonly="readonly"
                        type="datetime">
                </el-date-picker>
                <el-input v-if="item.Type == 'Expression'"
                          v-model="item.Value"
                          :title="validateField('Value', item)"
                          :class="validateField('Value', item) ? 'WorkflowDesignerInputError' : ''"
                          :readonly="readonly">
                </el-input>
            </td>
            <td>
                <el-checkbox v-model="item.OverrideIfExists" :disabled="readonly"></el-checkbox>
            </td>
            <td v-if="!readonly" style="width: 42px;"><el-button @click="remove(index)" class="WorkflowDesignerTableDeleteButton"></el-button>
        </tr>
    </table>
</div>
<div class="WorkflowDesignerButtons">
    <el-button v-if="!readonly" @click="onSave" type="primary">{{ ButtonTextSave }}</el-button>
    <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>
<script type="application/javascript">
    function timers_Init(me){
         me.VueConfig.data = Object.assign(me.VueConfig.data, {
            readonly: false,
            labels: WorkflowDesignerConstants.TimerFormLabel,
            editItem: undefined,     
            ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
            ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
            ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
            ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
            timertypes: me.graph.data.AdditionalParams.TimerTypes
        });

        me.VueConfig.methods.onUpdate = function(){
            var clonedTimers = WorkflowDesignerCommon.clone(me.graph.data.Timers);

            clonedTimers.forEach(function (item){
                item.OverrideIfExists = !item.NotOverrideIfExists;
                switch (item.Type) {
                    case "Time":
                        item.Value = moment(item.Value, "HH:mm:ss");
                        break;
                    case "Date":
                        item.Value = moment(item.Value, "MM/DD/YYYY");
                        break;
                    case "DateAndTime":
                        item.Value = moment(item.Value, "MM/DD/YYYY HH:mm:ss");
                        break;
                }
            });
            me.VueConfig.data.items  = clonedTimers;
            me.VueConfig.data.readonly = me.graph.Settings.readonly;
        };

        me.VueConfig.methods.add = function(){
            me.VueConfig.data.items.push({Name:"", Type:me.VueConfig.data.timertypes[0] , Value: null, NotOverrideIfExists:false, OverrideIfExists:true});

            setTimeout(function(){
                var objDiv = document.getElementById("WorkflowDesignerTimersList");
                objDiv.scrollTop = objDiv.scrollHeight;
            },10);
        };

        me.VueConfig.methods.remove = function(index){
            me.VueConfig.data.items.splice(index, 1);
        };

        me.VueConfig.methods.showjson = function(name, item) {
            me.VueConfig.data.editItem = item;
            me.editItem = item;
            me.VueConfig.data.jsonform = me.showjson(item[name], function(value){
                if(me.editItem){
                    me.editItem[name] = value;
                    me.VueConfig.data.editItem = undefined;
                    delete me.editItem;
                }
            })
        };

        me.VueConfig.methods.validateField = function(name, item){
            if(name !== 'Name' && name !=='Type' && name !== 'Value')
                return;

            if(!item[name]){
                return WorkflowDesignerConstants.FieldIsRequired;
            }

            if(name === "Value" && (item.Value == null || item.Value =="Invalid date")){
                return WorkflowDesignerConstants.FieldIsRequired;
            }

            if(name === "Name"){
                var res = me.VueConfig.data.items.filter(function(i){ return i !== item && i.Name === item.Name });
                if(res.length > 0){
                    return WorkflowDesignerConstants.FieldMustBeUnique;
                }
            }
        };

        me.VueConfig.methods.validate = function(){
            var validateFunc = me.VueConfig.methods.validateField;
            var items = me.VueConfig.data.items;
            for(var i=0; i < items.length; i++){
                var item = items[i];
                if(validateFunc('Name', item) || item.Value ==null )
                    return false;
            }

            return true;
        };

        me.VueConfig.methods.onSave = function(){

            if(me.VueConfig.methods.validate && me.VueConfig.methods.validate()){
                me.VueConfig.data.items.forEach(function (item){
                    item.NotOverrideIfExists = !item.OverrideIfExists;
                    me.VueConfig.methods.convertValue(item);
                    delete item.OverrideIfExists;
                })

                console.log(me.VueConfig.data.items)

                me.graph.UpdateData(me.graph.data.Timers, me.VueConfig.data.items);
                me.onClose(true);
            }
        };

        me.VueConfig.methods.convertValue = function (item){
            switch (item.Type) {
                case "Time":
                    item.Value = moment(item.Value).format("HH:mm:ss");
                    break;
                case "Date":
                    item.Value = moment(item.Value).format("MM/DD/YYYY");
                    break;
                case "DateAndTime":
                    item.Value = moment(item.Value).format("MM/DD/YYYY HH:mm:ss");
                    break;
            }
        }

        me.VueConfig.methods.onClose = function(){

            if(me.VueConfig.data.readonly) {
                me.onClose(true);
                return;
            }

            me.VueConfig.data.items.forEach(function (item){
                item.NotOverrideIfExists = !item.OverrideIfExists;
                me.VueConfig.methods.convertValue(item)
            });

            if (WorkflowDesignerCommon.compareArray(
                me.graph.data.Timers, 
                me.VueConfig.data.items, 
                ["Name", "Type", "Value", "NotOverrideIfExists"])) {
                
                me.onClose(true);
            }
            else{
                me.showConfirm();
            }
        };

        me.VueConfig.methods.onCloseSave = function(){
            me.onClose(true);
        };

        me.showConfirm = function(){
            me.VueConfig.methods.showConfirm({
                title: WorkflowDesignerConstants.DialogConfirmText,
                message: WorkflowDesignerConstants.CloseWithoutSaving,
                onSuccess: function(){
                    me.VueConfig.methods.onCloseSave();
                }});
        }
    };
</script>