import React from 'react';
import store from '@store';
import styles from './index.less';
import ReactDom from "react-dom";
import sort from "./img/sort.png"
import close from "./img/close.png";
import PreviewBody from '@components/PreviewBody';
import Empty from '@components/Empty'
import { pushAllDataList,didPushParamChange } from '@utils/tools';
import { dragBox } from '@utils/drag';
import $ from 'jquery';
import { ConfirmModal } from '@commonComp';
import {showHistory} from "@store/actions/historyTemplates";
import { CONFIRM_TYPE } from "@store/types/typeConfig";
import {billing} from '@store/async-actions/pushMessage';
import {getHistempDetail} from '@store/async-actions/historyTemplates';


class HistoryCaseContainer extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          activeHis:{},//预览数据
          activeId:'0',
          dataStr:[],
          dataJson:{},
          visible:false
        }
        this.handleCaseClick=this.handleCaseClick.bind(this)
        this.handleQuoteClick=this.handleQuoteClick.bind(this)
        this.close = this.close.bind(this);
        this.makeSure = this.makeSure.bind(this);
    }
    componentDidMount(){
      dragBox('hisWrapMove','closeHis','add')
      this.handleCaseClick(0)
      this.setState({
        visible:false
      })
    }
    handleCaseClick(idx){
      const {items} = this.props;
      let tmpItems = []
      $("#hislistLeft li").eq(idx).css({
        background:'#fff'
      }).siblings().css({
        background:'#d2d1d1'
      })
      if(items.length == 0){
        return
      }else{
        tmpItems=items[idx]
      }
      this.setState({
        activeId:idx,
        activeHis:tmpItems,
        dataStr:tmpItems.detailList||[],
        // dataJson:JSON.parse(tmpItems.dataJson)||{},
      })
    }
    makeSure(){
        const {activeHis} = this.state
        this.setState({visible:false})
        store.dispatch(showHistory(false))
        store.dispatch({type: CONFIRM_TYPE, confirmType: activeHis.sign});
        store.dispatch(getHistempDetail(activeHis))
        if(didPushParamChange()){
          store.dispatch(billing())
        }
        const {handleQuoteClick} = this.props
        handleQuoteClick&&handleQuoteClick()
        dragBox('hisWrapMove','closeHis','del')
    }
    close(){
      this.setState({
        visible:false
      })
    }
    handleQuoteClick(e,val,idx){
      this.setState({
        visible:true,
        activeId:idx,
        activeHis:val,
        dataStr:val.detailList||[],
        // dataJson:JSON.parse(val.dataJson)||{},
      })
    }
    render(){
        const { items,handleSortClick,showHistoryBox,preInfo } = this.props;
        const { activeHis,visible,dataJson,dataStr } = this.state;
        
        const getAllDataStringList = () =>{           //获取所有模块文本的数据
            let jsonDataString = {};
            jsonDataString.lis = {};
            jsonDataString.chief = dataStr[0].content || '';      //主诉
            jsonDataString.present = dataStr[1].content || '';     //现病史
            jsonDataString.other = dataStr[2].content || '';      //其他史
            jsonDataString.vital = dataStr[3].content || '';    //查体
            jsonDataString.lis = dataStr[4].content || '';      //化验导入填写
            jsonDataString.pacs = dataStr[5].content || '';     //辅检
            jsonDataString.diag = dataStr[6].content || '';      //诊断
            jsonDataString.advice = dataStr[7].content || '';       //医嘱
            return jsonDataString;
        }
        return (
            <div className={styles.mainHistory} id="hisWrapMove">
                <div className={`${styles.closeHis} drag-title`} id="closeHis"></div>
                <img className={styles.close} src={close} alt="关闭历史病历" onClick={showHistoryBox}/>
                <div className={styles.mainHistoryLeft}>
                    <div className={styles.title}>
                        <span className={styles.his}>历史病历</span>
                        <span className={styles.sort} onClick={handleSortClick}>排序 <img src={sort} alt="排序"/></span>
                    </div>
                    <div className={styles.lists}>
                        <ul id="hislistLeft">
                            {
                                (items && items.length > 0)? items.map((val,idx)=>{
                                    // return <li key={val.id} className={val.id == activeHistory.id?styles.bgc:''} onClick={(e)=>{this.handleCaseClick(e,idx)}}>
                                    return <li key={val.id} onClick={()=>{this.handleCaseClick(idx)}}>
                                        <span title={val.diagnose}>{val.diagnose}</span>
                                        {/* <span className={val.id == activeHistory.id?`${styles.time} ${styles.quoteHide}`:styles.time}>{val.inquiryDate}</span>
                                        <button 
                                            className={val.id == activeHistory.id?`${styles.quote} ${styles.quoteShow}`:styles.quote} 
                                            onClick={(e)=>{handleQuoteClick(e,val)}}
                                        >引 用</button> */}
                                        <button 
                                            className={styles.quote} 
                                            onClick={(e)=>{this.handleQuoteClick(e,val,idx)}}
                                        >引 用</button>
                                        <span className={styles.time}>{val.inquiryDate}</span>
                                    </li>
                                }):<Empty message={'无历史病历'}></Empty>
                            }
                        </ul>
                    </div>
                </div>
                <div className={styles.mainHistoryRight}>
                    {
                        activeHis == undefined || JSON.stringify(activeHis) == "{}" ? null :
                        <PreviewBody
                            preInfo={preInfo}
                            showHistoryCases={this.props.showHistoryCases}
                            dataJson={dataJson}
                            baseObj={activeHis}
                            dataStr={dataStr.length > 0?getAllDataStringList(dataStr):[]}
                            show={false}
                            flg={true}
                            showAssessBtn={true}
                        ></PreviewBody>
                    }
                </div>
                
                <ConfirmModal
                    visible={visible}
                    confirm={this.makeSure}
                    close={this.close}
                    cancel={this.close}
                    okText={"引用"}
                    okBorderColor={'#3B9ED0'}
                    okColor={'#fff'}
                    oKBg={'#3B9ED0'}
                >
                    <p className={styles['center']}>确认引用该病历？</p>
                </ConfirmModal>
            </div>
        )
    }
}

export default HistoryCaseContainer;