define(['mUtil', "Component", "Form"],function(mUtil, Component, Form) {
	var FCheckbox = function(options) {
		var _fcheckbox = {}, checkClass = "checked", $wevField, $ul, $field,mecid;
		
		Component.super(this, options);
		
		this.type = "FCheckbox";
		this.tpl = this.type + "_html";
		this.css = this.type + "_css";
        this.dataload = true;

		var vm = this.viewModel = {
			form : "",
			field : {
				label : "",//显示名
				name : "", //字段名
				value : "", //字段值
				defaultValue: ""
			},
			items:[], 
			detailtable: {
				isA: false	//是否是明细表字段
			},
			multiselect : false, //默认单选
			vertical :false, //默认水平排版
			required : false,
			readonly : false,
			attrLinkage : {
				triggers: null,
				isEditLayout : false
			}
		};
		
		var d = $.Deferred();
		
		this.dbValueHasSet = false; //是否已设置表单数据值，调用this.setValueByDB()方法后修改此状态
		
		this.beforeMount = function () {
			//主表或明细新增，并且值为空 但默认值不为空时，使用默认值代替赋值
            Form.utils.setDefaultValue(this.pageid, vm);
		};
		
		this.mounted = function(){
		    var that = this;
			$wevField = this.$el.find(".wev-field");
			$field = this.$el.find("input[name='fieldname_" + vm.field.name + "']");
			$ul = this.$el.find("ul");
			mecid = this.id;
			if(!vm.readonly){
				$ul.on('click', "li", function () {
					var ischecked = $(this).hasClass(checkClass);

					!vm.multiselect && $(this).siblings("li").removeClass(checkClass);
					$(this).toggleClass(checkClass, !ischecked);
					$field.val(_fcheckbox.getValue()).triggerHandler("change");
				});
			}
			
			if(vm.items === true){
				var actionUrl = mUtil.getActionUrl(this.type, {action:"getOptionDatas", "mec_id": this.id, detailtable: vm.detailtable.id}, this.pageid);
				mUtil.getJSON(actionUrl, function (result){
					var datas = result.datas;
					var html = "";
					var values = vm.field.value.split(",");
					$(datas).each(function (index, val) {
						var checked = (values.indexOf(val.value) != -1) ? "class=\"checked\"" : "";
						html += "<li "+checked+" data-value=\""+val.value+"\">"
						    +(vm.vertical ? "<i class=\"wev-css-icon wev-multi-check\"></i>" : "")
						    +"<div>"+val.name+"</div></li>";
					});
					$ul.html(html);
				}).then(function(){d.resolve();});
			}else{
				d.resolve();
			}
			
			if(vm.field.needParseSqlValue){
			    //解析默认值，默认值sql
	            return Form.utils.parseDefaultSqlValue(vm.field.defaultValue, this.pageid, function(result){
	                vm.field.value = result;
	                //设置默认值
	                vm.field.value && that.setValue(vm.field.value, true);
	            });
			}
			vm.attrLinkage.triggers && that.bindAttrLinkage(vm.attrLinkage.triggers,vm.attrLinkage.isEditLayout);
		};
		
		this.initComponentData = function () {
			return d;
		};
		
		this.getData = function(){
			return mUtil.parseJSON("fieldname_" + vm.field.name, _fcheckbox.getValue());
		};

		this.getShowData = function () {
			var showData = {};
			showData[vm.field.name] = this.getValue();
			showData[vm.field.name + "_showvalue"] = this.text();
			return showData;
		};
		
		this.reset = function(){
			_fcheckbox.setValue(vm.field.value);
			$wevField.removeClass("wev-required-remind");
		};
		
		this.checkRequired = function(){
			var required = vm.required && !this.$el.find("." + checkClass).size();
			
			//当显示名称为空 显示类型为必填时
			var fieldLabel = vm.field.label || mUtil.getLabel(513752, "单多选");

			$wevField.toggleClass("wev-required-remind", required);

			return required && fieldLabel;
		};
		
		this.setRequired = function (required) {
			vm.required = required;
			$wevField.toggleClass("wev-field-required", required);
			!required && $wevField.removeClass("wev-required-remind");
		};
		
		this.text = function(){
			var texts = [];

			this.$el.find("." + checkClass).each(function () {
				texts.push($(this).children("div").text());
			});

			return texts.join(",");
		};
		
		this.getValue = function(){
			return _fcheckbox.getValue();
		};
		
		this.setValueByDB = function(value){
			this.dbValueHasSet = true;
			if(value || !vm.field.value) {
                vm.field.value = value;
                this.setValue(value);
            }
		};
		
		this.setValue = function(value){
			_fcheckbox.setValue(value);
		};

		/**
		 * 属性联动
		 * @param linkages 属性联动配置
		 * @param isEditLayout  是否为编辑布局
		 */
		this.bindAttrLinkage = function(linkages,isEditLayout){
			vm.attrLinkage.triggers = linkages;
			vm.attrLinkage.isEditLayout = isEditLayout;
			if (!vm.multiselect){
				linkages && $field.on("change",function () {
					require(['attrLinkageHelper'],function(attrLinkageHelper) {
						attrLinkageHelper.trigger(linkages,mecid);
					});
				});
				if ($field.val()) {
					vm.detailtable.isA && setTimeout(function () {
						$field.triggerHandler("change")
					}, 500) || $field.triggerHandler("change");
				}
			} else {
				return;
			}
		}
		
		_fcheckbox.getValue = function(){
			var values = [];

			this.$el.find("." + checkClass).each(function(){
				values.push($(this).attr("data-value"));
			});
			
			return values.join(",");
		};
		
		_fcheckbox.setValue = function(value){
			var that = this;
			$ul.children("li").removeClass(checkClass);
			String(value).split(",").forEach(function (v) {
				v && that.$el.find("[data-value='" + v + "']").addClass(checkClass);
			});
			$field.val(value).triggerHandler("change");
			this.dbValueHasSet && mUtil.trigger('dataload', that.pageid, that.id);
		};
		
		for (var key in _fcheckbox) {
			if (mUtil.isFunction(_fcheckbox[key])) {
				_fcheckbox[key] = _fcheckbox[key].bind(this);
			}
		}
    };
    return Component.init(FCheckbox);
});