//main模块组件
Vue.component('diy-main', {
	props : ['data','insertdata','currentid'],
	data : function() {
		return {
			xqdata : '',
			main_html : '',
			tempids:[]
		}
	},
	template : '<div class="drag ui-sortable" id="sortable" v-html="main_html"></div>',
	created:function(){
		//渲染前追加
	},
	mounted : function() {
		//前置操作
	},
	methods : {
		addData: function(){
			this.initsorthtml();//重新实例化模板页面，保证页面sort排序
			this.main_html += '<div class="diy-conitem" id="xq'+this.xqdata.id+'">'; 
			this.main_html += this.insertTemplate();
			this.main_html += this.insertAction();
			this.main_html += '</div>';
			var that = this;
			this.$nextTick(function () {
				that.changeAction();
				UpOrDownShow();
			});
		},
		initsorthtml:function(){
			this.main_html = $('#sortable').html();
		},
		insertTemplate:function(){
			return $('#temphtml').html();
		},
		insertAction:function(){
			var html = '';
			html += '<div class="diy-conitem-action selected" id="xqaction'+this.xqdata.id+'">'
			html += 	'<div class="diy-conitem-action-btns">'
			html += 		'<a href="javascript:;" onclick="actionUp('+"'"+this.xqdata.id+"'"+',this)" class="diy-conitem-btn diy-Up j-Up">上移</a>'
			html += 		'<a href="javascript:;" onclick="actionDown('+"'"+this.xqdata.id+"'"+',this)" class="diy-conitem-btn diy-Down j-Down">下移</a>'
			html += 		'<a href="javascript:;" onclick="actionEdit('+"'"+this.xqdata.id+"'"+')" class="diy-conitem-btn diy-edit j-edit">编辑</a>'
			html += 		'<a href="javascript:;" onclick="actionDel('+"'"+this.xqdata.id+"'"+',this)" class="diy-conitem-btn diy-del j-del">删除</a>'
			html += 	'</div>'
			html += '</div>'
			return html;
		},
		changeAction:function(){
			//改变当前模板点击状态
			$('.diy-conitem-action').each(function(){
				$(this).removeClass('selected');
			});
			$('#xqaction'+this.currentid).addClass('selected');
		},
		escape2Html:function (str) {
			//转意符换成普通字符
			var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
			return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
		}
	},
	watch:{
		insertdata:{  
			handler:function(){  
				if($.inArray(this.insertdata.id,this.tempids)>=0){
					//模板edit
					var inserthtml = this.insertTemplate();
					if(this.insertdata.data_type==1)inserthtml=this.escape2Html(inserthtml);
					$('#xq'+this.insertdata.id).children(":first").html(inserthtml);
				}else{
					//模板add
					this.xqdata = this.insertdata;//组件内数据赋值
					this.addData();//添加可拖拽模块
					this.tempids.push(this.insertdata.id);//记录模块id
				}
			},  
			deep:true//对象内部的属性监听，也叫深度监听  
		},
		currentid:function(){  
			this.changeAction();
		}
	}
});