import React, { Component } from "react";
import styles from "../index.less";
import $ from 'jquery';
import { windowEventHandler,setFontColorSize } from '@utils/tools';

class AssistName extends Component {
	constructor(props) {
		super(props);
		this.state = {

		};
		this.$assistName = React.createRef();
		this.splitName = this.splitName.bind(this);
	}
	splitName(name){
		let wid = this.props.winWidth;
		if(name.length>15 && wid>1150){
			let tmpStr = name.substr(0,15)
			return tmpStr+'...'
		}else{
			return name
		}
	}
	render() {
		const { winWidth, name, getInfomation } = this.props;
		return (
				<span className={`${styles.assistName} ${setFontColorSize(2)}`} style={{ width: winWidth < 1150 ? '120px' : 'auto' }} ref={this.$assistName}>
					<span className={styles.tagSpan} title={name}>
						{name&&this.splitName(name)}：
            <span className={styles.imgInfo} title='点击i图标可查看详细说明' onClick={() => getInfomation({ name: name, position: 1, type: 6 })}></span>
					</span>
				</span>
		);
	}
}

export default AssistName;
