import './list.scss'
import BaseFormControl from "../../baseFormControl";
import {JDTabModuleList} from "./listTpl";
class JDList extends BaseFormControl {
    constructor(config) {
        super();
        this.setConfig(config);
        this.render();
    }
    setConfig(config) {
        this.config = $.extend(true, {}, {
            domData: {},
            tabModuleSelected: [],
            maxSelected: 3,
            platForm: 'M'
        }, config);
    }
    render() {
        let $Node = template.render(JDTabModuleList, {
            tabModuleList: this.config.domData.formType.option,
            tabModuleSelected: this.config.tabModuleSelected,
            platForm: this.config.platForm,
            maxSelected: this.config.maxSelected
        });
        this.appendFormControl($Node);
        this.addEvent();
    }
    showAddTips() {
        this.element.find('.add-module-tips').fadeIn(2000, () => {
            this.element.find('.add-module-tips').fadeOut();
        });
    }
    addEvent() {
        let self = this, dragged, oldIndex, newIndex;
        this.element.find('.J_module_item a').on('click', function() {
            let clone = $(this).clone().attr('draggable', true);
            if(self.element.find('.J_module_selected a').length < self.config.maxSelected){
                self.element.find('.J_module_selected').append(clone).find('p').addClass('hide');
            }else{
                self.showAddTips();
            }
        });
        this.element.on('click', '.J_module_selected i', function(e) {
            e.stopPropagation();
            $(this).closest('[module-id]').remove();
            if(self.element.find('.J_module_selected a').length < 1){
                self.element.find('.J_module_selected p').removeClass('hide');
            }
        });
        this.element.on('dragstart', '.J_module_selected a', function(event){
            dragged = $(event.target);
            oldIndex = $(this).addClass('cd-draging').index();
        }).on('dragover', '.J_module_selected', function(event){
            event.preventDefault();
        }).on('dragenter', '.J_module_selected a', function(event){
            if(event.clientX > $(this).offset().left + $(this).outerWidth() / 2){
                dragged.insertAfter($(this));
            }else{
                dragged.insertBefore($(this));
            }
            newIndex = dragged.index();
        }).on('drop', '.J_module_selected', function(event){
            event.preventDefault();
        }).on('dragend', '.J_module_selected a', function(){
            $(this).removeClass('cd-draging');
            let arr = self.config.tabModuleSelected;
            arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0];
            self.config.tabModuleSelected = arr;
        })
    }
    getData() {
        let result = [];
        this.element.find('.J_module_selected a').each(function(){
            result.push({
                instanceId: $(this).attr('mode-instanceid'),
                templateId: $(this).attr('template-id'),
                moduleId: $(this).attr('module-id'),
                moduleName: $(this).attr('title')
            });
        })
        return result.length > 0 ? result : null;
    }
}
export default JDList;