import React, { Component } from 'react';
import style from './index.less';
import del_icon from './img/delete.png'
import diagUp from './img/diagUp.png'
import diagDown from './img/diagDown.png'
import {ConfirmModal, Message} from '@commonComp';
import Notify from '@commonComp/Notify';
import Treat from '@containers/Treat'

class DiagnosticList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            delId: '',
            treatTitle: ''
        }
        this.deleteItem = this.deleteItem.bind(this);
        this.cancel = this.cancel.bind(this);
        this.close = this.close.bind(this);
        this.showTreat = this.showTreat.bind(this);
        this.handleClickDiag = this.handleClickDiag.bind(this);
    }

    componentWillReceiveProps() {
        this.props.getBilling();
    }

    upDiagnostic(index) {
        const { upDiagnostic } = this.props;
        upDiagnostic && upDiagnostic(index)
    }
    downDiagnostic(index) {
        const { downDiagnostic } = this.props;
        downDiagnostic && downDiagnostic(index)
    }
    deleteItem() {
        const { delId } = this.state;
        const { delDiagnostic } = this.props;
        delDiagnostic && delDiagnostic(delId);
        this.setState({
            visible: false,
        })
        Notify.success('删除成功')
    }
    cancel() {
        this.setState({
            visible: false
        })
    }
    close() {
        this.setState({
            visible: false
        })
    }
    handleDeleteItem(id) {
        this.setState({
            visible: true,
            delId: id,
        })
    }
    showTreat(item) {
        const  { showTreat, getTreatResult } = this.props;
        getTreatResult && getTreatResult(item);
        showTreat && showTreat();
        this.setState({
            treatTitle: item.name
        })
    } 
    handleClickDiag(item) {
        const { getTips } = this.props;
        getTips && getTips(item);
    }
    

    render(){
        const { list, treatment } = this.props
        const { visible, treatTitle } = this.state
        const lastIndex = list.length -1;
        return(
                <div className={style['diaglist-wrap']}>
                    {list && (list.length > 0) && list.map((item, index) => {
                        return (<div draggable={true} className={style['diag-box'] + ' clearfix'}  key={item.id} >
                                    {index === 0 ? '' : <span className={style['diag-up']} onClick={() => {this.upDiagnostic(index)}}><img src={diagUp}/></span>}
                                    {list.length === 1 ? '' : index !== 0 ? '' : <span onClick={() => {this.downDiagnostic(index)}} className={style['diag-down']}><img src={diagDown}/></span>}
                                    <span className={style['diag-number']}>{index === 0 ? '主' : index+1}</span>
                                    <span className={style['diag-name']} onClick={()=>{this.handleClickDiag(item)}}>{item.name}<span></span></span> 
                                    {item.type === 1 ? <span className={style['diag-first']}>初诊</span> :<span className={style['diag-second']}> 复诊</span>}
                                    <span className={style['treat']} onClick={() =>{this.showTreat(item)}}>治疗方案</span>
                                    <img className={style['diag-del']} src={del_icon} onClick={()=>{this.handleDeleteItem(item.id)}}/>
                        </div>)
                    })}
                     {treatment&&<Treat title={treatTitle}></Treat>}
                    <ConfirmModal visible={visible} 
                                  okText='删除' 
                                  cancelText='取消' 
                                  confirm={this.deleteItem}  
                                  cancel={this.cancel}
                                  close={this.close}
                                  >
                                  <div className={style['del-msg']}>是否删除该诊断？</div> 
                    </ConfirmModal>
                </div>
               
            
        )
    }
}

export default DiagnosticList;