// 医嘱执行列表
import React from 'react';
import { Modal, Row, Col, Table, message, Timeline } from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import './index.less';
const TimelineItem = Timeline.Item;

export default class Apply extends React.Component {
  constructor({ history }) {
    super();
    this.history = history;
    this.state = {
      visible: false,
      dataSource: [],
      orderInfo: [],
      ordID: "",
      copyId: "",
      numberUomCode: '',
      number: '',
      exexcuteChangeArr: [],
      columns: [],
    };
    this.columns = [
      {
        title: '要求执行时间',
        dataIndex: 'reqTime',
        width: '15%',
        align: "center"
      },
      {
        title: '计费状态',
        dataIndex: 'billedDesc',
        width: '15%',
        align: "center"
      }

    ];
  }

  componentDidMount() {
    this.handleQuery();
    this.setState({ copyId: "" })
    this.props.onRefs(this)
    this.getDetailTableColumns()
  }

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

  // 获取明系列表头数据
  getDetailTableColumns = () => {
    let { userInfo } = this.state;
    let data = {
      params: [{
        reactCode: ['ExecuteCycle'],
        compontName: 'ExecuteCycle',
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            ENObj: res.result.language.EN,
            CNObj: res.result.language.CN,
            columns: res.result.C,
          })
        }
      }
    })
  };

  handleQuery = () => {
    if (this.state.ordID != "") {
      let data = {
        params: [{
          orderID: this.state.ordID,
        }]
      }
      $http.post('urlS', this, {
        code: "04080012",
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              dataSource: res.result.exexcuteArr,
              orderInfo: res.result.orderInfo,
              loading: false
            })
          } else {
            message.error('查询失败：' + res.errorMessage);
          }
        }
      })
    }
  }

  getStatus = (copyId) => {
    let data = {
      params: [{
        executeID: copyId,
      }]
    }
    $http.post('urlS', this, {
      code: "04080013",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            exexcuteChangeArr: res.result.exexcuteChangeArr

          })
        } else {
          message.error('查询失败：' + res.errorMessage);
        }
      }
    })
  }

  // 设置行属性
  onTableRow = (record) => {
    return {
      // 单击行选中
      onClick: (event) => {
        this.getStatus(record.id);
        if (this.state.copyId === "") {
          this.setState({ copyId: record.id, number: record.qty, numberUomCode: record.qtyDesc })
        } else {
          if (this.state.copyId !== record.id) {
            this.setState({ copyId: record.id })
          } else {
            this.setState({
              copyId: "",
            });
          }
        }
      }
    }
  }

  // 表格行的类名
  setRowClassName = (record) => {
    return record.id === this.state.copyId ? 'clickRowStyle' : '';
  }

  // 调用公共组件的连接事件
  onRef = (ref) => {
    this.child = ref
  }

  showModal = (ordID) => {
    this.setState({
      visible: true,
      ordID,
      copyId: "",
      exexcuteChangeArr: []
    }, () => {
      this.handleQuery();
    });
  };

  handleOk = e => {
    //  console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div>
        <Modal
          title="执行医嘱单"
          width='50%'
          height="400px"
          visible={this.state.visible}
          //  onOk={this.handleOk}
          footer={null}
          onCancel={this.handleCancel}
        >
          <div style={{ width: '100%', minHeight: '400px' }}>
            <div style={{ padding: '0 0px 12px', fontSize: '14px', borderBottom: '3px solid #EEE' }}>
              <Row>
                <Col span={6}>
                  共计：<span>{this.state.orderInfo ? this.state.orderInfo.total : ''} <span>条执行记录</span></span>
                </Col>
                <Col span={8}>
                  开始日期：<span>{this.state.orderInfo ? this.state.orderInfo.ordStartDateTime : ''} </span>
                </Col>
                <Col span={6}>
                  状态：<span>{this.state.orderInfo ? this.state.orderInfo.ordBilledDesc : ''}</span>
                </Col>
              </Row>
              <Row style={{ margin: '4px 0' }}>
                <Col span={24}>
                  医嘱：<span style={{ color: '#1819FF' }}>{this.state.orderInfo ? this.state.orderInfo.medDesc : ''} <span><span>{this.state.orderInfo ? this.state.orderInfo.medSpec : ''} </span><span style={{ marginLeft: '10px' }}>{this.state.orderInfo ? this.state.orderInfo.ordFreqDesc : ''}</span></span>
                    <span style={{ marginLeft: '10px' }}>{this.state.orderInfo.ordDoseUnit ? "每次：" : ""}{this.state.orderInfo ? this.state.orderInfo.ordDoseUnit : ''}</span><span>{this.state.orderInfo ? this.state.orderInfo.ordUsageDesc : ''}</span></span>
                </Col>
              </Row>
            </div>

            <Row span={5} style={{ marginTop: '10px' }}>
              <Col span={8}>
                <Row>
                  <Col style={{ textAlign: 'center', background: '#F5f4f4' }}>
                    <span className="temp">执行记录</span>
                  </Col>
                  <Col span={12} style={{ marginTop: '10px' }}>
                    {/* <DatePicker style={{ width: '100%' }} /> */}
                  </Col>
                  <Col span={1}></Col>
                  <Col span={10} style={{ marginTop: '10px' }}>
                    {/* <Select style={{ width: '100%', marginLeft: '10px' }}></Select> */}
                  </Col>
                  <Col span={1}></Col>
                  <Col>
                    <Table
                      scroll={{ y: store.getState().tableHeight.y - 150 }}
                      style={{ width: '100%', height: (store.getState().tableHeight.y - 230) }}
                      dataSource={this.state.dataSource}
                      columns={this.state.columns}
                      pagination={false}
                      onRow={this.onTableRow}
                      rowClassName={this.setRowClassName}
                      bordered
                      rowKey={(row) => {
                        return row.id
                      }}
                      loading={this.state.loading}
                      className="table-body-height"
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={16}>
                <Row style={{ height: store.getState().tableHeight.y - 61 + 'px', overflowY: 'auto' }}>
                  <Col>
                    <div className="marks">
                      <Timeline mode="alternate">
                        {
                          this.state.exexcuteChangeArr && this.state.exexcuteChangeArr.map((item, index) => {
                            return (
                              <TimelineItem style={{ marginTop: '10px' }}>
                                <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.userName}</span>&nbsp;&nbsp;
                                </div>
                                <div>数量：{this.state.number}{this.state.numberUomCode}</div>
                              </TimelineItem>
                            )
                          })}
                      </Timeline>
                    </div>
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        </Modal>
      </div>
    )
  }
};