define(['mUtil', "Component"],function(mUtil, Component) {
	var ProgressBar = function(options) {
		var _progressBar = {};
		
		Component.super(this, options);
		
		this.type = "ProgressBar";
		this.tpl = this.type + "_html";

		var vm = this.viewModel = {
			bgcolor : "#DDD",
			fontColor : "#FFF",
			lineHeight : "22px",
			fontSize : "12px",
			showValue : true
		};
		
		this.beforeMount = function(){
			var value = Number(vm.value), 
				percentageWidth = 0;

            //四舍五入保留小数
            function toRound(value, num){
                var n = Number(num);
                if(isNaN(n)){
                    n = 2;
                }
                value = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
                return value.toFixed(n);
            }

			vm.fontSize = (parseFloat(vm.fontSize) || 12) + "px";
			vm.lineHeight = (parseFloat(vm.lineHeight) || 22) + "px";
			
			if(value < 0 || isNaN(value)){
				value = 0;
			} else if(value > 100) {
				percentageWidth = 100;
			} else {
				percentageWidth = value;
			}

			if(~vm.value.toString().indexOf(".")){
				value = toRound(value, 2);
			}

			vm.percentageWidth = percentageWidth;
			vm.percentageFace = vm.showValue ? (value + "%") : "";
			vm.value = value;

			// areaColor可能为单个color eg. #aaa
			if (!mUtil.isArray(vm.areaColor)) return;
			
			vm.areaColor.every(function (colorItem) {
				var startValue = Number(colorItem.startPercent);
				var endValue = Number(colorItem.endPercent);

				if (startValue <= value && endValue >= value) {
					vm.areaColor = colorItem.areaColor;
					return false;
				}
				return true;
			});
		};
		
		this.mounted = function(){
		};

	};
	
    return Component.init(ProgressBar);
});