import React, { PureComponent } from 'react'
import { Row, Col } from 'antd'
import styles from './index.less'
import { splitText } from '../../utils/index'
import uid from 'uid'

export default class Item extends PureComponent {
    state = {
        valueStyle: {
            'padding': '4px 11px',
            'color': '#4A4A4A',
            'fontSize': '14px',
            'lineHeight': '1.5',
            'border': '1px solid #d9d9d9',
            'borderRadius': '4px',
            'transition': 'all 0.3s',
            'wordBreak': 'break-word', // 切分文字
        }
    }

    fnRef = (el) => {
        this.valueRef = el;
    }

    onMouseOver = () => {
        const { valueStyle } = this.state;
        this.setState({
            valueStyle: {
                ...valueStyle,
                borderColor: '#3fa4fc'
            }
        });
    }

    onMouseOut = () => {
        const { valueStyle } = this.state;
        this.setState({
            valueStyle: {
                ...valueStyle,
                borderColor: '#d9d9d9'
            }
        });
    }

    render() {
        const { valueStyle } = this.state;
        const row = {
            'display': 'flex',
            'alignItems': 'center',
            'marginBottom': '10px',
        }

        const keyStyle = {
            'textAlign': 'right'
        }

        return (
            <Row
                className={styles.row}
                style={row}
            >
                <Col
                    span={3}
                    className={styles.keyStyle}
                    style={keyStyle}
                >{this.props.name + '：'}</Col>
                <Col
                    span={21}
                    className={styles.valueStyle}
                    style={valueStyle}
                    ref={this.fnRef}
                    onMouseOver={this.onMouseOver}
                    onMouseOut={this.onMouseOut}
                >{this.props.value ? splitText(this.props.value) : '暂无'}</Col>
            </Row>
        );
    }
}

export function CreateItem(name, value) {
    this.id = uid();
    this.name = name;
    this.value = value;
}