/**
 
 @Name：layui.transfer 穿梭框
 @Author：贤心
 @License：MIT

 */

layui.define(['laytpl', 'form'], function (exports) {
    "use strict";

    var $ = layui.$
        , laytpl = layui.laytpl
        , form = layui.form

        //模块名
        , MOD_NAME = 'transfer'

        //外部接口
        , transfer = {
            config: {}
            , index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0

            //设置全局项
            , set: function (options) {
                var that = this;
                that.config = $.extend({}, that.config, options);
                return that;
            }

            //事件监听
            , on: function (events, callback) {
                return layui.onevent.call(this, MOD_NAME, events, callback);
            }
        }

        //操作当前实例
        , thisModule = function () {
            var that = this
                , options = that.config
                , id = options.id || that.index;

            thisModule.that[id] = that; //记录当前实例对象
            thisModule.config[id] = options; //记录当前实例配置项

            return {
                config: options
                //重置实例
                , reload: function (options) {
                    that.reload.call(that, options);
                }
                //获取右侧数据
                , getData: function () {
                    return that.getData.call(that);
                }
            }
        }

        //获取当前实例配置项
        , getThisModuleConfig = function (id) {
            var config = thisModule.config[id];
            if (!config) hint.error('The ID option was not found in the ' + MOD_NAME + ' instance');
            return config || null;
        }

        //字符常量
        , ELEM = 'layui-transfer', HIDE = 'layui-hide', DISABLED = 'layui-btn-disabled', NONE = 'layui-none'
        , ELEM_BOX = 'layui-transfer-box', ELEM_HEADER = 'layui-transfer-header', ELEM_SEARCH = 'layui-transfer-search', ELEM_ACTIVE = 'layui-transfer-active', ELEM_DATA = 'layui-transfer-data'

        //穿梭框模板
        , TPL_BOX = function (obj) {
            obj = obj || {};
            return ['<div class="layui-transfer-box" data-index="' + obj.index + '">'
                , '<div class="layui-transfer-header">'
                , '<input type="checkbox" name="' + obj.checkAllName + '" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{ d.data.title[' + obj.index + '] || \'list' + (obj.index + 1) + '\' }}">'
                , '</div>'
                , '{{# if(d.data.showSearch){ }}'
                , '<div class="layui-transfer-search">'
                , '<i class="layui-icon layui-icon-search"></i>'
                , '<input type="input" class="layui-input" placeholder="关键词搜索">'
                , '</div>'
                , '{{# } }}'
                , '<ul class="layui-transfer-data"></ul>'
                , '</div>'].join('');
        }

        //主模板
        , TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">'
            , TPL_BOX({
                index: 0
                , checkAllName: 'layTransferLeftCheckAll'
            })
            , '<div class="layui-transfer-active">'
            , '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">'
            , '<i class="layui-icon layui-icon-next"></i>'
            , '</button>'
            , '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">'
            , '<i class="layui-icon layui-icon-prev"></i>'
            , '</button>'
            , '</div>'
            , TPL_BOX({
                index: 1
                , checkAllName: 'layTransferRightCheckAll'
            })
            , '</div>'].join('')

        //构造器
        , Class = function (options) {
            var that = this;
            that.index = ++transfer.index;
            that.config = $.extend({}, that.config, transfer.config, options);
            that.render();
        };

    //默认配置
    Class.prototype.config = {
        title: ['列表一', '列表二']
        , width: 200
        , height: 360
        , data: [] //数据源
        , value: [] //选中的数据
        , showSearch: false //是否开启搜索
        , id: '' //唯一索引，默认自增 index
        , text: {
            none: '无数据'
            , searchNone: '无匹配数据'
        }
    };

    //重载实例
    Class.prototype.reload = function (options) {
        var that = this;

        layui.each(options, function (key, item) {
            if (item.constructor === Array) delete that.config[key];
        });

        that.config = $.extend(true, {}, that.config, options);
        that.render();
    };

    //渲染
    Class.prototype.render = function () {
        var that = this
            , options = that.config;

        //解析模板
        var thisElem = that.elem = $(laytpl(TPL_MAIN).render({
            data: options
            , index: that.index //索引
        }));

        var othis = options.elem = $(options.elem);
        if (!othis[0]) return;

        //初始化属性
        options.data = options.data || [];
        options.value = options.value || [];

        //索引
        that.key = options.id || that.index;

        //插入组件结构
        othis.html(that.elem);

        //各级容器
        that.layBox = that.elem.find('.' + ELEM_BOX)
        that.layHeader = that.elem.find('.' + ELEM_HEADER)
        that.laySearch = that.elem.find('.' + ELEM_SEARCH)
        that.layData = thisElem.find('.' + ELEM_DATA);
        that.layBtn = thisElem.find('.' + ELEM_ACTIVE + ' .layui-btn');

        //初始化尺寸
        that.layBox.css({
            width: options.width
            , height: options.height
        });
        that.layData.css({
            height: function () {
                return options.height - that.layHeader.outerHeight() - that.laySearch.outerHeight() - 2
            }()
        });

        that.renderData(); //渲染数据
        that.events(); //事件
    };

    //渲染数据
    Class.prototype.renderData = function () {
        var that = this
            , options = that.config;

        //左右穿梭框差异数据
        var arr = [{
            checkName: 'layTransferLeftCheck'
            , views: []
        }, {
            checkName: 'layTransferRightCheck'
            , views: []
        }];

        //解析格式
        that.parseData(function (item) {
            //标注为 selected 的为右边的数据
            var _index = item.selected ? 1 : 0
                , listElem = ['<li>'
                    , '<input type="checkbox" name="' + arr[_index].checkName + '" lay-skin="primary" lay-filter="layTransferCheckbox" title="' + item.title + '"' + (item.disabled ? ' disabled' : '') + (item.checked ? ' checked' : '') + ' value="' + item.value + '">'
                    , '</li>'].join('');
            arr[_index].views.push(listElem);
            delete item.selected;
        });

        // 扩展赋值的顺序跟勾选的顺序一致 
        var newArr = [];
        layui.each(options.value, function (index, item1) {
            layui.each(arr[1].views, function (index2, item2) {
                var getValue = $(item2).find('input').attr('value');
                if (item1 == getValue) {
                    newArr.push(item2);
                }
            });
        });
        // 扩展赋值的顺序跟勾选的顺序一致 end
        that.layData.eq(0).html(arr[0].views.join(''));
        that.layData.eq(1).html(newArr.join(''));
        that.renderCheckBtn();
    }

    //渲染表单
    Class.prototype.renderForm = function (type) {
        form.render(type, 'LAY-transfer-' + this.index);
    };

    //同步复选框和按钮状态
    Class.prototype.renderCheckBtn = function (obj) {
        var that = this
            , options = that.config;

        obj = obj || {};

        that.layBox.each(function (_index) {
            var othis = $(this)
                , thisDataElem = othis.find('.' + ELEM_DATA)
                , allElemCheckbox = othis.find('.' + ELEM_HEADER).find('input[type="checkbox"]')
                , listElemCheckbox = thisDataElem.find('input[type="checkbox"]');

            //同步复选框和按钮状态
            var nums = 0
                , haveChecked = false;
            listElemCheckbox.each(function () {
                var isHide = $(this).data('hide');
                if (this.checked || this.disabled || isHide) {
                    nums++;
                }
                if (this.checked && !isHide) {
                    haveChecked = true;
                }
            });

            allElemCheckbox.prop('checked', haveChecked && nums === listElemCheckbox.length); //全选复选框状态
            that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](DISABLED); //对应的按钮状态

            //无数据视图
            if (!obj.stopNone) {
                var isNone = thisDataElem.children('li:not(.' + HIDE + ')').length
                that.noneView(thisDataElem, isNone ? '' : options.text.none);
            }
        });

        that.renderForm('checkbox');
    };

    //无数据视图
    Class.prototype.noneView = function (thisDataElem, text) {
        var createNoneElem = $('<p class="layui-none">' + (text || '') + '</p>');
        if (thisDataElem.find('.' + NONE)[0]) {
            thisDataElem.find('.' + NONE).remove();
        }
        text.replace(/\s/g, '') && thisDataElem.append(createNoneElem);
    };

    //同步 value 属性值
    Class.prototype.setValue = function () {
        var that = this
            , options = that.config
            , arr = [];
        that.layBox.eq(1).find('.' + ELEM_DATA + ' input[type="checkbox"]').each(function () {
            var isHide = $(this).data('hide');
            isHide || arr.push(this.value);
        });
        options.value = arr;

        return that;
    };

    //解析数据
    Class.prototype.parseData = function (callback) {
        var that = this
            , options = that.config
            , newData = [];

        layui.each(options.data, function (index, item) {
            //解析格式
            item = (typeof options.parseData === 'function'
                ? options.parseData(item)
                : item) || item;

            newData.push(item = $.extend({}, item))

            layui.each(options.value, function (index2, item2) {
                if (item2 == item.value) {
                    item.selected = true;
                }
            });
            callback && callback(item);
        });

        options.data = newData;
        return that;
    };

    //获得右侧面板数据
    Class.prototype.getData = function (value) {
        var that = this
            , options = that.config
            , selectedData = [];

        that.setValue();

        layui.each(value || options.value, function (index, item) {
            layui.each(options.data, function (index2, item2) {
                delete item2.selected;
                if (item == item2.value) {
                    selectedData.push(item2);
                };
            });
        });
        return selectedData;
    };

    //事件
    Class.prototype.events = function () {
        var that = this
            , options = that.config;

        //左右复选框
        that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function () {
            var thisElemCheckbox = $(this).prev()
                , checked = thisElemCheckbox[0].checked
                , thisDataElem = thisElemCheckbox.parents('.' + ELEM_BOX).eq(0).find('.' + ELEM_DATA);

            if (thisElemCheckbox[0].disabled) return;

            //判断是否全选
            if (thisElemCheckbox.attr('lay-type') === 'all') {
                if (options.limit == undefined || options.limit == 0) {
                    thisDataElem.find('input[type="checkbox"]').each(function () {
                        if (this.disabled) return;
                        this.checked = checked;
                    });
                } else if (thisElemCheckbox.parent().parent().data('index') != 0) {
                    thisDataElem.find('input[type="checkbox"]').each(function () {
                        if (this.disabled) return;
                        this.checked = checked;
                    });
                }
            }

            if (options.limit != undefined && options.limit > 0 && checked) {
                var selectCount = 0;
                thisDataElem.find('input[type="checkbox"]').each(function () {
                    if (this.checked) {
                        selectCount++;
                    }
                });
                var selectedCount = 0;
                if (thisElemCheckbox.parent().parent().parent().data('index') == 0) {
                    selectedCount = thisElemCheckbox.parent().parent().parent().next('div').next('div').find('ul li').length;
                }
                selectCount += selectedCount;
                if (options.limit < selectCount) {
                    thisElemCheckbox[0].checked = false;
                    layer.msg('最多选' + options.limit + "个", { icon: 0, time: 1500, shade: 0.3 });
                }
                //获取右侧数据
                if (selectedCount == options.limit) {
                    thisElemCheckbox[0].checked = false;
                    layer.msg('最多选' + options.limit + "个", { icon: 0, time: 1500, shade: 0.3 });
                }
            }

            that.renderCheckBtn({ stopNone: true });
        });

        //按钮事件
        that.layBtn.on('click', function () {
            var othis = $(this)
                , _index = othis.data('index')
                , thisBoxElem = that.layBox.eq(_index)
                , arr = [];
            if (othis.hasClass(DISABLED)) return;

            that.layBox.eq(_index).each(function (_index) {
                var othis = $(this)
                    , thisDataElem = othis.find('.' + ELEM_DATA);

                thisDataElem.children('li').each(function () {
                    var thisList = $(this)
                        , thisElemCheckbox = thisList.find('input[type="checkbox"]')
                        , isHide = thisElemCheckbox.data('hide');

                    if (thisElemCheckbox[0].checked && !isHide) {
                        thisElemCheckbox[0].checked = false;
                        thisBoxElem.siblings('.' + ELEM_BOX).find('.' + ELEM_DATA).append(thisList.clone());
                        thisList.remove();

                        //记录当前穿梭的数据
                        arr.push(thisElemCheckbox[0].value);
                    }

                    that.setValue();
                });
            });

            that.renderCheckBtn();

            //穿梭时，如果另外一个框正在搜索，则触发匹配
            var siblingInput = thisBoxElem.siblings('.' + ELEM_BOX).find('.' + ELEM_SEARCH + ' input')
            siblingInput.val() === '' || siblingInput.trigger('keyup');

            //穿梭时的回调
            options.onchange && options.onchange(that.getData(arr), _index);
        });

        //搜索
        that.laySearch.find('input').on('keyup', function () {
            var value = this.value
                , thisDataElem = $(this).parents('.' + ELEM_SEARCH).eq(0).siblings('.' + ELEM_DATA)
                , thisListElem = thisDataElem.children('li');

            thisListElem.each(function () {
                var thisList = $(this)
                    , thisElemCheckbox = thisList.find('input[type="checkbox"]')
                    , isMatch = thisElemCheckbox[0].title.indexOf(value) !== -1;

                thisList[isMatch ? 'removeClass' : 'addClass'](HIDE);
                thisElemCheckbox.data('hide', isMatch ? false : true);
            });

            that.renderCheckBtn();

            //无匹配数据视图
            var isNone = thisListElem.length === thisDataElem.children('li.' + HIDE).length;
            that.noneView(thisDataElem, isNone ? options.text.searchNone : '');
        });
    };

    //记录所有实例
    thisModule.that = {}; //记录所有实例对象
    thisModule.config = {}; //记录所有实例配置项

    //重载实例
    transfer.reload = function (id, options) {
        var that = thisModule.that[id];
        that.reload(options);

        return thisModule.call(that);
    };

    //获得选中的数据（右侧面板）
    transfer.getData = function (id) {
        var that = thisModule.that[id];
        return that.getData();
    };

    //核心入口
    transfer.render = function (options) {
        var inst = new Class(options);
        return thisModule.call(inst);
    };

    exports(MOD_NAME, transfer);
});