/**
 * @fileoverview 上传组件主题基类
 * @author 剑平（明河）<minghe36@126.com>
 **/

KISSY.add('gallery/form/1.3/uploader/theme', function (S, Node, Base) {
    var EMPTY = '', $ = Node.all,
        //主题样式名前缀
        classSuffix = {BUTTON:'-button', QUEUE:'-queue'};

    /**
     * @name Theme
     * @class 上传组件主题基类
     * @constructor
     * @extends Base
     * @requires Queue
     */
    function Theme(config) {
        var self = this;
        //调用父类构造函数
        Theme.superclass.constructor.call(self, config);
    }

    S.extend(Theme, Base, /** @lends Theme.prototype*/{
        /**
         * 组件运行
         */
        render:function(){
            var self = this;
            self._LoaderCss(function(){
                self._addThemeCssName();
                self.fire('render');
            });
        },
        /**
         * 在上传组件运行完毕后执行的方法（对上传组件所有的控制都应该在这个函数内）
         * @param {Uploader} uploader
         */
        afterUploaderRender:function (uploader) {

        },
        /**
         * 获取状态容器
         * @param {KISSY.NodeList} target 文件的对应的dom（一般是li元素）
         * @return {KISSY.NodeList}
         */
        _getStatusWrapper:function (target) {
            return target && target.children('.J_FileStatus') || $('');
        },
        /**
         * 控制文件对应的li元素的显影
         * @param {Boolean} isShow 是否认显示
         * @param {NodeList} target li元素
         * @param {Function} callback 回调
         */
        displayFile:function (isShow, target, callback) {
            var self = this,
                duration = self.get('duration');
            if (!target || !target.length) return false;
            target[isShow && 'fadeIn' || 'fadeOut'](duration, function () {
                callback && callback.call(self);
            });
        },
        /**
         * 文件处于等待上传状态时触发
         */
        _waitingHandler:function (ev) {

        },
        /**
         * 文件处于开始上传状态时触发
         */
        _startHandler:function (ev) {

        },
        /**
         * 文件处于正在上传状态时触发
         */
        _progressHandler:function (ev) {

        },
        /**
         * 文件处于上传成功状态时触发
         */
        _successHandler:function (ev) {

        },
        /**
         * 文件处于上传错误状态时触发
         */
        _errorHandler:function (ev) {

        },
        /**
         * 从路径隐藏域抓取文件，往队列添加文件后触发
         * @param ev
         */
        _restoreHandler:function (ev) {

        },
        /**
         * uploader实例化后执行
         */
        _UploaderRender:function (callback) {
            var self = this;
            self._initQueue();
            //加载插件
            self._loadPlugins(callback);
        },
        /**
         * 将主题名写入到队列和按钮目标容器，作为主题css样式起始
         */
        _addThemeCssName:function () {
            var self = this, name = self.get('name'),
                $queueTarget = $(self.get('queueTarget')),
                $btn = $(self.get('buttonTarget'));
            if (name == EMPTY) return false;
            if($queueTarget.length)  $queueTarget.addClass(name + classSuffix.QUEUE);
            $btn.addClass(name + classSuffix.BUTTON);
        },
        /**
         * 初始化队列
         * @return {Queue}
         */
        _initQueue:function () {
            var self = this, queue = self.get('queue');
            queue.set('fnAdd',function(index, file){
                return self._addCallback(index, file);
            });
            queue.set('theme', self);
            queue.on('add', self._addFileHandler, self);
            queue.on('remove', self._removeFileHandler, self);
            queue.on('statusChange', function (ev) {
                self._setStatusVisibility(ev);
            });
            return queue;
        },
        /**
         * 加载css文件
         */
        _LoaderCss:function (callback) {
            var self = this,
                cssUrl = self.get('cssUrl');
            //加载css文件
            if (cssUrl == EMPTY){
                callback.call(self);
                return false;
            }
            S.use(cssUrl, function () {
                S.log(cssUrl + '加载成功！');
                callback.call(self);
            });
        },
        /**
         * 向队列添加完文件后触发的回调函数（在add事件前触发）
         * @param {Number} index 文件索引值
         * @param {Object} file 文件数据
         * @return {Object} file
         */
        _addCallback:function (index, file) {
            var self = this,
                queue = self.get('queue'),
                $target = self._appendFileDom(file);
            //将状态层容器写入到file数据
            queue.updateFile(index, {
                target:$target,
                statusWrapper:self._getStatusWrapper($target)
            });
            //更换文件状态为等待
            queue.fileStatus(index,'waiting');
            self.displayFile(true, $target);
            //给li下的按钮元素绑定事件
            // TODO 这里的绑定事件应该只是imageUploader这个主题的吧，不应该放在公共的Theme下
            self._bindTriggerEvent(index, file);
            return queue.getFile(index);
        },
        /**
         * 删除队列中的文件后触发的监听器
         */
        _removeFileHandler:function (ev) {
            var self = this,
                file = ev.file;
            self.displayFile(false, file.target);
        },
        /**
         * 给删除、上传、取消等按钮元素绑定事件
         * TODO 这个是不是也应该放在imageUploader里面呢？
         * @param {Number} index 文件索引值
         * @param {Object} 文件数据
         */
        _bindTriggerEvent:function (index, file) {
            var self = this,
                queue = self.get('queue'),
                uploader = self.get('uploader'),
                //文件id
                fileId = file.id,
                //上传链接
                $upload = $('.J_Upload_' + fileId),
                //取消链接
                $cancel = $('.J_Cancel_' + fileId),
                //删除链接
                $del = $(".J_Del_" + fileId);
            //点击上传
            $upload.on('click', function (ev) {
                ev.preventDefault();
                if (!S.isObject(uploader)) return false;
                uploader.upload(index);
            });
            //点击取消
            $cancel.on('click', function (ev) {
                ev.preventDefault();
                uploader.cancel(index);
            });
            //点击删除
            $del.on('click', function (ev) {
                ev.preventDefault();
                //删除队列中的文件
                queue.remove(fileId);
            });
        },
        /**
         * 设置状态层的可见性
         * @param ev
         */
        _setStatusVisibility:function (ev) {
            var $statusWrapper = ev.file.statusWrapper, $status,
                file = ev.file, status = file.status;
            if (!$statusWrapper || !$statusWrapper.length) {
                S.log('状态容器层不存在！');
                return false;
            }
            $status = $statusWrapper.children('.status');
            $status.hide();
            $statusWrapper.children('.' + status + '-status').show();

            var $target = file.target;
            var statuses = ['waiting','start','uploading','progress','error','success'];
            S.each(statuses,function(status){
                $target.removeClass(status);
            });
            $target.addClass(status);
        },
        /**
         * 当队列添加完文件数据后向队列容器插入文件信息DOM结构
         * @param {Object} fileData 文件数据
         * @return {KISSY.NodeList}
         */
        _appendFileDom:function (fileData) {
            var self = this, tpl = self.get('fileTpl'),
                $target = $(self.get('queueTarget')),
                hFile;
            if (!$target.length) return false;
            hFile = S.substitute(tpl, fileData);
            return $(hFile).hide().appendTo($target).data('data-file', fileData);
        },
        /**
         * 根据插件配置加载插件
         */
        _loadPlugins:function(callback){
            var self = this,
                plugins = self.get('plugins'),
                oPlugin = self.get('oPlugin'),
                //模块路径前缀
                modPrefix = 'gallery/form/1.3/uploader/plugins/',
                mods = [];
            if(!plugins.length){
                callback && callback.call(self,oPlugin);
                return false;
            }
            //拼接模块路径
            S.each(plugins,function(plugin){
                mods.push(modPrefix+plugin+'/' +plugin);
            });
            S.use(mods.join(','),function(){
                 S.each(arguments,function(arg,i){
                     // 类排除S
                     if(i>=1) oPlugin[plugins[i-1]] = arg;
                 });
                self.set('oPlugin',oPlugin);
                callback && callback.call(self,oPlugin);
            })
        }
    }, {ATTRS:/** @lends Theme.prototype*/{
        /**
         *  主题名
         * @type String
         * @default ""
         */
        name:{value:EMPTY},
        /**
         * css模块路径
         * @type String
         * @default ""
         */
        cssUrl:{value:EMPTY},
        /**
         * 队列使用的模板
         * @type String
         * @default ""
         */
        fileTpl:{value:EMPTY },
        /**
         * 需要加载的插件，需要手动实例化
         * @type Array
         * @default []
         */
        plugins:{value:[]},
        /**
         * 插件类集合
         * @type Array
         * @default []
         */
        oPlugin:{value:{}},
        /**
         * 队列目标元素（一般是ul），队列的实例化过程在Theme中
         * @type String
         * @default ""
         */
        queueTarget:{value:EMPTY},
        /**
         * 动画速度
         * @type Number
         * @default 0.3
         */
        duration:{value:0.3},
        /**
         * Queue（上传队列）实例
         * @type Queue
         * @default ""
         */
        queue:{value:EMPTY},
        /**
         * Uploader 上传组件实例
         * @type Uploader
         * @default ""
         */
        uploader:{value:EMPTY},
        /**
         * Button 按钮实例（_init()下并不存在）
         * @type Button
         * @default ""
         */
        button:{value:EMPTY},
        /**
         * Auth（上传验证）实例
         * @type Auth
         * @default ""
         */
        auth:{value:EMPTY}
    }});
    return Theme;
}, {requires:['node', 'base']});