import React from 'react';
import Circle from '@beisen-phoenix/icon/lib/circle';
import ToolTip from '@beisen-phoenix/tooltip';
import { $M4, $M5 } from '@beisen-phoenix/style-token';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('lookup');
import './tag.scss'
interface TagProps {
  onClear?: Function;
  item: {value?: string | number, key?: string | number,label?: string, name?: string, text?: string};   //值属性做了兼容处理
  extraCls?: string
}

export default class Tag extends React.PureComponent<TagProps, any> {
  private tagSpanRef: React.RefObject<HTMLSpanElement> = React.createRef();

  state = {
    hover: false
  };

  onMouseEnter = () => {
    this.setState({
      hover: true
    });
  };

  onMouseLeave = () => {
    this.setState({
      hover: false
    });
  };

  render() {
    const { onClear, item, extraCls } = this.props;
    const { hover } = this.state;
    const { label, name, text } = item;

    const TempCommponent = <span className={classes({element: 'tagLabel'})} ref={this.tagSpanRef}>{label || name || text || '--'}</span>;
    const cls = classes({element: 'tag',extra: extraCls});
    const clearCls = classes({element: 'tagClear'})
    return (
      <div className={cls}>
        <ToolTip title={label} showOverflowTooltip={true}>
          {TempCommponent}
        </ToolTip>
        <span className={clearCls}>
          <Circle
            color={hover ? $M4 : $M5}
            onClick={e => {
              onClear && onClear(item);
              ``;
              e.stopPropagation && e.stopPropagation();
            }}
            onMouseEnter={this.onMouseEnter}
            onMouseLeave={this.onMouseLeave}
          />
        </span>
      </div>
    );
  }
}