<template>
	<div class="ibox" style="margin-bottom:20px;">
		<div class="ibox-content" id="p_param" style="padding:5px;">
			<div class="ptabhelpr">拖拽维度到此处作为筛选条件</div>
			<template v-for="(p) in pageInfo.params">
				<span :key="p.id" class="pppp">
					<span title="筛选" @click="paramFilter(p.id, p.type, p.name)" class="text">{{p.name}}({{p.valStrs&&p.valStrs.length>0?p.valStrs.join(","):"无"}})</span>
					<button class="btn btn-default btn-xs" title="删除" @click.stop="deleteParam(p.id)"><i class="fa fa-remove"></i></button>
				</span>
			</template>
		</div>
	</div>
</template>

<script>
	import {ajax} from '@/common/biConfig'
	import $ from 'jquery'
	import {findParamById} from '@/view/bireport/bireportUtils'

	export default {
	    data(){
			
		},
		props:{
			pageInfo:{
				type:Object,
				required:true
			}
		},
		mounted(){
			this.paramDrop();
		},
		computed: {
		},
		methods: {	
			/**
			 * 参数接受拖拽事件
			 */
			paramDrop(){
				const ts = this;
				const pageInfo = ts.pageInfo;
				$("#p_param").droppable({
					accept:"#datasettree .jstree-node",
					tolerance:"pointer",
					over:function(e,ui){
						var ref = $("#datasettree").jstree(true);
						var node = ref.get_node(ui.draggable[0]);
						var tp = node.li_attr.col_type;
						//对维度拖拽设置图标
						if(tp == 1 ){
							$(ui.helper[0]).find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok");
							$(this).css("border", "1px solid #ff0000");
						}
					},
					out:function(e,ui){
						$(ui.helper[0]).find("span").removeClass("glyphicon-ok").addClass("glyphicon-remove");
						$(this).css("border", "1px solid #d3d3d3");
					},
					drop:function(e,ui){
						$(this).css("border", "1px solid #d3d3d3");
						var ref = $("#datasettree").jstree(true);
						var node = ref.get_node(ui.draggable[0]);
						var tp = node.li_attr.col_type;
						if(tp == 1){
							if(!pageInfo.params){
								pageInfo.params = [];
							}
							//判断是否存在
							if(findParamById(node.li_attr.col_id, ts.pageInfo.params) != null){
								ts.$notify.error({title: '您已经添加了该参数！',offset: 50});
								return;
							}
							var id = node.li_attr.col_id;
							var p = {"id":id, "name":node.text, "type":node.li_attr.dim_type, "colname":node.li_attr.col_name,"alias":node.li_attr.alias, "tname":node.li_attr.tname,"cubeId":node.li_attr.cubeId,"valType":node.li_attr.valType,"tableName":node.li_attr.tableName, "tableColKey":node.li_attr.tableColKey,"tableColName":node.li_attr.tableColName,"calc":node.li_attr.calc, "dimord":node.li_attr.dimord, "grouptype":node.li_attr.grouptype,"dateformat":(node.li_attr.dateformat==null?"":node.li_attr.dateformat),dsid:node.li_attr.dsid};
							pageInfo.params.push(p);
							var obj = $(this);
							obj.find("div.ptabhelpr").remove();
							if(obj.find("b").length == 0){
								obj.append("<b>参数： </b>");
							}
							//弹出筛选窗口
							ts.paramFilter(id, p.type, p.name);
						}
					}
				});
			},
			/**
			 * 弹出筛选窗口
			 */
			paramFilter(id, type, name){
				this.$parent.$refs['paramFilterForm'].create(id);
			},
			deleteParam(id){
				$(this.pageInfo.params).each((a,b)=>{
					if(b.id==id){
						this.pageInfo.params.splice(a, 1);
						return false;
					}
				});
				if(this.pageInfo.params.length === 0){
					$("#p_param").html("<div class=\"ptabhelpr\">拖拽维度到此处作为页面参数</div>");
				}
			}
		},
		watch: {
		}
	}
</script>

<style lang="css">
	#p_param .ptabhelpr{
		padding:5px;
		color: #999999;
		font-size: 14px;
	}
	#p_param span.pppp {
		background-color: #FFFFCC;
		border: 1px solid #CACACA;
		display: inline-block;
		padding: 3px;
		text-align: center;
		margin-right:3px;
		border-radius: 3px;
	}
	#p_param span.text {
		cursor:pointer;
	}
	#p_param span.pppp span.text {
		display:-moz-inline-box;  
		white-space:nowrap;
		overflow:hidden;
	}
</style>
