BandTree = Control.subClass({

	items: true,

	init: function(config) {
		config.css = util.combine(config.css, {
			container: null
		});

		this.popmenu = config.popmenu;
		this.firstBand;
		this.selected = {};
		this.buckets = null;
		this.bands = [];
		this.fields = [];
		this.itemIndent = 10;

		Control.call(this, config);
	},

	getContainerTemplate: function() {
		var template = $(BandTree_Template.container.join(""));
		return template;
	},

	createContent: function() {
		if (this.config.items) {
			this.load(this.config.items);
		}
	},

	load: function(itemOptions) {
		this.clear();
		this.createHolder();
		this.createItems(this, this.container, itemOptions);
		this.onBandSelected(this.firstBand);
	},

	createItem: function(container, option) {
		return this.createBucket(container, option);
	},

	createBucket: function(container, option) {
		//1. bucket
		var bucket = $(BandTree_Template.bucket.join(""));
		this.buckets.push(bucket);
		bucket.body = $("#body", bucket);

		//2. bucket click event
		var me = this;
		bucket.click(function() {
			me.onBacketSelected(bucket);
		});

		//3. text
		var text = bucket.text = $("#text", bucket);
		text.html(option.name);

		//4. bands
		var bands = option.children;

		if (bands && bands.length) {
			var max = bands.length;

			for (var i = 0; i < max; i++) {
				var bandOption = bands[i];
				var band = this.createBand(bucket, bandOption, i);

				if (!bucket.firstBand) {
					bucket.firstBand = band;
				}
			}
		}

		container.append(bucket);
		return bucket;
	},

	createBand: function(bucket, option, idx) {
		//1. band
		var band = $(BandTree_Template.band.join(""));
		if (this.firstBand == null) {
			this.firstBand = band;
		}
		band.attr("id", "band_" + idx);
		band.header = $("#header", band);

		band.body = $("#band_body", band);
		band.body.hide();
		band.option = option;

		//2. band click event
		var me = this;
		band.click(function(e) {
			me.onBandSelected(band);
			e.stopPropagation();
		});

		//3. text
		var text = band.text = $("#text", band);
		text.html(option.name);

		//4. fields
		var fields = option.children;
		fields = fields.filter(one =>{
			return one.isshow
		})
		if (fields && fields.length) {
			var max = fields.length;

			for (var i = 0; i < max; i++) {
				var field = fields[i];
				this.createOneField(band.body, field);
			}
		}

		bucket.append(band);
		this.bands.push(band);

		return band;
	},

	createOneField: function(band, option) {
		var field = $(BandTree_Template.field.join(""));
		field.body = $("#body", field);

		var text = field.text = $("#text", field);
		text.html(option.name);

		field.usedFlag = $("#used", field);
		field.option = option;
		field.band = band;

		if (option.isused) {
			field.addClass("field-used");
			field.usedFlag.show();
		}

		if (this.popmenu) {
			this.popmenu.linkTo(field.body, this.createOptionInfoByField(field));
		}

		band.append(field);


		this.fields.push(field);
	},

	createHolder: function() {
		var holder = this.holder = $(BandTree_Template.holder.join(""));
		holder.body = $("#body", holder);
		holder.text = $("#text", holder);
	},

	onBacketSelected: function(bucket) {
		if (!bucket) {
			return;
		}

		this.onBandSelected(bucket.firstBand);
	},

	onBandSelected: function(band) {
		if (!band || this.selected.band == band) {
			return;
		}

		if (this.selected.band) {
			this.changeBandState(this.selected.band, "unselected");
		}

		this.changeBandState(band, "selected");
		this.selected.band = band;
	},

	onFieldSelected: function(band, field) {

	},

	changeBandState: function(band, event) {
		if ("selected" == event) {
			band.body.show();
//			band.arrow.addClass(config.css.openItemArrow);
			return;
		}

		if ("unselected" == event) {
			band.body.hide();
//			item.arrow.removeClass(config.css.openItemArrow);
//			item.arrow.addClass(config.css.itemArrow);
			return;
		}
	},

	findDragElInfo(holder, dragEl) {
		if (!dragEl || !this.bands) {
			return;
		}
		let dragField = $(dragEl);
		let dragFind = this.fields.find(one => {
			return one.is(dragField);
		});
		return this.createOptionInfoByField(dragFind);
	},

	createOptionInfoByField(dragField) {
		if(!dragField || !dragField.option || !dragField.band.prevObject.option){
			return null;
		}
		let bandOption = dragField.band.prevObject.option;
		let fieldOption = dragField.option;
		let defaultExpression =  this.getExpressionSegment(bandOption.name) + "." + this.getExpressionSegment(fieldOption.name);
		let defaultCode =  bandOption.code + "_" + fieldOption.code;
		let option = {
			name: fieldOption.name,
			bandcode: bandOption.code,
			bandcolumn: fieldOption.code,
			expression: defaultExpression,
			code: defaultCode
		};
		return option;
	},

	getExpressionSegment(val) {
		if(val == null) {
			return val;
		}
		return "[" + val + "]";
	},

	findFieldByBand(band, dragEl) {
		if(band == null || dragEl == null){
			return null;
		}
		for (let i = 0; i < band.fields.length; i++) {
			let field = band.fields[i];
			if(field === $(dragEl)) {
				return field;
			}
		}
	},

	getHolder(text, dragEl) {
		this.holder.text.html(text);
		let holder = this.holder.get(0);
		let cloneHolder = holder.cloneNode(true);
		cloneHolder.option = this.findDragElInfo(holder, dragEl);
		return cloneHolder;
	},

	getBand(idx) {
		return this.bands[idx];
	},

	clear: function() {
		this.container.empty();
		this.selected = {};
		this.buckets = [];
	}

});


//*************************************
BandTree_Template = {};

BandTree_Template.container = [
   '<ul class="band-tree"></ul>'
];

BandTree_Template.bucket = [
    '<li class="band-tree-bucket">',
		'<div id="body" class="bucket-header">',
			'<i class="icon iconfont icon-bucket"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
		'</div>',
	'</li>'
];

BandTree_Template.band = [
    '<li class="band-tree-band">',
		'<div id="header" class="band-header">',
			'<i class="icon iconfont icon-band"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
			'<i id="arrow" class="band-arrow icon iconfont icon-arrow-down"></i>',
		'</div>',
		'<div id="band_body" class="band-body">',
		'</div>',
	'</li>'
];

BandTree_Template.field = [
    '<div class="band-tree-field">',
		'<span id="used" class="used-flag iconfont icon-field"></span>',
    	'<div id="body" class="field-body">',
			'<i class="icon iconfont icon-field"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
    	'</div>',
    '</div>'
];

BandTree_Template.item_arrow = [
  	'<i id="icon" class="band-tree-body-arrow iconfont"></i>&nbsp;'
];

BandTree_Template.holder = [
    '<div class="band-tree-holder">',
    	'<div id="body" class="holder-body">',
			'<i class="icon iconfont icon-field"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
    	'</div>',
    '</div>'
];