//会诊状态
import React from 'react';
import { Modal, Button, Row, Col, Table, DatePicker, Select, Steps, message, Timeline, Tooltip } from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import './Style/ConsulatationStatus.less';
// import ColumnAuthoritysModel from '../../columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
const { Option } = Select;
import moment from 'moment';
const { Step } = Steps;
const TimelineItem = Timeline.Item;
// 用户数据
let userData;
export default class OperationCourse extends React.Component {

    constructor({ history }) {
        super();
        let patientData = JSON.parse(sessionStorage.getItem('patientData'));
        this.history = history;
        this.state = {
            columns: [],
            tableData: [],              // table数据            
            stDate: moment().format('YYYY-MM-DD'), 				// 开始日期
            endDate: moment().format('YYYY-MM-DD'),     // 结束日期
            total: 0,     
            page: '1',
            pageSize: '10',
            admID: "",
            patID: "",
            ENObj: {},
            CNObj: {},
            admID: "",
            patientData: patientData,
            clickRowMedID: '',
            conStatusProcess: [],
            tableType: 'C',

        };
        userData = sessionStorage.userData ? JSON.parse(sessionStorage.userData) : {};
    }

    componentDidMount() {
        this.loadColumn();
        this.handleQuery();
        let leftList = document.querySelectorAll('.StatusHeight  .ant-table-body');
        if (leftList.length > 0) {
            leftList[0].style.height = store.getState().tableHeight.y + 75 + 'px';
        }

    }

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }

    }
    onCheckOperationChange = () => {

    }
    //查询列头数据
    loadColumn = () => {
        let data = {
            params: [{
                compontName: "ConsultationQuery",
                type: this.state.tableType,
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    // let widthNumber = 0
                    let resData = res.result[this.state.tableType];
                    for (let index = 0; index < resData.length; index++) {
                        // widthNumber += parseInt(res.result[index].width);
                        let columnCode = resData[index].code;
                        if ((columnCode == 'conPatCondition') || (columnCode == 'admDiag') || (columnCode == 'conAims') || (columnCode == 'conItemIdea')) {
                            resData[index].onCell = () => {
                                return {
                                    style: {
                                        maxWidth: 150,
                                        overflow: 'hidden',
                                        whiteSpace: 'nowrap',
                                        textOverflow: 'ellipsis',
                                        cursor: 'pointer'
                                    }
                                }
                            }
                            resData[index].render = (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
                        }

                    }
                    this.setState({
                        columns: resData,
                        tableWidth: res.totalWidth
                    }
                        , () => {
                            this.handleQuery();
                        })
                }
            }
        })
    }
    handleQuery = () => {
        let data = {
            params: [{
                admID: ((this.state.patientData) && (this.state.patientData.admID != '')) ? this.state.patientData.admID : '',
            }]
        };
        $http.post('urlS', this, {
            code: '04090024',
            data: data,
            success: (res) => {
                // console.dir(res);
                if (res.errorCode === "0") {
                    for (let index = 0; index <res.result.consultationArr.length; index++) {
                        res.result.consultationArr[index].key = index + 1;
                    }
                    this.setState({
                      //  total: res.result.TotalCount,
                        tableData:res.result.consultationArr,
                    });
                } else {
                    this.setState({
                        total: 0,
                        tableData: []
                    });
                }
            }
        });
    }





    onTableClickRow = (record) => {
        var that = this
        return {
            onClick: () => {
                let data = {
                    params: [{
                        type: "applyList",
                        //admID: record.admID,
                        consultID:record.consultID,
                        conItemID:record.conItemID,
                    }]
                };
                $http.post('urlS', this, {
                    code: "04090014",
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode === '0') {
                            this.setState({
                                conStatusProcess: res.Data[0].conStatusProcess,
                            })

                        } else {
                            this.setState({
                                conStatusProcess: [],
                            })
                        }
                    }
                });

            }

        };
    }



    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    render() {
        const formItemDate = {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 10 },
            lg: { span: 6 }
        };
        const iconStyle = {
            color: 'rgba(0,121,254,1)',
            cursor: 'pointer',
        }
        const spanStyle = {
            color: 'rgba(0,121,254,1)',
            marginRight: '5px',
            cursor: 'pointer',
        }
        // const columns = this.state.columns


        var language = userData.language
        var languageObj = {}
        if (language == "EN") {
            languageObj = this.state.ENObj
        } else {
            languageObj = this.state.CNObj
        }

        return (
            <div className="ConsulatationStatus" style={{ overflow: 'hidden', border: '#EEE !important' }}>
                {/* <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="ConsultationQuery"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.loadColumn}
                /> */}
                <Col span={18}>
                    <Row>
                        <Col>
                            <div style={{width: '100%'}}>
                                <div className="operationdivStyleOPr">
                                    <Table
                                        className='StatusHeight'
                                        columns={this.state.columns}
                                        dataSource={this.state.tableData}
                                        pagination={false}
                                        bordered
                                        rowKey={(row) => {
                                            return row.admID
                                        }}
                                        onRow={this.onTableClickRow}
                                        style={{ height: store.getState().tableHeight.y - 85 + 'px' }}
                                        scroll={{ x: 1200, y: store.getState().tableHeight.y -129}}
                                        onHeaderRow={column => {
                                            return {
                                                onDoubleClick: () => {
                                                    this.columnRef.onOpenModel();
                                                },
                                            };
                                        }}
                                    />

                                </div>

                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span={6}>
                    <Col style={{height: store.getState().tableHeight.y - 61 + 'px', overflowY: 'auto'}}>
                        <div className="marks">
                            <Timeline mode="left">
                                {
                                    this.state.conStatusProcess && this.state.conStatusProcess.map((item, index) => {
                                        return (
                                            <TimelineItem style={{ marginTop: '10px', marginLeft: '20px' }}>
                                                <div className="mark-temp" key={index}>{item.statusDesc}</div>
                                                <div>
                                                    <div>
                                                    <span>{item.conItemStatusDesc}</span>
                                                    <span style={{marginLeft:'17px'}}>{item.userDesc}</span>
                                                    </div>
                                                    <div>
                                                    <span>{item.conItemStatusDate}</span>
                                                    <span style={{marginLeft:'17px'}}>{item.conItemStatusTime}</span>
                                                    </div>
                                               
                                                </div>
                                            </TimelineItem>
                                        )
                                    })}
                            </Timeline>
                        </div>
                    </Col>
                </Col>
            </div>

        )
    }
}
