/*
 * Creator:     ML
 * CreatDate:   
 * descripts：建卡登记 关联病人信息
 * */
import React from 'react';
import { Form, Row, Col,Modal, Table, message, Divider } from 'antd';
const PatientInformation = Form.create()(
  class PatientInformation extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        invoiceValue: '',
        loading: false,
        readLoading: false,//读卡loading状态
        bindLoading: false,//绑定卡loading状态
        visible: false,//是否弹关联病人信息
        visibles: false,//是否弹取消补卡
        rowId: '', // 选中行id
        patientInfo: {},
        status: {},//操作状态
        isFlag: -1,//记录当前卡操作
        isCancel: -1,//取消补卡
        visibleCardTips: false,//卡操作成功弹窗
        reciprocal: 2,//2S后关闭弹窗
        flag: -1,//记录卡操作动作flag
        bindDis: false,//绑定按钮可否
        Info:{},//病人所有基本信息
      }
    }
    componentDidMount() {
      this.props.Onrefs(this);
    }
    componentWillUnmount() {
    }
    //关联页面移动
    handleOnKeydown = (e) => {
      var e = window.event || e;
      let id = '';
      let oneArr = this.state.patientInfo.result.data&&this.state.patientInfo.result.data.length > 0 ? this.state.patientInfo.result.data : [];
      switch (e.keyCode) {
      case 13:
          e.preventDefault();
          if (this.state.rowId) {
            this.setState({
              visible: false,
            })
              let obj = {}
              for(var i = 0; i < oneArr.length; i++) {
                  if (oneArr[i].cardID === this.state.rowId) {
                      obj = i > 0 ? oneArr[i] : oneArr[0];
                      break;
                  }
              }
              this.setState({
                visible: false,
                rowId: obj.cardID, 
                })
              this.checkNowData(obj)
          } else {
              message.info("请选择一条需要操作的数据")
          }
          break;
      case 38: //上
          if (this.state.rowId) {
              for(var i = 0; i < oneArr.length; i++) {
                  if (oneArr[i].cardID === this.state.rowId) {
                      id = i > 0 ? oneArr[i - 1].cardID : oneArr[0].cardID;
                      break;
                  }
              }
              this.setState({rowId: id})
          } else {
              this.setState({rowId: oneArr[0].cardID})
          }
          break;
      case 40: //下
          if (this.state.rowId) {
              for(let i = 0; i < oneArr.length; i++) {
                oneArr[i].disblock = false
                  if (oneArr[i].cardID === this.state.rowId) {
                      id = i + 1 >= oneArr.length ? oneArr[oneArr.length - 1].cardID : oneArr[i + 1].cardID;
                      break;
                  }
              }
              this.setState({rowId: id})
          } else {
              this.setState({rowId: oneArr[0].cardID})
          }
          break;
      }
  }
    //点击弹窗确认按钮
    handleOk = (e) => {
      this.setState({ loading: true });
      setTimeout(() => {
        this.setState({ loading: false, visible: false });
      }, 3000);
    }
    //展示弹窗
    showModals = () => {
      this.setState({
        visible: true,
      });
    }
    //关闭关联信息弹窗
    handleCancel = () => {
      this.setState({
        visible: false,
        rowId: '',
        isCancel: -1,
        status: {},
        Info:{},
      })
    }
    //双击/回车选中当前数据
    checkNowData=(nowData)=>{
        this.props.handleEdit(
          nowData,
          this.state.Info, 
          this.state.patientInfo.result
          )
        this.handleCancel();
    }
    //设置行属性
    onClickRow = (record) => {
      return {
        // 单击行选中
        onClick: () => {
          this.setState({
            status: record,
            isFlag: -1,
          })
          for (var i = 0; i < this.state.patientInfo.result.data.length; i++) {
            this.state.patientInfo.result.data[i].disblock = false
          }
          for (var i = 0; i < this.state.patientInfo.result.data.length; i++) {
            this.state.patientInfo.result.data[i].disblock = false
            if (record.cardID == this.state.patientInfo.result.data[i].cardID) {
              this.state.patientInfo.result.data[i].disblock = true
            }
          }
          if (this.state.rowId === '') {
            // 保存行数据以及ID
            this.setState({ rowId: record.cardID })
          } else {
            if (this.state.rowId !== record.cardID) {
              this.setState({
                rowId: record.cardID,
              })
            } else {
              this.setState({
                rowId: "",
                detailInfo: {},
              });
            }
          }
        },
        onDoubleClick: () => {
          this.setState({
            visible: false,
            rowId: record.cardID,
            })
          this.checkNowData(record)
        }
      }
    }
    // 表格行的类名
    setRowClassName = (record) => {
      return record.cardID === this.state.rowId ? 'clickRowStyle' : '';
    }
    resetEditFieldData = () => {
      this.setState({
        rowId: "",
        detailInfo: {}
      });
    }
    //获取关联信息基础数据 --- 父级传来
    getBasepatientInfo = (data, arr, cardNo) => {
      this.setState({
        Info:data.result
      })
      let bindCardArr = []
      let newArr = []
      for (var i = 0; i < data.result.data.length; i++) {
        data.result.data[0].disblock = true
        this.setState({
          rowId:data.result.data[0].cardID,
        })
        data.result.data[i].key = i + "info";
        data.result.data[i]["disblock"] = false
        if (cardNo == data.result.data[i].cardNo) {
          this.setState({
            rowId: data.result.data[i].cardID,
            status: data.result.data[i],
            isFlag: -1,
          })
          if (data.result.data[i].cardStatusDesc == '挂失') {
            this.setState({
              isCancel: 1
            })
          } else {
            this.setState({
              isCancel: -1
            })
          }
        }
        if (data.result.data[i].cardStatus == '退卡' || data.result.data[i].cardStatus == '作废' || data.result.data[i].cardStatus == '回收') {
          
        } else {
          bindCardArr.push(data.result.data[i].cardTypeDesc)
          newArr = Array.from(new Set(bindCardArr))
          if (newArr.length == arr.length) { //检测卡种是否全部都有绑定
            this.setState({
              bindDis: true
            })
          } else {
            this.setState({
              bindDis: false
            })
          }
        }
      }
      this.setState({
        data: data.data,
        patientInfo: data,
      })
    }
    render() {
      const { patientInfo, } = this.state
      const columns = [{
        key: '1',
        title: '卡类型',
        dataIndex: 'cardTypeDesc',
        width: '15%',
        align: "center",
      }, {
        key: '2',
        title: '',
        dataIndex: '',
        width: '15%',
        align: 'center'
      }, {
        key: '3',
        title: '卡号',
        dataIndex: 'cardNo',
        width: '25%',
        align: "center",
      }, {
        key: '4',
        title: '',
        dataIndex: '',
        width: '15%',
        align: "center",
      }, {
        key: '5',
        title: '状态',
        dataIndex: 'cardStatusDesc',
        width: '10%',
        align: "center",
      }, {
        key: '6',
        title: '',
        dataIndex: '',
        width: '20%',
        align: "center",
      }]
      return (
        <div
        tabIndex={1}
               onKeyDown={this.handleOnKeydown}
               style={{outline: 'none'}}
        >
          <Modal
            width='1200px'
            visible={this.state.visible}
            title="关联病人信息"
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            pagination='false'
            footer={null}
          >
            <div style={{ minHeight: '226px' }}>
              <Row>
                <Col>
                  <span>{patientInfo.result ? patientInfo.result.patInfo.patNo : ''}</span>
                  <Divider type="vertical" />
                  <span>{patientInfo.result ? patientInfo.result.patInfo.patName : ''}</span>
                  <Divider type="vertical" />
                  <span>{patientInfo.result ? patientInfo.result.patInfo.patSexDesc : ''}</span>
                  <Divider type="vertical" />
                  <span>{patientInfo.result ? patientInfo.result.patInfo.patAge : ''}</span>
                  <Divider type="vertical" />
                  <span style={{ marginRight: "8px" }}>{patientInfo.result ? patientInfo.result.patInfo.patCredTypeDesc : ''}</span>
                  <Divider type="vertical" />
                  <span>{patientInfo.result ? patientInfo.result.patInfo.patCredNo : ''}</span>
                  <Divider type="vertical" />
                  <span> {patientInfo.result ? patientInfo.result.patInfo.patMobile : ''}</span>
                </Col>
              </Row>
              <Row style={{ margin: '16px 0 12px 0' }}>
                <Col>
                  <span style={{ color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500' }}>请选择需要操作的卡记录<span style={{ color: "#F5222D", fontWeight: "600", marginLeft: '4px' }}>(如确认选择，请双击或回车确认
)</span></span>
                </Col>
              </Row>
              <div>
              <Table
                rowKey={record => record.key}
                pagination={false}
                columns={columns}
                dataSource={patientInfo.result ? patientInfo.result.data : []}
                bordered
                onRow={this.onClickRow}
                rowClassName={this.setRowClassName}
                style={{
                  marginTop: '12px', maxHeight: '272px'
                  , overflow: 'auto'
                }}
              />
              </div>
            </div>
          </Modal>
        </div>
      )
    }
  })
export default PatientInformation    