import React from 'react';
import { Modal, Button, Row, Col, Table, DatePicker, Select, Steps, message, Timeline, Card, Checkbox, TimePicker, Input } from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import './style/OperationCourse.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 = {
            column: [],
            columns: [],
            tableData: [],              // table数据
            total: 0,                  // table数据总量            
            applyLocData: [],			// 申请科室下拉数据
            operationRoomData: [],		// 手术间下拉数据
            operationTypeData: [],		// 手术类型下拉数据
            operationStatusData: [],	// 手术状态下拉数据
            patWardData: [],			// 患者病区下拉数据
            stDate: moment().format('YYYY-MM-DD'), 				// 开始日期
            endDate: moment().format('YYYY-MM-DD'),     // 结束日期
            applyDateFlag: '',			// 按申请日期
            applyLocID: '',				// 申请科室
            operationRoomID: '',		// 手术间
            operationStatusID: '',		// 手术状态
            operationTypeID: '',		// 手术类型
            patWardID: '',				// 患者病区
            number: '',					// 患者信息
            condition: '',				// 条件
            page: '1',
            pageSize: '10',
            clickFlag: false,
            checked: false,
            patNumber: '',
            errorList: [],
            clickCol: '',
            tableWidth: 0,
            opertaionData: [],
            operationStatus: '',
            locType: '',
            operationType: '',
            TableListData: [],
            visibleOperationCheck: false,
            selectedID: '',
            activeKey: '',
            admID: "",
            patID: "",
            ENObj: {},
            CNObj: {},
            selectOperation: [],
            editingKey: {},
            editArr: [],
            admID: "",
            patientData: patientData,
            clickRowMedID: '',
            data: [],

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

    }

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

    }

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

    }
    onCheckOperationChange = () => {

    }
 
    //查询表头信息
    getTableTitle = () => {
        let data = {
            params: [{
                reactCode: ['OperationSearch'],
                compontName: 'OperationSearch',
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let colums = [];
                    let column = res.result.C;
                    if (userData.language == 'EN') {
                        for (let i = 0; i < column.length; i++) {
                            column[i].title = column[i].enDescripts

                        }
                    }
                    colums = this.state.column.concat(res.result.C);

                    this.setState({
                        columns: colums,
                        tableWidth: res.totalWidth
                    }, () => {
                        this.getOperationInfo();
                    })
                }
            }
        });
    }
    // 查询手术信息
    getOperationInfo = () => {
        this.setState({
            clickFlag: true,
            selectOperation: []
        })
        let { page, pageSize, patWardID, patNumber, operationStatus, operationType, applyLocID } = this.state;

        let data = {
            "params": [{
                admID: ((this.state.patientData) && (this.state.patientData.admID != '')) ? this.state.patientData.admID :this.props.admIDs,
                startDate: moment(this.state.stDate).format('YYYY-MM-DD'),
                stopDate: moment(this.state.endDate).format('YYYY-MM-DD'),
                applyFlag: 'Y' ,
                applyLocID: applyLocID,
                operationRoomID: "",
                operationStatusID: operationStatus,
                operationType: operationType,
                patNumber: patNumber,
                patWardID: patWardID
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,

            }]
        };
        let editArr = [];
        $http.post('urlDeault', this, {
            code: "04160006",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let tableData = res.result.Data;
                    for (let i = 0; i < tableData.length; i++) {
                        tableData[i].key = i
                        if (tableData[i].statusCode == "01") {
                            editArr.push(tableData[i].id)
                        }
                    }
                    this.setState({
                        tableData,
                        clickCol: '',
                        total: res.result.TotalCount,
                        clickFlag: false,
                        editArr: editArr,
                        clickRow: {},
                    })
                } else {
                    this.setState({
                        clickFlag: false,
                    })
                }
            },
            error: function (error) {
                message.error('失败：' + error);
                this.setState({
                    clickFlag: false,
                })
            }
        });
    }



    onTableClickRow = (record) => {
        var that = this
        return {
            onClick: () => {
                let data = {
                    params: [{
                        operationID: record.id,
                    }]
                };
                $http.post('urlS', this, {
                    code: "04160017",
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode === '0') {
                            this.setState({
                                data: res.result.Data,
                            })

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

            }

        };
    }



    // onTableClickRow = (record) => {

    // }

    // 翻页
    onChange = (page, pageSize) => {
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            this.getOperationInfo();
        });
    };

    onShowSizeChange = (current, size) => {
        this.setState({ page: current, pageSize: size }, () => {
            // 重新调用查询方法
            this.onChange(current, size);
        })
    };

    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="Course" style={{ overflow: 'hidden', border: '#EEE !important' }}>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="OperationSearch"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.getTableTitle}
                />
                <Col span={18}>
                    <Row>
                        <Col>
                            <div style={{width: '100%' }}>
                                <div className="operationdivStyleOPr">
                                    <Table
                                       className='CourseHeight'
                                        columns={this.state.columns}
                                        dataSource={this.state.tableData}
                                        pagination={false}
                                        bordered
                                        rowKey={(row) => {
                                            return row.id
                                        }}
                                        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>
                                    <CommonPagination
                                        size='small'
                                        current={this.state.page}
                                        total={this.state.total}
                                        search='search'
                                        onShowSizeChange={this.onShowSizeChange.bind(this)}
                                        complete={true}
                                        dataSource={this.state.tableData}
                                        onChange={this.onChange.bind(this)}
                                    />
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span={6}>
                    <Col>

                        <div className="marks">
                            <Timeline mode="left">
                                {
                                    this.state.data && this.state.data.map((item, index) => {
                                        return (
                                            <TimelineItem style={{ marginTop: '10px' ,marginLeft:'20px'}}>
                                                <div className="mark-temp" key={index}>{item.statusDesc}</div>
                                                <div>
                                                    <span>{item.updateDate}</span>&nbsp;&nbsp;
                                                    <span>{item.updateTime}</span>&nbsp;&nbsp;
                                                    <span>{item.locDesc}</span>&nbsp;&nbsp;
                                                    <span>{item.updateUserName}</span>&nbsp;&nbsp;
                                                    </div>
                                            </TimelineItem>
                                        )
                                    })}
                            </Timeline>
                        </div>
                    </Col>
                </Col>
            </div>

        )
    }
}
