import { h, Component, render } from '@/components/preact'

/**
 * 标签的渲染
 */
class Label extends Component{

	constructor(options){
		super(options);
	}

	iconClick(item, selected, disabled, e){
		this.props.ck(item, selected, disabled, true);
		//阻止父组件上的事件冒泡
		e.stopPropagation();
	}

    scrollFunc(e){
        if(e.wheelDeltaX == 0){
            let child = this.labelRef.getElementsByClassName('xm-label-block');
            let sum   = 10;
            for(let i = 0; i < child.length; i++){
                sum += child[i].getBoundingClientRect().width + 5;
            }
            let width = this.labelRef.getBoundingClientRect().width;
            let max   = sum > width ? sum - width : width;
            let left  = this.labelRef.scrollLeft + e.deltaY;
            left < 0   && (left = 0);
            left > max && (left = max);
            this.labelRef.scrollLeft = left;
        }
    }

    componentDidMount(){
        if (this.labelRef.addEventListener) {
            this.labelRef.addEventListener('DOMMouseScroll', this.scrollFunc.bind(this), false);
        }
        if(this.labelRef.attachEvent){
            this.labelRef.attachEvent('onmousewheel', this.scrollFunc.bind(this));
        }
        this.labelRef.onmousewheel = this.scrollFunc.bind(this);
    }

	render({ data, prop, theme, model, sels }) {
		//获取变换属性
		const { name, disabled } = prop;

		//获取配置项
		const label = model.label;
		const type = label.type;
		const conf = label[type];

		//渲染结果
		let html = '';
        let innerHTML = true;

		if(type === 'text'){
			html = sels.map(sel => `${conf.left}${sel[name]}${conf.right}`).join(conf.separator)
		}else if(type === 'block'){
            innerHTML = false;
			//已选择的数据
			let arr = [...sels];

			const style = { backgroundColor: theme.color }
			//显示的个数
			const count = conf.showCount <= 0 ? arr.length : conf.showCount;

			html = arr.splice(0, count).map(sel => {
				const styleProps = { width: conf.showIcon ? 'calc(100% - 20px)' : '100%', }
				const className = ['xm-label-block', sel[disabled] ? 'disabled':''].join(' ');
				return (
					<div class={className} style={ style }>
						<span style={ styleProps }>{ sel[name] }</span>
						{ conf.showIcon && <i class="xm-iconfont xm-icon-close" onClick={ this.iconClick.bind(this, sel, true, sel[disabled]) }></i> }
					</div>
				)
			})

			//剩余没显示的数据
			if(arr.length){
				html.push(
					<div class="xm-label-block" style={ style }>
						+ { arr.length }
					</div>
				)
			}
		}else{
			if(sels.length && conf && conf.template){
				html = conf.template(data, sels);
			}else{
				html = sels.map(sel => sel[name]).join(',')
			}
		}


		return (
			<div class="xm-label">
				<div class="scroll" ref={ ref => this.labelRef = ref }>
					{ innerHTML ?
                        <div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :
                        <div class="label-content">{ html }</div>
                    }
				</div>
			</div>
		)
	}
}

export default Label;
