import React, { Component } from 'react';
import style from './index.less';
import up from '@common/images/slide-up.png';
import down from '@common/images/slide-down.png';
import chronicPic from "@common/images/chronic.png";
import className from 'classnames';
import $ from 'jquery';
import config from '@config/index';

class MRAnalyse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            slideUp: false
        }
        this.$content = React.createRef();

        this.slideToggle = this.slideToggle.bind(this);
    }
    slideToggle(){
        const { slideUp } = this.state
        $(this.$content.current).slideToggle(config.slideTime);
        this.setState({
            slideUp: !slideUp
        })
    }
    getDetail() {
        const { MRAnalyseResult } = this.props
        // const result =[
        //     "诊断名称不标准(腹痛待查)",
        //     "现病史缺少症状部位(腹痛)",
        //     "现病史缺少症状缓解情况(腹痛)",
        //     "现病史缺少症状加剧情况(腹痛)"
        // ]
        return MRAnalyseResult.map(item => (
            <p>{item}</p>
        ))
    }
    render() {
        const {slideUp} = this.state
        return <div className={style["tips"]} style={{marginBottom:'15px'}}>
            <div className={className(style["tips-title"],style["chronic"],"clearfix")} onClick={this.slideToggle}>
                <div className={style["tips-name"]}>
                    <img src={chronicPic} />
                    <h2>{'病历书写规范提示'}<span className={style["redTips"]}></span></h2>
                </div>
                <div className={style['toggle-btn']}>
                    <img src={slideUp?down:up} alt="展开/收起"/>
                </div>
            </div>
            <div className={style["content"]} ref={this.$content}>
                {this.getDetail()}
            </div>
        </div>
    }
}

export default MRAnalyse;