define("op/plugin", ['openPlatform', 'modal', 'jquery'], function (op, modal) {
    var template = '\
{@each data as classify}\
<section id="p-${classify.categoryName}" class="p-classify">\
    <label><span>${classify.categoryText}</span></label>\
    <ul>\
        {@each classify.items as plugin}\
        <li class="p-row" mec_init="false" mec_type="${plugin.id}" data-id="${plugin.id}" {@if plugin.exportable == 1}data-export="1"{@/if} data-category="${classify.categoryName}">\
            {@if plugin.conflict}\
            <div class="icon-right-corner"><i data-oldv="${plugin.oldVersion}" data-newv="${plugin.newVersion}" class="iconfont icon-warn" style="color:#FFAD14;"></i></div>\
            {@/if}\
            <i class="icon-plugin-default icon-plugin-${plugin.id} fa-large-2x"></i>\
            <span>${plugin.text}</span>\
        </li>\
        {@/each}\
    </ul>\
</section>\
{@/each}\
';
	function renderEditorInRunMode(type) {
		op.callOpApi("getPluginDemoHtml", { "id": type }, function (res) {
			var data = res.data;
			var cfg = {
				page: {
					html: { code: data.html },
					css: {
						external: [
							"/mobilemode/mobile/dist/css/mobile.css"
						],
						code: data.css
					},
					javascript: {
						external: [
							"/mobilemode/mobile/dist/js/lib/require/require.min_wev8.js",
							"/mobilemode/mobile/dist/js/main_demo/main.js"
						],
						code: data.script
					}
				},
				layout: op.getEditorDefCfg().layout
			};
			op.initEditor(op.RUN_MODE, cfg);
		});
	}

    return {
        list: {
        	activeDataId: null,
            initialized: false,
            module: "designer",
            action: "getComponents",
            template: template,
            afterRender: function ($panel, data) {
				var that = this;
				
				listData = data;
            	$panel.off("click", ".p-row");
                $panel.on("click", ".p-row", function (e) {
                    var mec_type = $(this).attr("mec_type");
					var category = $(this).attr("data-category");
					var isCustom = category === "custom";
					var canExport = $(this).attr("data-export") == "1";
					
					op.toggleDelIcon(isCustom);
					op.toggleSaveIcon(isCustom);
					op.toggleExportIcon(canExport);
					
			        window.location.hash = op_changeURLHash('refId', mec_type);
					$(".p-row", e.delegateTarget).removeClass("active");
					$(this).addClass("active");
					that.activeDataId = mec_type;
					
					renderEditorInRunMode(mec_type);
    
                    op.callOpApi("getPluginHtml", { "id": mec_type }, function (res) {
						var data = res.data;
                        var cfg = {
                            page: {
                                html: { code: data.html },
                                css: { code: data.css },
                                javascript: { code: data.script }
                            },
                            layout: {
                                editor: {
                                    resize: maximization
                                }
                            }
                        };
                        if(category != "custom"){
                        	cfg.layout.editor.readonly = ["javascript", "html", "css"];
                        }
                        op.initEditor(op.DEV_MODE, cfg);
                    });
                });
                require(['jquery.hover'], function () {
                    $panel.hoverIntent({
                        interval: 300,
                        selector: '.icon-right-corner>.icon-warn',
                        over: function () {
                            var that = $(this),
                                oldVersion = that.data("oldv"),
                                newVersion = that.data("newv"),
                                labelText = SystemEnv.getHtmlNoteName(5338)||"",//插件当前版本(V#oldVersion#)与最新导入记录版本(V#newVersion#)不一致，如有问题，请点击上方加号按钮导入新版本插件
                                content = labelText.replace("#oldVersion#", oldVersion).replace("#newVersion#", newVersion);
                            
                            modal.tips(content, that);
                        },
                        out: function () {
                            modal.closeAll('tips'); // 鼠标离开关闭tips
                        }
                    });
                });
            }
        },
        creator: {
        	initialized: false,
        	getPanel: function(){
        		return $("#plugin-create-panel");
        	},
        	init: function(){
        		var $panel = this.getPanel();
        		function checkRequired(){
        			var $parent = $(this).parent();
        			$parent[0].className = "col-m-8";
        			
        			$(".errMsg", $panel).hide();
        			
        			var v = $.trim($(this).val());
        			if(v == ""){
        				$parent.addClass("required");
        			}else{
        				$parent.removeClass("required");
        			}
        		}
        		$("input[name='id']", $panel).on("input", checkRequired).on("change", function(){
        			var v = $.trim($(this).val());
        			if(v == ""){
        				return;
        			}
        			var $parent = $(this).parent();
        			$parent.addClass("checking");
        			$("form", $panel).data("checkStatus","false");
        			op.callOpApi("checkPluginExist", { "id": v }, function (res) {
						var data = res.data;
						
        				$parent.removeClass("checking");
        				if(data.exist == "1"){
        					$parent.addClass("check-not-pass");
        					$(".errMsg", $panel).html((SystemEnv.getHtmlNoteName(5341)||"").replace("#ID#", v)).show();//已存在标识为 #ID# 的插件，请换一个标识。
        				}else{
        					$parent.addClass("check-pass");
        					$("form", $panel).data("checkStatus","true");
        				}
        			});
        		});
        		$("input[name='text']", $panel).on("input", checkRequired);
        	},
        	onOpen: function(){
        		var $panel = this.getPanel();
        		$("input[name='id']", $panel)[0].focus();
        	},
        	onClose: function(){
        		var $panel = this.getPanel();
        		$("form", $panel).data({"checkStatus":"false"})[0].reset();
        		$(".col-m-8[required]",$panel).removeClass(function(index, cl){
        			return cl.replace("col-m-8", "");
        		}).addClass("required");
        		$(".errMsg", $panel).html("").hide();
        	},
        	onOk: function(index, layero){
        		var $panel = this.getPanel();
        		var $form = $("form", $panel);
        		var $id = $("input[name='id']", $panel);
        		var $text = $("input[name='text']", $panel);
        		var id = $.trim($id.val());
        		var text = $.trim($text.val());
        		if(id == ""){
        			$(".errMsg", $panel).html(SystemEnv.getHtmlNoteName(5341)).show();//插件标识 为必填项，请填写。
        			$id[0].focus();
        			return false;
        		}
        		if(text == ""){
        			$(".errMsg", $panel).html(SystemEnv.getHtmlNoteName(5342)).show();//插件名称 为必填项，请填写。
        			$text[0].focus();
        			return false;
        		}
        		
        		var checkStatus = $form.data("checkStatus");
        		if(checkStatus == "false"){
        			return false;
        		}
        		
        		return op.callOpApi("createPlugin", { "id": id, "text":text },  "post").then(function(){
					return { data: { id: id } };
        		});
        	}
		},
		modal: {
			import: {
				data: {
					text: "",
					file: ""
				},
				onOpen: function (layero) {
					var $text = layero.find("[name='text']");
					var $file = layero.find("[name='file']");
					var data = this.data;

					$text.on("input", function () {
						data.text = this.value.trim();
						layero.find(".errMsg").html("").hide();
					});

					$file.on("change", function () {
						var file = this.files[0];
						var $filename = $(".file-name", layero);
						var filename = file && file.name || "";

						$filename.html(filename).toggle(!!filename);
						data.file = file;
					});
				},
				onOk: function (layero) {
					var data = this.data;
					var formdata = new FormData();

					if(!data.file) {
						modal.warn(SystemEnv.getHtmlNoteName(5339), 2000);//请选择一个插件压缩包
						return false;
					}

					formdata.append("file", data.file, data.file.name);

					return op.callOpApi({
						action: "importPlugin",
						type: "post",
						data: formdata,
						processData: false,
						contentType: false,
						notification: { success: SystemEnv.getHtmlNoteName(5340) }//导入成功
					});
				}
			}
		},
        action: {
        	getPanel: function(){
        		return $("#plugin-panel");
        	},
        	onSave: function(id, settings){
        		var $panel = this.getPanel();
        		var category = $(".p-row[data-id='"+id+"']", $panel).data("category");
        		if(category != "custom"){
        			return;
				}

				settings = $.extend({ 
					action: "modifyPlugin",
					type: "post"
				}, settings);

        		return op.callOpApi(settings).then(function () {
					renderEditorInRunMode(id);
				});
			},
			onSearch: function (val, $panel) {
				if (!listData) return;

				var categories = listData.data;
				var _toggle = function (isshow) {
					$panel.find("[data-id]").toggle(isshow);
					$panel.find(".p-classify").toggle(isshow);
				};

				if (!val) return _toggle(true);

				_toggle(false);
				categories.forEach(function (category) {
					var items = category.items.filter(function (item) {
						var text = item.text.toLowerCase();
						var text_py = item.text_py.toLowerCase();

						return ~text.indexOf(val) || ~text_py.indexOf(val);
					});

					if (!items.length) return;

					items.forEach(function (item) {
						$panel.find("[data-id='" + item.id + "']").show();
					});

					$panel.find("#p-" + category.categoryName).show();
				});
			},
			onDel: function (pid) {
				var deferred = $.Deferred();
				
				modal.initFore9();
				modal.confirm(SystemEnv.getHtmlNoteName(5344), function (index) {//确认删除该插件么?
					op.callOpApi({
						action: "deletePlugin",
						data: { id: pid },
						type: "get",
						notification: { success: SystemEnv.getHtmlNoteName(5345) }//删除成功
					}, function () {
						op.toggleDelIcon(false);
						op.toggleSaveIcon(false);
						op.initEditor(op.RUN_MODE, op.getEditorDefCfg());
						op.initEditor(op.DEV_MODE, op.getEditorDefCfg());
					}).then(function () {
						modal.close(index);
						deferred.resolve();
					});
				});

				return deferred;
			},
			onExport: function(pid){
			    window.open("/api/mobilemode/admin/op/exportPlugin?id="+pid, "_blank");
			}
        }
    };
});