/**
 *  初始化向导横向向导 自定义控件
 */
(function(KDApi, $){
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function HRWizard (model) {
        this._setModel(model);
    }
	// 主题色全局变量
	var curThemeColor;
	var curActiveColor;
	// 向导div个数
	var divCount;
	// 移动距离
	var movepx = 0;

    // 原型中封装生命周期函数，固定格式
	// init 控件初始化调用，只调用一次
	// update 控件props值变化时调用，用以更新控件
	// destoryed 控件销毁，只调用一次
    HRWizard.prototype = {
        _setModel: function(model) {
            this.model = model;
        },
        init: function(props){
			curThemeColor = getThemeColor(props.themeColor)
			curActiveColor = getActiveColor(props.themeColor)
            initFunc(this.model, props);
        },
        update: function(props){
			curThemeColor = getThemeColor(props.themeColor)
			curActiveColor = getActiveColor(props.themeColor)
			initHtml(this.model, props);
        },
        destoryed: function(){
            // TO DO
        }
    }
	// props
	// 自定义控件数据对象，其中包含以下内容

	// curThemeColor 主题色
	// lock 是否锁定
	// data 数据对象，插件中setData接口设置的数据
	// configItems 控件配置项
	// cardRowData 卡片行数据

    // Other Code
	/*
	* 初始化方法
	*/
	var initFunc = function(model, props) {
		var cssHref = KDApi.getNameSpace(model) + './css/hrwizard.css';
        if($('link[href="' + cssHref + '"]').length === 0){
			// KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
			KDApi.loadFile('./css/hrwizard.css', model, function() {
				initHtml(model,props);
			})
        }
	}
	/*
	* 初始化向导控件内容
	*/
	var initHtml = function(model, props){
		var template = '';
       
		if(props.data['status1'] == 'C'){
			if(props.data['text1'] == props.data['curKey']){
				template = '<div id="hrwizard">' +
							'<div id="left-hover-icon"></div>' +
							'<div id="scrollbox">' +	
								'<div name="hrwizard-div" class="hrwizard-text hrwizard-already-first already already-choose" title="<%= text1 %>">'+
									'<div class="mark-first">'+
										'<img name="a-img" src="'+ KDApi.getNameSpace(model) +'./img/white_already.png" style="vertical-align: middle;">'+
										'1. <%= text1 %>' +
									'</div>'+
								'</div>';
			}else{
				template = '<div id="hrwizard">' +
							'<div id="left-hover-icon"></div>' +
							'<div id="scrollbox">' +	
								'<div name="hrwizard-div" class="hrwizard-text hrwizard-already-first already" title="<%= text1 %>">'+
									'<div class="mark-first">'+
										'<img name="a-img" src="'+ KDApi.getNameSpace(model) +'./img/already.png" style="vertical-align: middle;">'+
										'1. <%= text1 %>' +
									'</div>'+
								'</div>';
			}
			
		}else{
			if(props.data['text1'] == props.data['curKey']){
				template = '<div id="hrwizard">' +
							'<div id="left-hover-icon"></div>' +
							'<div id="scrollbox">' +
								'<div name="hrwizard-div" class="hrwizard-text hrwizard-first choose" title="<%= text1 %>">'+
									'<div class="mark-first">'+
										'1. <%= text1 %>' +
									'</div>'+
								'</div>';
			}else{
				template = '<div id="hrwizard">' +
							'<div id="left-hover-icon"></div>' +
							'<div id="scrollbox">' +
								'<div name="hrwizard-div" class="hrwizard-text hrwizard-first" title="<%= text1 %>">'+
									'<div class="mark-first">'+
										'1. <%= text1 %>' +
									'</div>'+
								'</div>';
			}
			
		}												
		divCount = 2;
		while(props.data && props.data['text' + divCount]){
			if(props.data['status' + divCount] == 'C'){
				if(props.data['text'+ divCount] == props.data['curKey']){
					template += '<div name="hrwizard-div" class="hrwizard-text hrwizard-already-default already already-choose" title="<%= text'+ divCount +' %>">' +
								'<div class="mark">'+
									'<img name="a-img" src="'+ KDApi.getNameSpace(model) +'./img/white_already.png" style="vertical-align: middle;">' +
									divCount+'. <%= text'+ divCount +' %>' +
								'</div>'+
							'</div>';
				}else{
					template += '<div name="hrwizard-div" class="hrwizard-text hrwizard-already-default already" title="<%= text'+ divCount +' %>">' +
								'<div class="mark">'+
									'<img name="a-img" src="'+ KDApi.getNameSpace(model) +'./img/already.png" style="vertical-align: middle;">' +
									divCount+'. <%= text'+ divCount +' %>' +
								'</div>'+
							'</div>';
				}
					
			}else{
				if(props.data['text'+ divCount] == props.data['curKey']){
					template += '<div name="hrwizard-div" class="hrwizard-text hrwizard-default choose" title="<%= text'+ divCount +' %>">' +
								'<div class="mark">'+
									divCount+'. <%= text'+ divCount +' %>' +
								'</div>'+
							'</div>';
				}else{
					template += '<div name="hrwizard-div" class="hrwizard-text hrwizard-default" title="<%= text'+ divCount +' %>">' +
								'<div class="mark">'+
									divCount+'. <%= text'+ divCount +' %>' +
								'</div>'+
							'</div>';
				}
				
			}
			divCount++;
		}
		template += '</div>' +
					'<div id="right-hover-icon"></div>' +
					'</div>';
		// 通过模版引擎art-template获取html字符串，接收两个参数
		// tpl: String 模版字符串，必须
		// data: Object 模版所需数据对象，必须
		var result = KDApi.getHTMLStringBytemplate(template, props.data);
        model.dom.innerHTML = result;
		// 控制左右移动按钮
		if(divCount-1 < Math.floor($('#scrollbox', model.dom)[0].clientWidth/249)){
			$('#left-hover-icon', model.dom).css('background','white');
			$('#right-hover-icon', model.dom).css('background','white');
		}else{
			$('.hrwizard-text', model.dom).css({
				'transform': 'translateX(0.1px)'
			})
		}
		// 是否为完成
		$('.choose', model.dom).css('background-color',curThemeColor);		
		//初始化事件
        initEvent(model, props);
    }

	/*
	* 初始化鼠标事件 #eff3fd #2b87f3
	*/
	var initEvent = function (model, props) {
		// dom 自定义控件挂载的dom元素对象
        $(model.dom).css({
            "overflow":"visible"
        })
		// 左移按钮
		$('#left-hover-icon',model.dom).click(function(){
			if(movepx/249 < 0){
				movepx = movepx + 249;
				$('.hrwizard-text', model.dom).css({
					'transform': 'translateX('+ movepx +'px)'
				})
			}			
		})
		// 右移按钮
		$('#right-hover-icon',model.dom).click(function(){
			var divNum = divCount-1 - Math.floor($('#scrollbox',model.dom)[0].clientWidth/249);
			if(movepx/249 > -divNum && movepx/249<=0){
				movepx = movepx - 249;
				$('.hrwizard-text', model.dom).css({
					'transform': 'translateX('+ movepx +'px)'
				})
			}	
		})
		
		// 步骤点击事件
        $('.hrwizard-text', model.dom).click(function () {
			// invoke 函数，将自定义控件事件发送给平台后端，接收两个参数，eventName 执行事件名称，eventArgs(String|Object) 执行事件所需参数，推荐使用字符串
            model.invoke('click', this.innerText.split('.')[1].substr(1));
			// 已完成的步骤√图标换色
			if($('.already-choose',model.dom).find('img')[0] != undefined){
				$('.already-choose',model.dom).find('img')[0].src = "./isv/kingdee/hr/hrwizard/./img/already.png";
			}
			// 删除内联样式
			$('.hrwizard-text',model.dom).css('background-color','');			
			// 删除其他选中状态
			$('.active', model.dom).css('color','');
			$('.hrwizard-text',model.dom).removeClass('active');
			$('.hrwizard-text',model.dom).removeClass('choose');
			$('.hrwizard-text',model.dom).removeClass('already-choose');			
			// 选中事件
			if($(this).find('img')[0] != undefined){
				$(this).addClass('already-choose');
				$(this,model.dom).find('img')[0].src = "./isv/kingdee/hr/hrwizard/./img/white_already.png";
			}else{
				$(this).addClass('choose');
			}
			// 选中状态		
			$('.choose', model.dom).css('background-color',curThemeColor);
        }).mouseenter(function () {
			if($(this).hasClass('already') || $(this).hasClass('already-choose') || $(this).hasClass('choose')){
				if($(this).hasClass('hrwizard-already-first') || $(this).hasClass('hrwizard-first')){
					$(this).children('div.mark-first').css('background','rgba(0, 0, 0, 0.1)');
				}else{
					$(this).children('div.mark').css('background','rgba(0, 0, 0, 0.1)');
				}
			}else{
				$(this).addClass('active');
				$('.active', model.dom).css('background-color',curActiveColor);
				$('.active', model.dom).css('color',curThemeColor);
			}
        }).mouseleave(function () {
			if($(this).hasClass('already') || $(this).hasClass('already-choose') || $(this).hasClass('choose')){
				if($(this).hasClass('hrwizard-already-first') || $(this).hasClass('hrwizard-first')){
					$(this).children('div.mark-first').css('background','rgba(0, 0, 0, 0)');
				}else{
					$(this).children('div.mark').css('background','rgba(0, 0, 0, 0)');
				}
			}else{
				// 删除内联样式
				$('.active', model.dom).css('background-color','');
				$('.active', model.dom).css('color','');
				//$('.active').removeAttr('style');
				$(this).removeClass('active');
				$('.choose', model.dom).css('background-color',curThemeColor);
			}
        })
	
    }

	/*
	* 将主题色转为对应选中色值
	*/
	function getThemeColor(themeColor) {
		switch (themeColor) {
			case 'blue':
				return '#5582F3';
			case 'green':
				return '#29C392';
			case 'orange':
				return '#FC8555';
			case 'purple':
				return '#6869FB';
			case 'red':
                return '#E94E4F';
			default:
                return '#5582F3';
		}
	}
	
	/*
	* 将主题色转为对应悬浮色值
	*/
	function getActiveColor(themeColor) {
		switch (themeColor) {
			case 'blue':
				return '#eff3fd';
			case 'green':
				return '#e9f9f1';
			case 'orange':
				return '#fff1e6';
			case 'purple':
				return '#f0f1fe';
			case 'red':
                return '#fdf0f1';
			default:
                return '#eff3fd';
		}
	}

    // 你只需知道第一个参数是你接下来要新增控件方案时填的方案id，第二个参数是上面声明的构造函数
    KDApi.register('hrwizard', HRWizard)
})(window.KDApi, jQuery); // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4
