define("applist", [
    "utils", 
    "modal", 
    "scroll", 
    "appdesigner/constants", 
    'i18n/lang',
    "dropdown"
], function (_u, modal, Scroll, constants, lang) {
    var tmpl = '\
<div class="apps-main">\
    <header>\
        <h2>'+ constants.MOBILE_APP_CENTER + '<span class="apps-count"></span></h2>\
        <div class="apps-filter">\
            <div class="classify">\
                <span class="form-control ellipsis" data-dropdown="category">'+ constants.TYPES + '</span>\
                <div class="ad-dropdown" data-rel="category"><ul class="app-classifies ad-dropdown-menu"></ul></div>\
            </div>\
            <div class="status">\
                <span class="form-control ellipsis" data-dropdown="status">'+ constants.STATUS + '</span>\
                <div class="ad-dropdown" data-rel="status"><ul class="ad-dropdown-menu"><li class="ad-dropdown-menu-item selected" data-text="'+ constants.STATUS + '">' + constants.NO_LIMIT + '</li><li class="ad-dropdown-menu-item" data-value="1">' + constants.PUBLISHED + '</li><li class="ad-dropdown-menu-item" data-value="0">' + constants.UNPUBLISHED + '</li></ul></div>\
            </div>\
            <div class="search">\
                <input type="text" placeholder="Search..." />\
                <a href="javascript:;" class="clean-icon"><i class="iconfont icon-del fa-normal-1x"></i></a>\
                <a href="javascript:;" class="search-icon"><i class="iconfont icon-search fa-normal-2x"></i></a>\
            </div>\
        </div>\
    </header>\
    <div class="apps-content">\
        <div class="apps"></div>\
        <div class="loading">\
            <span class="icon-0"></span>\
        </div>\
    </div>\
</div>';
    var appTmpl = '\
<div class="app-card" data-id={{id}}>\
    <div class="app-info">\
        <h4 class="ellipsis" title="{{appname}}">{{appname}}</h4>\
        <p class="ellipsis">{{descriptions || "'+ constants.NO_DESC + '"}}</p>\
        <div class="tags">\
            <span class="classify">{{category.text || "'+ constants.NO_TYPES + '"}}</span>\
            <i class="iconfont icon-cloud-publish {{ispublish ? "active" : ""}}"></i>\
        </div>\
    </div>\
    <div class="app-preview"></div>\
</div>';

    var applist = {
        el: ".apps-main",
        result: null,
        condition: {
            searchText: "",
            status: "",
            category: ""
        },
        mappings: null,
        ids: [],
        imgs: [],
        currAppid: -1,
        getList: function () {
            var vm = this;

            return _u.api("app", {
                action: 'applist',
                data: { 
                    layout: "card",
                }
            }, function (r) {
                var result = r.data;
                var mappings = {};
                var ids = [];

                result.items = result.items.map(function(app) {
                    app.appname = lang.parse(app.appname);
                    app.descriptions = lang.parse(app.descriptions);
                    app.pinyin = app.pinyin.split(",").map(lang.parse).join(",");

                    return app;
                });

                result.items.forEach(function (app) {
                    mappings[app.id] = app;
                    ids.push(app.id);
                });

                vm.mappings = mappings;
                vm.result = result;
                vm.ids = ids;
            });
        },
        getPreviewImg: function () {
            return _u.api("app", {
                action: "getPreviewImg",
                type: "post",
                data: { 
                    appids: this.ids.join(","),
                    count: 1
                }
            });
        },
        bindEvent: function () {
            var vm = this;
            var $el = $(this.el);

            $el.on("click", ".app-card", function () {
                var id = $(this).data("id");

                location.replace('/mobilemode/admin/appDesigner.jsp?appid=' + id);
            }).on("click", "[data-dropdown]", function (e) {
                var $dropdown = $(this).siblings(".ad-dropdown"),
                    zIndex = false;

                if ($dropdown.hasClass("show")) {
                    $dropdown.removeClass("show");
                } else {
                    $el.find(".ad-dropdown").removeClass("show");
                    $dropdown.addClass("show");
                    zIndex = true;
                }
                $el.find(".apps-filter").toggleClass("active", zIndex);
                e.stopPropagation();
            }).on("click", ".ad-dropdown-menu-item", function () {
                var id = $(this).data("text"),
                    text = $(this).html(),
                    value = $(this).data("value"),
                    $dropdown = $(this).parents(".ad-dropdown");

                if ($(this).hasClass("selected")) return;

                text = text === constants.NO_LIMIT ? id : $(this).html();
                $dropdown.toggleClass("show").siblings(".form-control").html(text);

                if (id == constants.TYPES || id == constants.STATUS) {
                    id = "";
                }

                vm.condition[$dropdown.data("rel")] = value != undefined ? value : id;
                vm.renderList(vm.filter());
                $(this).addClass("selected").siblings(".selected").removeClass("selected");
            }).on("click", function () {
                $(this).find(".ad-dropdown").removeClass("show");
                $(this).find(".apps-filter").removeClass("active");
            });

            $el.find(".search").on("input", "input", function () {
                var $input = $(this),
                    $clean = $input.siblings(".clean-icon");
                var value = $input.val();

                $clean.toggleClass("visible", !!value);
                vm.condition.searchText = value;
                vm.renderList(vm.filter());
            }).on("click", ".clean-icon", function () {
                var $clean = $(this);
                var $input = $clean.siblings("input");

                $clean.removeClass("visible");
                $input.val("").focus();
                vm.condition.searchText = "";
                vm.renderList(vm.filter());
            });
        },
        filter: function () {
            if (!this.result) return;

            var condition = this.condition;
            var pattern = new RegExp('.*' + condition.searchText.split('').join('.*') + '.*');

            return this.result.items.filter(function (app) {
                var pys = app.pinyin.split(",");
                var pymatch = pys[0].match(pattern) || pys[1].match(pattern); // 0 拼音 1 拼音首字母缩写

                return (!!~app.appname.toLowerCase().indexOf(condition.searchText.toLowerCase()) || !!pymatch) && // 搜索匹配
                    (!condition.category || condition.category == app.category.id) && // 分类匹配
                    (condition.status === "" || condition.status == app.ispublish); // 发布状态匹配
            });
        },
        renderList: function (list) {
            var tmp = _u.tempEngine(appTmpl, list);
            var $el = $(this.el),
                $apps = $el.find(".apps");

            $apps.html(tmp).find("[data-id=" + this.currAppid + "]").addClass("active");
            Scroll($apps, true);
            this.setImg();

            return this;
        },
        renderCategory: function (classifies) {
            var tmp = "";

            classifies.unshift({
                id: constants.TYPES,
                text: constants.NO_LIMIT
            });
            tmp = classifies.reduce(function (prev, classify, index) {
                return prev + "<li class='ad-dropdown-menu-item" + (!index && " selected" || "") + "' data-text='" + classify.id + "'>" + classify.text + "</li>";
            }, tmp);
            $(this.el).find(".app-classifies").html(tmp);
        },
        setImg: function(){
            var vm = this;
            var $el = $(vm.el);
            vm.ids.forEach(function(id) {
                var previewImg = vm.imgs[id];

                if (!previewImg) return;

                var $card = $el.find("[data-id=" + id + "]");

                $card.find(".app-preview").html("<img src='" + previewImg + "' />");
            });
        },
        rendePreviewImg: function() {
            var vm = this;

            this.getPreviewImg().then(function(res) {
                vm.imgs = res.data;
                vm.setImg();
            });
        },
        render: function () {
            var vm = this, appid = this.currAppid;

            Scroll($(this.el).find('.ad-dropdown-menu'), true);

            this.getList().then(function (r) {
                var result = r.data;
                var $el = $(vm.el);

                $el.find('.loading').hide();
                vm.renderList(result.items, appid).bindEvent();
                vm.renderCategory(result.classifies);
                vm.rendePreviewImg();
                $el.find(".apps-count").html("&nbsp;(" + result.items.length + ")");
                $el.find(".search").find("input").focus();
            });
        }
    };

    return {
        open: function (appid) {
            var body = document.body;

            applist.currAppid = appid;

            modal.open({
                title: constants.OPEN_APP,
                content: tmpl,
                area: ["1200px", body.offsetHeight * 0.8 + "px"],
                btn: false
            }, function () {
                applist.render();
            },function () {
                applist.condition.searchText = '';
            });
        }
    };
});