/*
 * Creator:     ML
 * CreatDate:   
 * descripts：一卡通列表
 * */
import React from 'react';
import { Form, Row, Col, Input, Select, Button, DatePicker, Modal, Table, Icon, Card, message, Spin, Steps, Divider, Tooltip } from 'antd';
import moment from 'moment';
import { $http } from '../../containers/config/https';
import store from '../../store';
import './css/error.less';
import { Util } from 'tools/index';
import { handleExcel } from 'tools/handleExcel.js';
import ReadCard from '../../components/readcard/ReadCard'
import { $loadTemplate } from '../lodop/Common/Print.js';
import CommonPagination from 'components/pagination/index';
import CardTypeRead from 'components/cardType/index';

const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;
const Step = Steps.Step;
let timer = undefined;

const formItemLayout = { // label 和input宽度
  labelCol: { span: 8 },
  wrapperCol: { span: 14 },
}
const formItemLayoutTag = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
}

const formItemLayoutBind = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
}

const formItemcardStatus = {
  labelCol: { span: 9 },
  wrapperCol: { span: 14 },
}

const formItemNumber = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
}

const formItemMoney = {
  labelCol: { span: 11 },
  wrapperCol: { span: 11 },
}

const formItemCard = {
  labelCol: { span: 10 },
  wrapperCol: { span: 23 },
}

const formItemNewCard = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
}

const formItemNew = {
  labelCol: { span: 2 },
  wrapperCol: { span: 16 },
}

const formItemNewButton = {
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
}

const CardList = Form.create()(
  class CardList extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        loading: false,
        visible: false,
        visibleLog: false,//日志变更
        logData: [],//日志变更数据
        baseParms: [],//下拉框数据
        total: 0,//表格总数据
        cardData: [],//查询出来的卡数据
        informationData: [],//绑定卡 卡关联数据
        values: {},//查询条件数据
        visibleCardTips: false,//卡操作成功弹窗
        flag: -1,//记录卡操作动作flag
        reciprocal: 2,//2S后关闭弹窗
        nowCost: 0,//卡费
        readLoading: false,//补卡loading
        postLoading: false,//卡操作确认提交
        searchLoading: false,//查询请求
        initpatCardID: '',//绑定卡时类型
        initCard: '',
        rowId: '',//表格行选中 卡关联
        rowIds: '',//表格行选中 页面数据
        bindVail: true,//点击绑定前是否通过验证
        bindLoading: false,//点击绑定loading
        newBindArr: [],//被绑的卡
        lastLight: false,//绑定成功 高亮当前
        bindMoreInfo: false,//绑卡更多信息显示
        bindCardArr: [],//已绑定的卡
        nowReadCard: "",//卡类型设置是否可操作 --卡操作remode
        cardLengthCard: "",//卡长度 --
        idCardCodePop: "",//卡操作--身份证code
        repariFeeFlag: "N",//费用置为0或空
        replenishZero: "",//是否可补0 卡操作
        patReplenishZero: "",//是否可补0 查询
        patCardLength: "",//卡长度 -- 查询
        logInfo: {},//查看日志流水
        showLog: 0,//控制卡操纵流水内容显示
        LogCardType: "",//日志流水选择卡类型
        logBeforeCardTypeID: "",
        logBeforeCardNo: "",
        startNoMessage: "",//开始日期未填写文字提示
        starNoVisible: false,//开始日期消息弹窗
        bindNoMessage: "",//绑定卡号
        patchNoMessage: "",//补卡卡号
        changeNoMessage: "",//换卡卡号
        bindNoVisible: false,//绑定卡号消息弹窗
        headerHeight: "",
        size: "small",
        page: 1,
        pageSize: 20,
        search: "",
        bindCardType: "",
        patCardTypeID: "",
        exportLoading: false

      }
      this.bindCardType = React.createRef();
      this.bindCardNu = React.createRef();
      this.bindCardButton = React.createRef();

      this.patchCardNu = React.createRef();
      this.patchCardButton = React.createRef();

      this.changeCardNu = React.createRef();
      this.changeCardButton = React.createRef();

      this.changeOkButton = React.createRef();
      this.patchOkButton = React.createRef();
      this.bindOkButton = React.createRef();
    }
    componentDidMount() {
      //主页面查询结果表格
      const columns = [
        {
          title: '病人ID',
          dataIndex: 'patNo',
          width: 100,
          align: "center",
          key: '1'
        }, {
          title: '姓名',
          dataIndex: 'patName',
          width: 80,
          key: '0',
          align: "left",
        }, {
          title: '性别',
          dataIndex: 'patSexDesc',
          width: 50,
          align: "left",
          key: '4'
        }, {
          title: '出生日期',
          dataIndex: 'patBirthDate',
          width: 80,
          align: "center",
          key: '5'
        }, {
          title: '证件类型',
          dataIndex: 'patCredTypeDesc',
          width: 100,
          align: "left",
          key: '6'
        }, {
          title: '证件号码',
          dataIndex: 'patCredNo',
          width: 140,
          align: "left",
          key: '7'
        }, {
          title: '手机号码',
          dataIndex: 'patMobile',
          width: 90,
          align: "center",
          key: '8'
        }, {
          title: '身份标签',
          dataIndex: 'patSocial',
          width: 100,
          align: "left",
          key: '9'
        }, {
          title: '来源渠道',
          dataIndex: 'patSourceDesc',
          width: 100,
          align: "left",
          key: '11'
        }, {
          title: '卡类型',
          dataIndex: 'patCardTypeDesc',
          width: 80,
          align: "left",
          key: '2'
        }, {
          title: '卡号',
          dataIndex: 'patCardNo',
          width: 100,
          align: "left",
          key: '3'
        }, {
          title: '建卡日期',
          dataIndex: 'createDate',
          width: 80,
          align: "center",
          key: '10'
        }, {
          title: '卡状态',
          dataIndex: 'patCardStatusDesc',
          width: 50,
          align: "center",
          key: 'cardStatus'
        }, {
          title: '日志',
          dataIndex: 'log',
          width: 50,
          key: 'log',
          align: "center",
          render: (text, record) => (
            <span style={{ cursor: 'pointer', color: 'rgb(24, 144, 255)' }}><Icon type="bars" onClick={() => this.handleLog(record)} /></span>
          )
        }, {
          title: '操作',
          dataIndex: 'edit',
          width: 240,
          align: "center",
          key: 'edit',
          render: (text, record) => (
            <div style={{ display: 'flex', color: '#1890ff', cursor: 'pointer' }}>
              <Button
                type="primary"
                title={
                  record.allCardTypeFlag == 'Y' ? "已绑定全部卡类型，不能继续绑定"
                    : (record.patCardStatusDesc == "退卡" ? "退卡状态不可绑卡"
                      : (record.patCardStatusDesc == "回收" ? "回收状态不可绑卡"
                        : (record.patCardStatusDesc == "作废" ? "作废状态不可绑卡" : false
                        )))}
                disabled={record.allCardTypeFlag == 'Y' || record.patCardStatusDesc == "退卡" || record.patCardStatusDesc == "回收" || record.patCardStatusDesc == "作废"}
                style={{ border: "0", background: "0", boxShadow: "0 0 0", color: (record.allCardTypeFlag == 'Y' || record.patCardStatusDesc == "退卡" || record.patCardStatusDesc == "回收" || record.patCardStatusDesc == "作废" ? "rgba(0, 0, 0, 0.25)" : "#1890ff") }}
                onClick={() => this.handleCard(6, record)}>绑卡</Button>
              <Button type="primary" style={{ display: (record.changeFlag == 'Y' ? 'block' : 'none'), border: "0", background: "0", boxShadow: "0 0 0", color: "#1890ff" }} onClick={() => this.handleCard(3, record)}>换卡</Button>
              <Button type="primary" style={{ display: (record.lossFlag == 'Y' ? 'block' : 'none'), border: "0", background: "0", boxShadow: "0 0 0", color: "#1890ff" }} onClick={() => this.handleCard(2, record)}>挂失</Button>
              <Button type="primary" style={{ display: (record.repairFlag == 'Y' ? 'block' : 'none'), border: "0", background: "0", boxShadow: "0 0 0", color: "#1890ff" }} onClick={() => this.handleCard(4, record)}>补卡</Button>
              <Button
                type="primary"
                title={
                  record.patCardStatusDesc == "回收" ? "回收状态不可注销"
                    : (record.patCardStatusDesc == "退卡" ? "退卡状态不可注销"
                      : (record.patCardStatusDesc == "作废" ? "作废状态不可注销" : "false"
                      ))}
                disabled={record.patCardStatusDesc == "回收" || record.patCardStatusDesc == "退卡" || record.patCardStatusDesc == "作废"}
                style={{ border: "0", background: "0", boxShadow: "0 0 0", color: (record.patCardStatusDesc == "正常" || record.patCardStatusDesc == "挂失" ? "#1890ff" : "rgba(0, 0, 0, 0.25)") }}
                onClick={() => this.handleCard(5, record)}>注销</Button>
              <Button type="primary" style={{ display: (record.patCardStatusDesc == '挂失' ? 'block' : 'none'), border: "0", background: "0", boxShadow: "0 0 0", color: "#1890ff" }} onClick={() => this.handleCard(1, record)}>取消挂失</Button>
            </div>
          ),
        }]
      let newData = JSON.parse(JSON.stringify(columns))
      let widthTotal = 0
      for (var i = 0; i < newData.length; i++) {
        widthTotal += newData[i].width
        if (newData[i].key === 'edit') {
          newData.splice(i, 1);
        }
      }
      this.setState({
        columns,
        columnsTo: newData,
        widthTotal,
      })
      this.patchCardNu = React.createRef();
      // 初始化设置table的高度以及表体的高度
      document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 40 + 'px';
      let box = document.querySelector(".department-header");
      if (box) { //此处在加一层判断，更加严密，如果box存在的情况下获取
        this.setState({ headerHeight: box.offsetHeight })
      }
      if (this.state.size == "small") {
        this.setState({
          pageSize: 20
        })
      } else {
        this.setState({
          pageSize: 50
        })
      }
      this.getPatForm()
      let data = {}
      data = {
        params: [{
          cardTypeFlag: 1,//卡类型
          credTypeFlag: 1,//证件类型
          occupationFlag: '',	//职业
          socialStatusFlag: 1,//身份标签
          payMethodFlag: 1,//支付方式
          cardStatusFlag: 1,//卡状态
          cardInfo: {},//点击onRow卡信息
        }]
      }
      $http.post('urlS', this, {
        code: '03030005',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              baseParms: res,
            })
            this.props.form.setFieldsValue({ payMethods: res.payMethod[0].id });

            res.cardType.map((item, i) => {
              if (item.defaultFlag == "Y") {
                this.setState({
                  patCardTypeID: item.id,
                  initCardDr: item.id,
                  nowRead: item.readMode,
                  cardLength: item.cardLength && item.cardLength != "" ? item.cardLength + "位," : "",
                  idCardCode: item.code,
                  cardLengthInput: item.cardLength,
                  replenishZero: item.replenishZero,
                  repariFeeFlag: item.repariFeeFlag,
                  nowCost: item.cardCost,
                  nowInv: item.invFlag,
                })
              }
            })
          } else {

          }
        }
      })
      document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 145 + 'px';
    }
    componentWillUnmount() {
      let timer = undefined;
      clearInterval(timer);
    }
    //未填写开始日期
    starTip = () => {
      this.props.form.validateFields(['dateFrom',], (errors, values) => {
        if (!errors) {
          this.setState({
            starNoVisible: false
          })
        } else {
          this.setState({
            starNoVisible: true,
            startNoMessage: errors.dateFrom.errors[0].message,
          })
          setTimeout(() => {
            this.setState({
              starNoVisible: false,
            })
          }, 1500)
        }
      });
    }
    //获取病人来源下拉框
    getPatForm = () => {
      let data = {
        params: [{
        }],
      }
      $http.post("urlS", this, {
        code: "03050175",
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              patFormData: res.result.data
            })
          } else {
            message.error('失败：' + res.errorMessage);
          }
        },
        error: function (error) {
          message.error('失败：' + error);
        }
      });
    }
    //绑卡操作提示
    bindTip = () => {
      this.props.form.validateFields(['cardBindNo',], (errors, values) => {
        if (errors == null) {
          return
        }
        if (errors.cardBindNo.errors[0].message == "cardBindNo need to revalidate") {
          this.setState({
            bindNoVisible: false
          })
          return
        }
        if (!errors) {
          this.setState({
            bindNoVisible: false
          })
        } else {
          this.setState({
            bindNoVisible: true,
            bindNoMessage: errors.cardBindNo.errors[0].message,
          })
          setTimeout(() => {
            this.setState({
              bindNoVisible: false,
            })
          }, 1500)
        }
      });
    }
    //补卡操作提示
    patchTip = () => {
      this.props.form.validateFields(['cardNumber',], (errors, values) => {
        if (errors == null) {
          return
        }
        if (errors.cardNumber.errors[0].message == "cardNumber need to revalidate") {
          this.setState({
            patchNoVisible: false,
            changeNoVisible: false
          })
          return
        }
        if (!errors) {
          this.setState({
            patchNoVisible: false,
            changeNoVisible: false
          })
        } else {
          this.setState({
            patchNoVisible: true,
            changeNoVisible: true,
            patchNoMessage: errors.cardNumber.errors[0].message,
            changeNoMessage: errors.cardNumber.errors[0].message,
          })
          setTimeout(() => {
            this.setState({
              patchNoVisible: false,
              changeNoVisible: false
            })
          }, 1500)
        }
      });
    }

    //隐藏提示
    visibleTip = () => {
      this.setState({
        starNoVisible: false,
        bindNoVisible: false,
        patchNoVisible: false,
        changeNoVisible: false,
      })
    }
    //已绑卡类型 卡关联返回的信息
    bingCardArr = (data) => {
      let newArr = []
      //循环卡关联信息
      for (var i = 0; i < data.length; i++) {
        data[i].key = i + "info";
        if (data[i].cardStatusDesc == '退卡' || data[i].cardStatusDesc == '回收' || data[i].cardStatusDesc == '作废') {
          data.splice(i, 1)
        }
      }
      newArr = data
      this.setState({
        bindCardArr: newArr
      })
    }
    // 修改page和pageSize 跳转至---
    onChange = (e) => {
      this.setState({ page: e, pageSize: this.state.pageSize, }, () => {
        // 重新调用查询方法
        let { values } = this.state;
        this.getFindDate(values);
      })
    }
    // 定位到最后一条
    onChangeLast = (page) => {
      this.setState({ page: page, pageSize: this.state.pageSize, }, () => {
        // 重新调用查询方法
        let { values } = this.state;
        this.getFindDate(values, "", page);
      })
    }
    //下拉选择页数
    onShowSizeChange = (page, pageSize) => {
      this.setState({ page: 1, pageSize: pageSize }, () => {
        // 重新调用查询方法
        let { values } = this.state;
        this.getFindDate(values, "search");
      })
    }
    // 显示分页总条数
    showTotal(total) {
      return `共 ${total} 条`;
    }
    getValue = (cardType, patCardNo) => {
      this.setState({
        cardType,
        patCardNo,
      })
    }
    //查找
    getFindDate(values, e, last) {
      let { page, pageSize, cardType, patCardNo } = this.state;
      this.setState({
        searchLoading: true
      })
      let data = {}
      data = {
        params: [{
          patCardTypeID: cardType || "",
          patCardNo: patCardNo || "",
          number: values.number,
          dateFrom: values.dateFrom ? moment(values.dateFrom).format('YYYY-MM-DD') : undefined,
          dateTo: values.dateTo ? moment(values.dateTo).format('YYYY-MM-DD') : undefined,
          patCardStatusID: values.cardStatus,
          patSocialStatusID: values.socialStatusDr,
          patSourceID: values.patSourceID,
        }],
        pagination: [{
          pageSize: pageSize,
          currentPage: last ? last : page,
        }]
      }
      $http.post('urlS', this, {
        code: '03030011',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0 && res.result) {
            this.setState({
              searchLoading: false,
              rowId: "",
              search: e
            })
            for (var i = 0; i < res.result.data.length; i++) {
              res.result.data[i].key = i + 'card'
            }
            this.setState({ cardData: res.result.data, total: res.result.totalCount, }, () => {
            })
            var x = document.querySelectorAll(".ant-table-body-inner");
            for (var i = 0; i < x.length; i++) {
              x[i].style.height = store.getState().tableHeight.y + 40 + 'px';
            }
          } else {
            this.setState({
              searchLoading: false
            })
          }
        },
        error: function () {
          this.setState({
            searchLoading: false
          })
        }
      })
    }
    //点击查询---卡列表
    findCard = () => {
      this.props.form.validateFields((err, values) => {
        this.starTip()
        if ((values.dateFrom && values.dateFrom) && (values.dateTo && values.dateTo)) {
          if (moment(values.dateFrom).format('YYYYMMDD') > moment(values.dateTo).format('YYYYMMDD')) {
            this.setState({
              starNoVisible: true,
              startNoMessage: "开始日期大于结束日期",
            }, () => {
              setTimeout(() => {
                this.visibleTip()
              }, 1500)
            })
            return
          }
        }
        if (!err) {
          this.setState({
            values: values,
            flag: -1,
            rowIds: ""
          })
          this.setState({ page: 1, pageSize: this.state.pageSize }, () => {
            let { values } = this.state;
            this.onShowSizeChange("1", this.state.pageSize)
          })
        }
      })
    }
    handleOk = (e) => {
      this.setState({ loading: true });
      setTimeout(() => {
        this.setState({ loading: false, visible: false });
      }, 3000);
    }
    //绑定弹窗
    showModal = () => {
      this.setState({
        visible: true,
      });
    }
    handleCancel = () => {
      this.visibleTip()
      this.handleRest()
      this.setState({
        visible: false,
        visibleLog: false,
        bindMoreInfo: false,
        bindVail: true,
        LogCardType: "",
      });
    }
    //获取日志流水详情
    getLogDeatil = (pD, cD) => {
      let data = {}
      data = {
        params: [{
          patID: pD,
          cardTypeID: cD,
        }],
      }
      $http.post('urlS', this, {
        code: '03030015',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              logWaterData: res.result
            })
            if (res.result.length == 0) {
              this.setState({
                showLog: 3
              })
            } else {
              this.setState({
                showLog: 2
              })
            }
          }
        }
      })
    }
    //查看日志操作流水
    checkFlowLog = () => {
      const { logInfo, } = this.state
      this.setState({
        showLog: 2,
        LogCardType: logInfo.patCardTypeID,
      }, () => {
        this.props.form.setFieldsValue({ logCard: logInfo.patCardTypeID })
        this.getLogDeatil(logInfo.patID, logInfo.patCardTypeID)
      })
    }
    //返回日志表格
    cenlFlowLog = () => {
      this.setState({
        showLog: 1
      })
    }
    //日志流水卡类型选择
    handleLogCardType = (id) => {
      const { logInfo } = this.state
      this.setState({
        LogCardType: id,
      })
      //查看其他类型
      this.getLogDeatil(logInfo.patID, id)
    }

    //卡操作成功后----关闭弹窗
    closeCardPop = () => {
      this.visibleTip()
      this.setState({
        visibleCardTips: false,
        flag: -1,
      })
      // this.nowFind()
      clearInterval(timer)
    }
    nowFind = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          this.setState({
            values: values
          })
          this.setState({ page: this.state.page, pageSize: this.state.pageSize }, () => {
            let { values } = this.state;
            this.getFindDate(values)
          })
        }
      })
    }
    //取消挂失 / 挂失 注销  成功后
    cardSuccess = (flag, info) => {
      let datas = {}
      //卡收费记录
      if (info.cardPayMentID != "") {
        datas = {
          params: [{
            cardID: info.patCardID,
            flag: flag,
            card: {
              recordID: info.cardPayMentID,//卡收费记录
              cost: info.patCardCost,//卡费
              payWID: "",//支付方式
            }
          }],
        }
      } else {
        datas = {
          params: [{
            cardID: info.patCardID,
            flag: flag,
          }],
        }
      }
      $http.post('urlS', this, {
        code: '03030010',
        data: datas,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              visibleCardTips: true,
              reciprocal: 2
            })
            this.timerStart()
            this.nowFind()
          }
        }
      })
    }
    //2s后自动关闭提示
    timerStart = () => {
      timer = setInterval(() => {
        if (this.state.reciprocal > 0) {
          this.setState({
            reciprocal: this.state.reciprocal - 1
          })
        } else {
          this.closeCardPop()
        }
      }, 1000);
    }
    //卡操作前 ---提示
    cardBefor = (flag, info) => {
      let self = this
      confirm({
        key: flag == 1 ? '1' : (flag == 2 ? '2' : (flag == 5 ? '3' : '4')),
        title: flag == 1 ? '取消挂失后，该卡将继续启用，启用该卡？' : (flag == 2 ? '挂失后，将不能使用该卡，是否确认挂失？' : (flag == 5 ? '注销后，将不能使用该卡，是否确认注销？' : false)),
        centered: true,
        content: (
          <p style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: '16px' }}>
            病人:<span style={{ marginRight: '6px' }}>{info ? info.patName : ''}</span>
            <span style={{ marginRight: '6px' }}>{info ? info.patCardTypeDesc : ''},</span>
            <span>{info ? info.patCardNo : ''}</span></p>
        ),
        onOk() {
          self.cardSuccess(flag, info)
          Modal.destroyAll()
        },
        onCancel() {
        },
      });
    }
    //点击进行卡操作 1取消挂失 2挂失 3换卡 4补卡 5注销 6 绑定
    handleCard = (flag, info, LogCardType) => {
      this.props.form.setFieldsValue({ cardBindNo: undefined })
      this.props.form.setFieldsValue({ cardNumber: undefined })
      this.setState({
        flag: flag,
        cardInfo: info,
        reciprocal: 2,
        bindVail: true
      })
      if (flag == 1) {
        this.cardBefor(flag, info)
      } if (flag == 2) {
        this.cardBefor(flag, info)
      } if (flag == 5) {
        if (info.balance && info.balance > 0) {
          Modal.warning({
            key: 'loss',
            title: '不能注销',
            centered: true,
            okText: '好的',
            content: (
              <div>
                <p style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: '14px' }}>病人登记号:<span style={{ marginRight: '6px' }}>{info.patNo}</span>账户余额:<span>￥{info.banlance ? info.banlance : 0}</span></p>
                <p style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: '14px' }}><span>{info.patName}</span><span>仅一张卡，注销后将不能启用，请先进行退款</span></p>
              </div>
            ),
            onOk() {
            },
            onCancel() {
              Modal.destroyAll()
            }
          });
        } else {
          this.cardBefor(flag, info)
        }
      } if (flag == 4 || flag == 3) { //补卡 换卡
        this.setState({
          visible: true,
          nowCost: flag == 4 ? info.patCardCost : '',
          initpatCardID: this.props.form.getFieldValue('newCard')
        })
        this.props.form.setFieldsValue({ originalCard: info.patName + ',' + info.patCardTypeDesc + ',' + info.patCardNo })
        for (var i = 0; i < this.state.baseParms.cardType.length; i++) {
          if (info.patCardTypeDesc == this.state.baseParms.cardType[i].descripts) {
            this.props.form.setFieldsValue({ newCard: this.state.baseParms.cardType[i].id });
            this.setState({
              repariFeeFlag: this.state.baseParms.cardType[i].repariFeeFlag,
              replenishZero: this.state.baseParms.cardType[i].replenishZero,
              initpatCardID: this.state.baseParms.cardType[i].id,
              nowReadCard: this.state.baseParms.cardType[i].readMode,
              idCardCodePop: this.state.baseParms.cardType[i].code,
              cardLengthCard: this.state.baseParms.cardType[i].cardLength && this.state.baseParms.cardType[i].cardLength != "" ? this.state.baseParms.cardType[i].cardLength + "位," : "",
            });
          }
        }
        if (this.state.nowReadCard == 'R') {
          if (flag == 3) {
            setTimeout(() => {
              this.changeCardButton.current.buttonNode.focus();
            }, 300)
          } else {
            setTimeout(() => {
              this.patchCardButton.current.buttonNode.focus();
            }, 300)
          }
        } else {
          if (flag == 4) {
            if (this.patchCardNu.current) {
              setTimeout(() => {
                this.patchCardNu.current.focus();
              }, 300)
            }
          } else {
            setTimeout(() => {
              this.changeCardNu.current.focus();
            }, 300)
          }

        }
        if (flag == 4) {
          this.props.form.setFieldsValue({ patchMoney: '￥' + info.patCardCost });
          this.props.form.setFieldsValue({ transactionNo: info.transactionNo ? info.transactionNo : this.state.baseParms.transactionNo })
        }

      } if (flag == 6) {//绑卡
        this.setState({
          showLog: 0,
          visibleLog: false,
          bindLoading: LogCardType != undefined ? false : true,
          nowCost: info.patCardCost,
        })
        this.props.form.setFieldsValue({ newCardMoney: '￥' + info.patCardCost })
        let data = {}
        data = {
          params: [{
            cardTypeID: info.patCardTypeID,
            cardNo: info.patCardNo,
            credTypeID: '',
            credNo: ''
          }],
        }
        $http.post('urlS', this, {
          code: '03030009',
          data: data,
          success: function (res) {
            if (+res.errorCode === 0 && res.result.data.length > 0) {
              //判断接口请求成功数据是否返回成功
              this.bingCardArr(res.result.data)
              for (var i = 0; i < res.result.data.length; i++) {
                res.result.data[i].key = i + "cardId"
                if (info.patCardNo == res.result.data[i].cardNo && info.patCardStatusDesc == res.result.data[i].cardStatusDesc) {
                  this.setState({
                    rowId: res.result.data[i].cardID
                  })
                }
              }
              this.setState({
                bindLoading: false,
                visible: true,
                informationData: res.result.data,
              }, () => {
                let canBindArr = []
                const { bindCardArr } = this.state
                this.props.form.setFieldsValue({ cardBindNo: undefined })
                if (bindCardArr) {
                  this.state.baseParms.cardType.map((carditem, index) => {
                    bindCardArr.map((item, index) => {
                      if (item.cardTypeDesc == carditem.descripts) {
                        carditem["disabled"] = true
                      }
                    })
                  })
                  this.state.baseParms.cardType.map((carditem, index) => {
                    if (carditem.disabled == undefined || carditem.disabled == false) {
                      canBindArr.push(carditem)
                    }
                  })
                  if (LogCardType != undefined) {
                    this.logBind(LogCardType)
                  } else {
                    this.props.form.setFieldsValue({
                      newCard: canBindArr[0].id && canBindArr[0].id ? canBindArr[0].id : undefined,
                      newCardMoney: '￥' + canBindArr[0].cardCost
                    })
                    this.setState({
                      repariFeeFlag: canBindArr[0].repariFeeFlag,
                      replenishZero: canBindArr[0].replenishZero,
                      nowCost: canBindArr[0].cardCost,
                      initpatCardID: canBindArr[0].id && canBindArr[0].id ? canBindArr[0].id : undefined,
                      nowReadCard: canBindArr[0].readMode,
                      idCardCodePop: canBindArr[0].code,
                      autoCreateCardNo: canBindArr[0].autoCreateCardNo,
                      cardLengthCard: canBindArr[0].cardLength && canBindArr[0].cardLength != "" ? canBindArr[0].cardLength + "位," : "",
                    }, () => {
                      if (this.state.autoCreateCardNo == "Y") {
                        this.setState({
                          bindVail: false
                        }, () => {
                          setTimeout(() => {
                            this.bindCardButton.current.buttonNode.focus();
                          }, 1000)
                        })
                      } else {
                        if (this.state.nowReadCard == 'I' || this.state.nowReadCard == '') {
                          setTimeout(() => {
                            this.bindCardNu.current.focus();
                          }, 300)
                        } else {
                          setTimeout(() => {
                            this.bindCardButton.current.buttonNode.focus();
                          }, 1000)
                        }
                      }
                    })
                  }
                }
              })
            } else {
              this.setState({
                bindLoading: false,
                readLoading: false
              })
            }
          }, error: function () {
            this.setState({
              bindLoading: false,
              readLoading: false
            })
          }
        })
      } else {

      }
    }
    //日志绑定
    logBind = (LogCardType) => {
      this.props.form.setFieldsValue({ newCard: LogCardType, });
      this.state.baseParms.cardType.map((item) => {
        if (LogCardType == item.id) {
          this.props.form.setFieldsValue({ newCardMoney: '￥' + item.cardCost, });
          this.setState({
            bindLoading: false,
            visible: true,
            repariFeeFlag: item.repariFeeFlag,
            replenishZero: item.replenishZero,
            nowCost: item.cardCost,
            initpatCardID: item.id && item.id ? item.id : undefined,
            nowReadCard: item.readMode,
            idCardCodePop: item.code,
            cardLengthCard: item.cardLength && item.cardLength != "" ? item.cardLength + "位," : "",
          }, () => {

            let canBindArr = []
            const { bindCardArr } = this.state
            this.props.form.setFieldsValue({ cardBindNo: undefined })
            if (bindCardArr) {
              this.state.baseParms.cardType.map((carditem, index) => {
                bindCardArr.map((item, index) => {
                  if (item.cardTypeDesc == carditem.descripts) {
                    carditem["disabled"] = true
                  }
                })
              })
              this.state.baseParms.cardType.map((carditem, index) => {
                if (carditem.disabled == undefined || carditem.disabled == false) {
                  canBindArr.push(carditem)
                }
              })
            }
            if (this.state.nowReadCard == 'I' || this.state.nowReadCard == '') {
              setTimeout(() => {
                this.bindCardNu.current.focus();
              }, 300)
            } else {
              setTimeout(() => {
                this.bindCardButton.current.buttonNode.focus();
              }, 1000)
            }
          })
        }
      })
    }
    //点击绑卡后 进行默认行选中
    setRowClassName = (record) => {
      //  console.log('绑卡后',record)
      return record.cardID === this.state.rowId ? 'clickRowStyle' : '';
    }
    //点击查询后 表格行
    setRowClassNames = (record) => {
      return record.patCardID === this.state.rowIds ? 'clickRowStyle' : '';
    }
    //点击Row
    onClickRow = (record) => {
      return {
        onClick: () => {
          this.setState({
            parms: record,
          })
          if (this.state.rowId === "") {
            this.setState({
              rowIds: record.patCardID,
            });
          } else {
            if (this.state.rowId !== record.patCardID) {
              this.setState({
                rowIds: record.patCardID,
              });
            } else {
              this.setState({
                rowIds: "",
                detailInfo: {},
              });
            }
          }
        },
      };
    }
    //选择查询卡类型 输入框清空
    handleRestNo = () => {
      for (var j = 0; j < this.state.baseParms.cardType.length; j++) {
        this.state.baseParms.cardType[j]['disabled'] = false
      }
    }
    //选择查询卡类型
    patCardType = (data) => {
      for (var i = 0; i < this.state.baseParms.cardType.length; i++) {
        if (data == this.state.baseParms.cardType[i].id) {
          this.setState({
            patReplenishZero: this.state.baseParms.cardType[i].replenishZero,
            patCardLength: this.state.baseParms.cardType[i].cardLength
          })
        }
      }
    }
    //选择卡类型需要补0
    handleZero = () => {
      if (this.state.patReplenishZero == "Y"
        && parseInt(this.state.patCardLength)
        && parseInt(this.state.patCardLength) > 0
        && this.props.form.getFieldValue('patCardNo')
        && this.props.form.getFieldValue('patCardNo').length != 0) {
        let No = this.props.form.getFieldValue('patCardNo') ? this.props.form.getFieldValue('patCardNo') : ''
        let length = parseInt(this.state.patCardLength)
        let num = (Array(length).join(0) + No).slice(-length)
        this.props.form.setFieldsValue({ patCardNo: num });
      }
      if (this.props.form.getFieldValue('patCardNo') && this.props.form.getFieldValue('patCardNo').length != 0) {
        this.findCard()
      }
    }
    //进行卡后验证
    checkIs() {
      if ((this.props.form.getFieldValue('cardBindNo') && this.props.form.getFieldValue('cardBindNo').length > 0) || (this.props.form.getFieldValue('cardNumber') && this.props.form.getFieldValue('cardNumber').length > 0)) {
        if (this.props.form.getFieldValue('newCard') && this.props.form.getFieldValue('newCard')) {
          let data = {}
          if (this.state.flag == 3 || this.state.flag == 4) {
            data = {
              params: [{
                cardTypeID: this.props.form.getFieldValue('newCard') ? this.props.form.getFieldValue('newCard') : '',
                cardNo: this.props.form.getFieldValue('cardNumber') ? this.props.form.getFieldValue('cardNumber') : '',
                credTypeID: '',
                credNo: ''
              }],
            }
          } else {
            data = {
              params: [{
                cardTypeID: this.props.form.getFieldValue('newCard') ? this.props.form.getFieldValue('newCard') : '',
                cardNo: this.props.form.getFieldValue('cardBindNo') ? this.props.form.getFieldValue('cardBindNo') : '',
                credTypeID: '',
                credNo: ''
              }],
            }
          }

          $http.post('urlS', this, {
            code: '03030009',
            data: data,
            success: function (res) {
              if (+res.errorCode === 0 && res.result.data.length > 0) {
                var str = "";
                str = res.result.patInfo.patNo;
                for (var i = 0; i < res.result.data.length; i++) {
                  if (this.state.flag == 3 || this.state.flag == 4) {
                    if (this.props.form.getFieldValue('cardNumber') != res.result.data[i].cardNo) {
                      message.warning('卡号已存在,病人ID：' + str);
                      return
                    }
                    if (this.props.form.getFieldValue('cardNumber') == res.result.data[i].cardNo && (res.result.data[i].cardStatusDesc == "作废")) {
                      message.warning('该卡卡号已被作废');
                      this.setState({
                        bindVail: true
                      })
                      return
                    }
                    if (this.props.form.getFieldValue('cardNumber') == res.result.data[i].cardNo && (res.result.data[i].cardStatusDesc != "回收" || res.result.data[i].cardStatusDesc != "退卡")) {
                      str = res.result.patInfo.patNo;
                      if (res.result.data[i].code == "12") {
                        message.warning('非本人证件号码，不能绑定')
                        return
                      } else {
                        message.warning('卡号已存在,病人ID：' + str);
                      }
                      this.setState({
                        bindVail: true,
                        bindMoreInfo: false,
                      })
                      return
                    }
                  } else {
                    if (this.props.form.getFieldValue('cardBindNo') == res.result.data[i].cardNo && (res.result.data[i].cardStatusDesc == "作废")) {
                      message.warning('该卡卡号已被作废');
                      this.setState({
                        bindVail: true,
                        bindMoreInfo: false,
                      })
                      return
                    }
                    if (this.props.form.getFieldValue('cardBindNo') == res.result.data[i].cardNo && (res.result.data[i].cardStatusDesc != "回收" || res.result.data[i].cardStatusDesc != "退卡")) {
                      str = res.result.patInfo.patNo;
                      if (res.result.data[i].code == "12") {
                        message.warning('非本人证件号码，不能绑定')
                      } else {
                        message.warning('卡号已存在,病人ID：' + str);
                      }
                      this.setState({
                        bindVail: true,
                        bindMoreInfo: false,
                      })
                      return
                    }
                  }
                }

              } if (+res.errorCode === 0 && res.result.data.length == 0) {
                if (this.state.nowCost != 0 && this.state.flag != 3 && this.state.flag != 4) {
                  this.setState({
                    bindVail: false,
                    bindMoreInfo: true,
                    flag: 7
                  })
                  setTimeout(() => {
                    this.bindOkButton.current.buttonNode.focus();
                  }, 300)
                  this.props.form.setFieldsValue({ transactionNo: this.state.baseParms.transactionNo })
                } else {
                  if (this.state.flag == 3) {
                    setTimeout(() => {
                      this.changeOkButton.current.buttonNode.focus();
                    }, 300)
                  }
                  if (this.state.flag == 4) {
                    setTimeout(() => {
                      this.patchOkButton.current.buttonNode.focus();
                    }, 300)
                  }
                  if (this.state.flag == 6 || this.state.flag == 7) {
                    setTimeout(() => {
                      this.bindOkButton.current.buttonNode.focus();
                    }, 300)
                  }
                  this.setState({
                    bindMoreInfo: false,
                    bindVail: false,
                  })
                  this.props.form.setFieldsValue({ transactionNo: undefined })
                }
                if (this.state.flag == 3 || this.state.flag == 4) {
                  this.setState({
                    bindVail: false,
                  })
                  this.props.form.setFieldsValue({ transactionNo: this.state.baseParms.transactionNo })
                }
              }
            }, error: function () {
              this.setState({
                bindVail: true
              })
            }
          })
        } else {
          this.setState({
            bindVail: true,
          })
          message.warning('请选择建卡类型');
        }
      } else {
        this.setState({
          bindVail: true,
        })
        message.warning('请输入卡号');
      }
    }
    //输入改变时 不可绑定
    closeBindVail = () => {
      this.visibleTip()
      this.setState({
        bindVail: true
      })
    }
    //选择建卡类型 格式验证
    validFunction = (rule, value, callback) => {
      const { replenishZero, idCardCodePop, cardLengthCard } = this.state
      //身份证 18位  就诊卡 银医卡 条形码 根据配置合理提示 不根据固定的卡类型做判断 根据配置项是否可补0以及卡号长度进行检测 区分身份证 code == 12
      if (this.state.flag == 3 || this.state.flag == 4) {
        this.chaeckLength()
      } else {
        this.checkLength()
      }
      let diffLength = cardLengthCard;
      if (idCardCodePop == '02') {
        var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
        var tip = "";
        var pass = true;

        if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
          this.setState({
            bindVail: true
          })
          callback('身份证号格式错误'); // 校验未通过
          return;
        }

        else if (!city[value.substr(0, 2)]) {
          this.setState({
            bindVail: true
          })
          callback('身份证号格式错误'); // 校验未通过
          return;
        }
        else {
          //18位身份证需要验证最后一位校验位
          if (value.length == 18) {
            value = value.split('');
            //∑(ai×Wi)(mod 11)
            //加权因子
            var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            //校验位
            var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
            var sum = 0;
            var ai = 0;
            var wi = 0;
            for (var i = 0; i < 17; i++) {
              ai = value[i];
              wi = factor[i];
              sum += ai * wi;
            }
            var last = parity[sum % 11];
            //最后一位不区分大小写
            if (value[17] == 'x') value[17] = value[17].toUpperCase();
            if (parity[sum % 11] != value[17]) {
              this.setState({
                bindVail: true
              })
              callback('最后一位校验位错误'); // 校验未通过
              return;
            } else {
              this.checkIs()
            }
          }
        }
        callback();
      }
      if (replenishZero == "N" && parseInt(diffLength) > 0) {
        let length = parseInt(diffLength)
        var reg = new RegExp('^\\d{' + length + '}$')
        if (!reg.test(value)) {
          this.setState({
            bindVail: true
          })
          callback('该卡号长度不正确，请输入有效卡号'); // 校验未通过
          return;
        } else {
          this.checkIs()
        }
      }
      if (replenishZero == "Y" && parseInt(diffLength) > 0) {
        let length = parseInt(diffLength)
        var reg = new RegExp("^\\d{" + length + "}$");
        if (!reg.test(value)) {
          this.setState({
            bindVail: true
          })
          callback('该卡号无效，请输入有效卡号,数字可自动补0'); // 校验未通过
          return;
        } else {
          this.checkIs()
        }
      }
      if (replenishZero == "N" && !parseInt(diffLength) > 0) {
        if (!/^[0-9]*$/.test(value)) {
          this.setState({
            bindVail: true
          })
          callback('请输入任意数字'); // 校验未通过
          return;
        } else {
          if (value.length != 0) {
            this.checkIs()
          } else {
            this.setState({
              bindVail: true
            })
          }
        }
      }
      callback();
    }
    //检测卡类型是否补0
    checkLength = () => {
      if (this.state.replenishZero == "Y"
        && parseInt(this.state.cardLengthCard)
        && parseInt(this.state.cardLengthCard) > 0
        && this.props.form.getFieldValue('cardBindNo')
        && this.props.form.getFieldValue('cardBindNo').length != 0
      ) {
        let No = this.props.form.getFieldValue('cardBindNo') ? this.props.form.getFieldValue('cardBindNo') : ''
        let length = parseInt(this.state.cardLengthCard)
        let num = (Array(length).join(0) + No).slice(-length)
        this.props.form.setFieldsValue({ cardBindNo: num });
        this.checkIs()
      }
    }
    //绑定卡 选择卡类型
    handleBindCardType = (id, code, readMode, cardLength, cardCost, invFlag, replenishZero, repariFeeFlag, autoCreateCardNo) => {
      this.props.form.setFieldsValue({ cardBindNo: undefined })
      this.setState({
        bindVail: true,
      })
      this.props.form.setFieldsValue({ newCard: id })
      this.props.form.setFieldsValue({ newCardMoney: '￥' + cardCost })
      this.setState({
        repariFeeFlag,
        replenishZero,
        nowCost: cardCost,
        initpatCardID: id,
        nowReadCard: readMode,
        autoCreateCardNo,
        idCardCodePop: code,
        cardLengthCard: cardLength && cardLength != "" ? cardLength + "位," : "",
      }, () => {
        if (this.state.autoCreateCardNo == "Y") {
          this.setState({
            bindVail: false
          }, () => {
            setTimeout(() => {
              this.bindCardButton.current.buttonNode.focus();
            }, 300)
          })
        } else {
          if (this.state.nowReadCard == 'I' || this.state.nowReadCard == '') {
            this.setState({
              bindVail: true
            })
            setTimeout(() => {
              this.bindCardNu.current.focus();
            }, 300)
          } else {
            if (this.state.nowReadCard == "R") {
              this.setState({
                bindVail: true
              })
              setTimeout(() => {
                this.bindCardButton.current.buttonNode.focus();
              }, 300)
            }
          }
        }
      })
    }
    //绑定卡时 读卡
    handleCardReading = () => {
      const { initpatCardID } = this.state
      this.readCard.ReadCard(initpatCardID, "R", (json) => {
        //读卡完成 信息回显  绑卡 换卡 补卡
        if (this.state.flag == 3) {
          this.props.form.setFieldsValue({ cardNumber: json.cardNo, newCard: json.cardTypeID })
          this.setState({
            bindVail: false,
            changeNoVisible: false
          })
          setTimeout(() => {
            this.changeOkButton.current.buttonNode.focus();
          }, 300)
        }
        else if (this.state.flag == 4) {
          this.props.form.setFieldsValue({ cardNumber: json.cardNo, newCard: json.cardTypeID })
          this.setState({
            bindVail: false,
            patchNoVisible: false
          })
          setTimeout(() => {
            this.patchOkButton.current.buttonNode.focus();
          }, 300)
        } else {
          this.props.form.setFieldsValue({ cardBindNo: json.cardNo, newCard: json.cardTypeID })
          this.setState({
            initpatCardID: json.cardTypeID,
            bindNoVisible: false
          })
          if (this.state.nowCostCard != 0 && this.state.repariFeeFlagCard != "Y" && this.state.flag != 3 && this.state.flag != 4) {
            this.setState({
              bindVail: false,
              bindMoreInfo: true,
              flag: 7
            })
            setTimeout(() => {
              this.bindOkButton.current.buttonNode.focus();
            }, 300)
            this.props.form.setFieldsValue({ transactionNo: this.state.baseParms.transactionNo })
          } else {
            this.setState({
              bindMoreInfo: false,
              bindVail: false,
            })
            setTimeout(() => {
              this.bindOkButton.current.buttonNode.focus();
            }, 300)
          }
        }
      })
    }
    //回车 确认卡操作
    handleOnKeydown = (e) => {
      var e = window.event || e;
      switch (e.keyCode) {
        case 13:
          e.preventDefault()
          this.handleFlag(this.state.flag)
          break;
      }
    }
    //确认卡操作 
    handleFlag = (flag) => {
      if (flag == 3 || flag == 4) {
        let cardType = ''
        for (var i = 0; i < this.state.baseParms.cardType.length; i++) {
          if (this.state.cardInfo.cardType == this.state.baseParms.cardType[i].descripts) {
            cardType = this.state.baseParms.cardType[i].id;
          }
        }
        let datas = {}
        if (flag == 3) { //换卡
          datas = {
            params: [{
              cardID: this.state.cardInfo.patCardID,
              flag: flag,
              newCard: {
                patID: this.state.cardInfo.patID,
                cardTypeID: this.props.form.getFieldValue('newCard'),
                cardNo: flag == 4 ? this.props.form.getFieldValue('cardNumber') : this.props.form.getFieldValue('cardNumber'),
                userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
              }
            }],
          }
        } else {
          datas = {
            params: [{
              cardID: this.state.cardInfo.patCardID,
              flag: flag,
              newCard: {
                patID: this.state.cardInfo.patID,
                cardTypeID: this.props.form.getFieldValue('newCard'),
                cardNo: flag == 4 ? this.props.form.getFieldValue('cardNumber') : this.props.form.getFieldValue('cardNumber'),
                userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                cardCost: this.state.cardInfo.patCardCost,
                ip: React.$getSessionData('ipConfig')?.ipv4 || '',
                cardPayMethodID: this.props.form.getFieldValue('payMethods'),
                tradeNum: this.state.baseParms.transactionNo,
              }
            }],
          }
        }

        $http.post('urlS', this, {
          code: '03030010',
          data: datas,
          success: function (res) {
            if (+res.errorCode === 0) {
              if (res.print && res.print) {
                $loadTemplate("CardFeeReceipt", res.print);
              }
              //跳至最后一页 并定位到刚添加的这条记录
              let lastPage = Math.ceil((this.state.total + 1) / this.state.pageSize)
              this.onChangeLast(lastPage, this.state.pageSize)
              this.handleRest()
              this.setState({
                visibleCardTips: true,
                postLoading: false,
                visible: false,
                rowIds: String(res.cardID)
              })
              this.timerStart()
            } else {
              this.setState({
                postLoading: false,
              })
            }
          },
          error: function () {
            this.setState({
              postLoading: false,
            })
          }
        })
      }
      if (flag == 7 || flag == 6) {
        this.setState({
          postLoading: true,
        })
        this.setState({
          bindCardType: ""
        })
        this.state.baseParms.cardType.map((item, i) => {
          if (this.props.form.getFieldValue('newCard') == item.id) {
            this.setState({
              bindCardType: item.descripts
            })
          }
        })

        let data = {}
        //未设置仅补卡时收费 且 有卡费时
        if (this.state.repariFeeFlag != "Y" && this.state.nowCost != 0 && this.state.nowCost != "") {
          data = {
            params: [{
              userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
              hospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
              groupID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID : "",
              locID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).locID : "",
              patient: {
                patID: this.state.cardInfo.patID,
                active: "",
                createUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                companyTel: ''
              },
              card: {
                cardTypeID: this.props.form.getFieldValue('newCard'),
                cardNo: this.props.form.getFieldValue('cardBindNo'),
                userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                cardCost: this.state.repariFeeFlag != "Y" ? this.state.nowCost : "0",
                ip: React.$getSessionData('ipConfig')?.ipv4 || '',
                cardPayMethodID: this.props.form.getFieldValue('payMethods'),
                tradeNum: this.state.baseParms.transactionNo,
              },
              accm: {
                passWord: "",
                deposit: "",
                groupFlag: "",
              },

            }]
          }
        } else {
          data = {
            params: [{
              userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
              hospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
              groupID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID : "",
              locID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).locID : "",
              patient: {
                patID: this.state.cardInfo.patID,
                active: "",
                createUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                companyTel: ''
              },
              card: {
                cardTypeID: this.props.form.getFieldValue('newCard'),
                cardNo: this.props.form.getFieldValue('cardBindNo'),
                userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
              },
              accm: {
                passWord: "",
                deposit: "",
                groupFlag: "",
              },

            }]
          }
        }
        $http.post('urlS', this, {
          code: '03030003',
          data: data,
          success: function (res) {
            if (+res.errorCode === 0) {
              if (res.print && res.print) {
                $loadTemplate("CardFeeReceipt", res.print);
              }
              //跳至最后一页 并定位到刚添加的这条记录
              let lastPage = Math.ceil((this.state.total + 1) / this.state.pageSize)
              this.onChangeLast(lastPage, this.state.pageSize)
              this.setState({
                visibleCardTips: true,
                postLoading: false,
                visible: false,
                rowIds: String(res.cardID)
              })
              this.handleRest()
              this.timerStart()
            } else {
              this.setState({
                postLoading: false
              })
            }
          }
        })
      }
    }
    //重置卡操作表单
    handleRest = () => {
      this.props.form.setFieldsValue({ newCard: undefined })
      this.props.form.setFieldsValue({ patchMoney: undefined })
      this.props.form.setFieldsValue({ transactionNo: undefined })
      this.props.form.setFieldsValue({ originalCard: undefined })
      this.props.form.setFieldsValue({ payMethods: '1' })
      this.setState({
        initpatCardID: '',
        bindCardArr: [],
      })
      for (var j = 0; j < this.state.baseParms.cardType.length; j++) {
        this.state.baseParms.cardType[j]['disabled'] = false
      }
    }
    //补卡 换卡 自动补0
    chaeckLength = () => {
      if (this.state.replenishZero == "Y"
        && parseInt(this.state.cardLengthCard)
        && parseInt(this.state.cardLengthCard) > 0
        && this.props.form.getFieldValue('cardNumber')
        && this.props.form.getFieldValue('cardNumber').length != 0) {
        let No = this.props.form.getFieldValue('cardNumber') ? this.props.form.getFieldValue('cardNumber') : ''
        let length = parseInt(this.state.cardLengthCard)
        let num = (Array(length).join(0) + No).slice(-length)
        this.props.form.setFieldsValue({ cardNumber: num });
        this.checkIs()
      }
    }
    //查看日志
    handleLog = (info) => {
      this.setState({
        logInfo: info,
        showLog: 1,
        logBeforeCardTypeID: info.patCardTypeID,
        logBeforeCardNo: info.patCardNo,
      })
      let data = {}
      data = {
        params: [{
          patCardID: info.patCardID,
        }],
      }
      $http.post('urlS', this, {
        code: '03030014',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            //判断接口请求成功数据是否返回成功
            for (var i = 0; i < res.data.length; i++) {
              res.data[i].key = i + "log"
            }
            this.setState({
              visibleLog: true,
              logData: res.data,
            })
          }
        }
      })
    }
    //选择卡类型id
    handleSelectCard = (data) => {
      if (data) {
        this.setState({
          patCardTypeID: data
        })
      } else {
        this.setState({
          patCardTypeID: ""
        })
      }
      for (var i = 0; i < this.state.baseParms.cardType.length; i++) {
        if (data == this.state.baseParms.cardType[i].id) {
          this.setState({
            initCardDr: this.state.baseParms.cardType[i].id,
            nowRead: this.state.baseParms.cardType[i].readMode,
            idCardCode: this.state.baseParms.cardType[i].code,
            cardLength: this.state.baseParms.cardType[i].cardLength && this.state.baseParms.cardType[i].cardLength != "" ? this.state.baseParms.cardType[i].cardLength + "位," : "",
            replenishZero: this.state.baseParms.cardType[i].replenishZero,
            repariFeeFlag: this.state.baseParms.cardType[i].repariFeeFlag,
            nowCost: this.state.baseParms.cardType[i].cardCost,
            nowInv: this.state.baseParms.cardType[i].invFlag,
          })
        }
      }
    }
    //导出查询到的所有数据
    getAllData = () => {
      let { cardType, patCardNo, values } = this.state;
      let data = {}
      data = {
        params: [{
          patCardTypeID: cardType || "",
          patCardNo: patCardNo || "",
          number: values.number,
          dateFrom: values.dateFrom ? moment(values.dateFrom).format('YYYY-MM-DD') : undefined,
          dateTo: values.dateTo ? moment(values.dateTo).format('YYYY-MM-DD') : undefined,
          patCardStatusID: values.cardStatus,
          patSocialStatusID: values.socialStatusDr,
          patSourceID: values.patSourceID,
        }],
        pagination: [{
          pageSize: 10000,
          currentPage: 1,
        }]
      }
      $http.post('urlS', this, {
        code: '03030011',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0 && res.result) {
            for (var i = 0; i < res.result.data.length; i++) {
              res.result.data[i].key = i + 'card'
            }
            this.setState({ allData: res.result.data, }, () => {
            })
          } else {
          }
        },
        error: function () {
        }
      })
    }
    //导出查询表格
    exportData = () => {
      const { columnsTo } = this.state
      this.setState({
        exportLoading: true,
      })
      this.getAllData()
      columnsTo && columnsTo.map((item, index) => {
        if (item.title && item.title) {
          columnsTo[index].title = columnsTo[index].title
        }
      })
      //请求
      setTimeout(() => {
        this.setState({
          exportLoading: false,
        })
        handleExcel.exportExcel(columnsTo, this.state.allData, '一卡通列表')
      }, 1000)
    }
    render() {
      const { getFieldDecorator } = this.props.form;
      const { nowRead, widthTotal, columns, patFormData, exportLoading, replenishZero, autoCreateCardNo, cardLength, startNoMessage, bindNoMessage, patchNoMessage, changeNoMessage, logInfo, LogCardType, logWaterData, showLog, nowReadCard, cardLengthCard, repariFeeFlag, bindMoreInfo, flag, baseParms, logData, reciprocal, cardInfo, nowCost, readLoading, postLoading, searchLoading, initpatCardID, informationData, initCard, bindVail, bindLoading } = this.state;
      let length = logWaterData ? logWaterData.length : 0;
      const mesIcon = <Icon type="exclamation-circle" />
      let searchBtnConfig = {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
        lg: { span: 8 }
      }
      let card = []
      baseParms.cardType && baseParms.cardType.map(item => {
        card.push(<Option key={item.id} disabled={item.disabled} onClick={() => this.handleBindCardType(item.id, item.code, item.readMode, item.cardLength, item.cardCost, item.invFlag, item.replenishZero, item.repariFeeFlag, item.autoCreateCardNo)} value={item.id} title={item.descripts}>{item.descripts}</Option>)
      })

      let credType = []
      baseParms.credType && baseParms.credType.map(item => {
        credType.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
      })

      let socialStatus = []
      baseParms.socialStatus && baseParms.socialStatus.map(item => {
        socialStatus.push(<Option key={item.id} value={item.id} title={item.descripts}>{item.descripts}</Option>)
      })

      let cardStatus = []
      baseParms.cardStatus && baseParms.cardStatus.map(item => {
        cardStatus.push(<Option key={item.id} value={item.id} title={item.descripts}>{item.descripts}</Option>)
      })

      let payMethod = []
      baseParms.payMethod && baseParms.payMethod.map(item => {
        payMethod.push(<Option key={item.id} value={item.id}>{item.descripts}</Option>)
      })
      //病人来源渠道
      let patFormOpt = []
      patFormData && patFormData.map(item => {
        patFormOpt.push(<Option key={item.id} value={item.id} title={item.descripts}>{item.descripts}</Option>)
      })


      let logWaterArr = []
      logWaterData && logWaterData.map((item, i) => {
        logWaterArr.push(
          <Step
            style={{ color: 'blue' }}
            key={i}
            description={
              <div key={i + 'log'} style={{ fontSize: '12px', marginTop: "26px" }}>
                <p style={{ margin: "0", color: "rgba(0, 0, 0, 0.65)" }}>{item.userInfo.userName}<Divider type="vertical" />{item.userInfo.dateTime}<Divider type="vertical" />{item.operateInfo.operate}</p>
                <p style={{ margin: "0", color: "rgba(0, 0, 0, 0.65)" }}>{item.operateInfo.operate != "注销" && item.operateInfo.operate != "挂失" && item.operateInfo.operate != "取消挂失" ? "新卡:" : ""}{item.operateInfo.cardTypeDesc}<Divider type="vertical" />{item.operateInfo.cardNo}<span style={{ background: "#cfcfcf", color: (item.operateInfo.cardStatusDesc == "正常" ? "green" : "red"), marginLeft: "4px" }}>{item.operateInfo.cardStatusDesc}</span></p>
                <p style={{ display: (item.note.title == "原卡:" ? "block" : "none"), margin: "0", color: "rgba(0, 0, 0, 0.65)" }}>{item.note.title}{item.note.cardTypeDesc}<Divider type="vertical" />{item.note.cardNo}<span style={{ marginLeft: "4px", background: "#cfcfcf", color: (item.note.cardStatusDesc == "正常" ? "green" : "red") }}>{item.note.cardStatusDesc}</span></p>
              </div>
            }
          />
        )
      })
      //日志变更信息展示表格
      const columnsLog = [
        {
          key: 1,
          title: '操作日期',
          dataIndex: 'date',
          width: 160,
          align: 'center'
        }, {
          key: 2,
          title: '操作时间',
          dataIndex: 'time',
          width: 130,
          align: 'center'
        }, {
          key: 4,
          title: '操作人',
          dataIndex: 'userName',
          width: 100,
          align: "center",
        }, {
          key: 5,
          title: '操作状态',
          dataIndex: 'patCardStatusDesc',
          width: 100,
          align: "center",
        }, {
          key: 6,
          title: '操作卡型',
          dataIndex: 'patCardTypeDesc',
          width: 200,
          align: "center",
        }, {
          key: 9,
          title: '操作类型',
          dataIndex: 'operate',
          width: 200,
          align: "center",
        }, {
          key: 7,
          title: '卡号',
          dataIndex: 'patCardNo',
          width: 260,
          align: "center",
        }, {
          key: 8,
          title: '备注',
          dataIndex: 'note',
          width: 200,
          align: "center",
        }, {
          key: 3,
          title: '医院',
          dataIndex: 'hospDescripts',
          width: 300,
          align: "center",
        }]
      //绑定页面卡信息表格
      const columnsBind = [
        {
          key: 1,
          title: '卡类型',
          dataIndex: 'cardTypeDesc',
          align: 'center'
        }, {
          key: 2,
          title: '卡号',
          dataIndex: 'cardNo',
          align: "center",
        }, {
          key: 3,
          title: '卡状态',
          dataIndex: 'cardStatusDesc',
          align: "center",
        },]

      const formItemInput = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      };
      return (
        // 
        <div style={{ width: '100%', height: '100%', background: '#F5F7FE' }} className="cardListDom" id='read-card-body'>
          <Spin spinning={bindLoading}>
            <Card className="department-header" style={{ float: 'left', width: '20%', height: store.getState().tableHeight.y + 242 }}>
              <Form>
                <Col span={25}>
                  <CardTypeRead getValue={this.getValue} getQuery={this.findCard} type={'update'}></CardTypeRead>
                </Col>
                <FormItem label='人员标识' {...formItemInput}>
                  {getFieldDecorator('number', {
                    initialValue: undefined,
                    rules: [{ required: false, message: '' }],
                  })(
                    <Input placeholder='病人ID/姓名/身份证号码/手机号码' allowClear onPressEnter={this.findCard} />
                  )}
                </FormItem>

                <Tooltip getPopupContainer={() => document.querySelector('.starDataDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolTipDom starData" title={<div className="titleIcon">{mesIcon}<span >{startNoMessage}</span></div>} visible={this.state.starNoVisible}>
                  <FormItem label='开始日期' {...formItemInput}>
                    {getFieldDecorator('dateFrom', {
                      initialValue: moment(),
                      rules: [{ required: this.props.form.getFieldValue('patCardNo') && this.props.form.getFieldValue('patCardNo').length > 0 || this.props.form.getFieldValue('number') && this.props.form.getFieldValue('number').length > 0 ? false : true, message: '请选择开始日期' }],
                    })(
                      <DatePicker allowClear={false} onFocus={this.visibleTip} onChange={this.visibleTip} style={{ width: '100%' }} placeholder={'建卡日期'} disabledDate={(curDate) => {
                        return curDate && curDate > moment().endOf('day');
                      }} />
                    )}
                  </FormItem>
                </Tooltip>

                <FormItem label='结束日期' {...formItemInput}>
                  {getFieldDecorator('dateTo', {
                    initialValue: moment(),
                    rules: [{ required: false, message: '' }],
                  })(
                    <DatePicker style={{ width: '100%' }} placeholder={'建卡日期'} disabledDate={(curDate) => {
                      return curDate && curDate > moment().endOf('day');
                    }} />
                  )}
                </FormItem>
                <FormItem label='卡状态' {...formItemInput}>
                  {getFieldDecorator('cardStatus', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select showSearch allowClear optionFilterProp="title" style={{ width: '100%' }}>
                      {cardStatus}
                    </Select>
                  )}
                </FormItem>
                <FormItem label='身份标签' {...formItemInput}>
                  {getFieldDecorator('socialStatusDr', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select placeholder='请选择身份标签' showSearch allowClear optionFilterProp="title" onSelect={this.handleposTag} style={{ width: '100%' }}>
                      {socialStatus}
                    </Select>
                  )}
                </FormItem>
                <FormItem label='来源渠道' {...formItemInput}>
                  {getFieldDecorator('patSourceID', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select placeholder='请选择来源渠道' showSearch allowClear optionFilterProp="title" style={{ width: '100%' }}>
                      {patFormOpt}
                    </Select>
                  )}
                </FormItem>
                {/* <FormItem  {...formItemInput}>
                  {getFieldDecorator('posInp', {
                    initialValue: undefined,
                    rules: [{ required: false, message: '' }],
                  })(
                    <Button onClick={this.findCard} loading={searchLoading} style={{ background: 'rgba(66,185,131,1)', color: '#fff' }}>查询</Button>
                  )}
                </FormItem> */}
                {/* <Col span={1} style={{ paddingLeft: "0 !important" }}>
                  <FormItem  {...formItemLayout}>
                    {getFieldDecorator('export', {
                      initialValue: undefined,
                      rules: [{ required: false, message: '' }],
                    })(
                      <Button
                        onClick={this.exportData}
                        loading={exportLoading}
                        type="primary"
                        disabled={this.state.cardData && this.state.cardData.length == 0}
                      >
                        导出
                    </Button>
                    )}
                  </FormItem>
                </Col> */}
                <Col span={25}>
                <Button onClick={this.findCard} loading={searchLoading} style={{ width:'48%' }} type='primary'>查询</Button>
                <Button
                        onClick={this.exportData} style={{width:'48%',marginLeft:10}}
                        loading={exportLoading}
                        type="primary"
                        disabled={this.state.cardData && this.state.cardData.length == 0}
                      >
                        导出
                    </Button>
                </Col>
              </Form>
            </Card>
            <Card style={{ float: 'right', width: '79.5%', height: store.getState().tableHeight.y + 242 }}>
              <Table
                scroll={{ x: widthTotal && widthTotal ? widthTotal : 1440,  y: store.getState().tableHeight.y + 145 }}
                columns={columns}
                dataSource={this.state.cardData}
                pagination={false}
                rowKey={record => record.key}
                onRow={this.onClickRow}
                rowClassName={this.setRowClassNames}
                bordered
              />
              <CommonPagination size={this.state.size} page={this.state.page} pageSize={this.state.pageSize} current={this.state.page} total={this.state.total} search={this.state.search}
                onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.cardData}
                onChange={this.onChange.bind(this)} />
            </Card>
            <Modal
              className="logModalDom"
              key='3'
              width='1100px'
              height="541.4px"
              visible={this.state.visibleLog}
              title='变更日志'
              centered={true}
              pagination={false}
              footer={null}
              onCancel={this.handleCancel}>
              <div style={{ display: (showLog == 1 ? "block" : "none") }}>
                <p style={{ textAlign: "right" }}>
                  <a style={{ borderBottom: "1px solid #40a9ff" }} href="javascript:;" onClick={this.checkFlowLog}>查看各卡类型操作流水</a>
                </p>
                <Table
                  columns={columnsLog}
                  dataSource={this.state.logData}
                  rowKey={record => record.key}
                  bordered
                  style={{
                    height: '380px',
                    overflow: 'auto'
                  }}
                  pagination={false}
                />
              </div>
              <div style={{ display: (showLog == 2 || showLog == 3 ? "block" : "none") }}>
                <Form>
                  <Row gutter={8} style={{ position: "relative" }}>
                    <Col span={25} >
                      <FormItem wrapperCol={{ span: 7 }}>
                        {getFieldDecorator('logCard', {
                          initialValue: undefined,
                          rules: [{ required: false, message: '' }],
                        })(
                          <Select
                            style={{ width: '100%' }}
                            onSelect={this.handleLogCardType}
                          >
                            {card}
                          </Select>
                        )}
                      </FormItem>
                      <p style={{ textAlign: "right", position: "absolute", top: "0px", right: "0" }}>
                        <a style={{ borderBottom: "1px solid #40a9ff" }} href="javascript:;" onClick={this.cenlFlowLog}>返回当前卡日志</a>
                      </p>
                    </Col >
                  </Row>
                </Form>
                <div className="logStepsDom" style={{ display: (showLog != 3 ? "block" : "none") }}>
                  <Steps >
                    {logWaterArr}
                  </Steps>
                </div>
                <div style={{ display: (showLog == 3 ? "block" : "none"), textAlign: "center", margin: "76px 0 46px" }}>
                  <p style={{ marginBottom: "46px" }}>此病人暂无该类型卡</p>
                  <p style={{
                    marginBottom: "46px",
                    display: (logInfo.allCardTypeFlag == 'Y'
                      || logInfo.patCardStatusDesc == "退卡"
                      || logInfo.patCardStatusDesc == "回收"
                      || logInfo.patCardStatusDesc == "作废" ? "none" : "block")
                  }}>
                    <Icon onClick={() => this.handleCard(6, logInfo, LogCardType)} type="plus" style={{ fontSize: "50px", color: "#cfcfcf" }} /></p>
                  <p style={{
                    marginBottom: "46px",
                    display: (logInfo.allCardTypeFlag == 'Y'
                      || logInfo.patCardStatusDesc == "退卡"
                      || logInfo.patCardStatusDesc == "回收"
                      || logInfo.patCardStatusDesc == "作废" ? "none" : "block")
                  }}>
                    <Button style={{ width: "122px", height: "40px" }} key="submits" type="primary" onClick={() => this.handleCard(6, logInfo, LogCardType)}>立即绑定</Button>
                  </p>
                </div>

              </div>
            </Modal>
            <Modal
              key='1'
              width='600px'
              visible={reciprocal == 0 ? false : this.state.visibleCardTips}
              title={[
                <div>
                  <p style={{ textAlign: 'center', height: '26px', fontSize: '18px' }}>
                    <span>{flag == 1 ? '取消挂失成功' : (flag == 2 ? '挂失成功' : (flag == 5 ? '注销成功' : (flag == 4 ? '补卡成功' : (flag == 3 ? '换卡成功' : (flag == 6 || flag == 7 ? '绑卡成功' : "false")))))}</span>
                    <span style={{ color: 'red' }}>{reciprocal}S</span>
                    <span>自动关闭</span>
                  </p>
                </div>
              ]}
              onCancel={this.closeCardPop}
              centered={true}
              footer={null}>
              <p style={{ textAlign: 'center', color: 'rgba(0, 0, 0, 0.85)', fontSize: '16px' }}>
                病人:<span style={{ marginRight: '6px' }}>{cardInfo ? cardInfo.patName : ''}</span>
                <span style={{ marginRight: '6px' }}>{flag == 7 || flag == 6 ? this.state.bindCardType : (cardInfo && cardInfo.patCardTypeDesc ? cardInfo.patCardTypeDesc : "--")},</span>
                卡号：<span>{flag == 7 || flag == 6 ? this.props.form.getFieldValue("cardBindNo") : (flag == 3 || flag == 4 ? this.props.form.getFieldValue("cardNumber") : (cardInfo ? cardInfo.patCardNo : '--'))}</span>
              </p>
            </Modal>
            <Modal
              className="bindDom"
              key='2'
              width='800px'
              visible={this.state.visible}
              title={flag === 6 || flag === 7 ? '绑定其他类型卡' : (flag === 4 ? '补卡' : (flag === 3 ? '换卡' : false))}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              footer={null}>
              <div style={{ display: (flag == 6 || flag == 7) ? "block" : "none" }}>
                <Form>
                  <Row gutter={8}>
                    <Col span={12} >
                      <FormItem label='需绑定类型' {...formItemLayoutBind}>
                        {getFieldDecorator('newCard', {
                          initialValue: initpatCardID && initpatCardID ? initpatCardID : undefined,
                          rules: [{ required: false, message: '' }],
                        })(
                          <Select
                            ref={this.bindCardType}
                            style={{ width: '100%' }}
                          >
                            {card}
                          </Select>
                        )}
                      </FormItem>
                    </Col >
                    <Col span={5} style={{ display: (this.state.repariFeeFlag != "Y" && nowCost != 0 ? 'block' : 'none') }}>
                      <FormItem label='新卡费用' {...formItemMoney}>
                        {getFieldDecorator('newCardMoney', {
                          initialValue: this.state.repariFeeFlag != "Y" && nowCost != 0 ? '￥' + nowCost : '￥' + 0,
                          rules: [{ required: false, message: '' },],
                        })(
                          <Input disabled />
                        )}
                      </FormItem>
                    </Col>
                    <Col span={6} style={{ height: "40px", lineHeight: "40px" }}>
                      <Button key="submits" ref={this.bindCardButton} disabled={nowReadCard == 'I' || autoCreateCardNo == "Y"} type="primary" style={{ marginRight: '12px' }} loading={readLoading} onClick={this.handleCardReading}>读卡</Button>
                      <Button key="submit" disabled={bindVail} ref={this.bindOkButton} onKeyDown={this.handleOnKeydown} type="primary" onClick={() => this.handleFlag(flag)}>绑定</Button>
                    </Col >
                  </Row>
                  <Row gutter={8}>
                    <Col span={19} className="bindNoDom">
                      <Tooltip getPopupContainer={() => document.querySelector('.bindNoDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolTipDom starData" title={<div className="titleIcon">{mesIcon}<span >{bindNoMessage}</span></div>} visible={this.state.bindNoVisible}>
                        <FormItem label='卡号' wrapperCol={{ span: 16 }} labelCol={{ span: 5 }} >
                          {getFieldDecorator('cardBindNo', {
                            validateTrigger: [""],
                            initialValue: undefined,
                            rules: [{ required: false, message: '' },
                            { validator: this.state.visible ? this.validFunction : '' },
                            ],
                            getValueFromEvent: (event) => {
                              return initpatCardID == '3' ? event.target.value.replace(/[^\d|Xx]/g, '') : event.target.value.replace(/\D/g, '')
                            },
                          })(
                            <Input
                              onFocus={this.visibleTip}
                              onChange={this.closeBindVail}
                              ref={this.bindCardNu}
                              onPressEnter={this.bindTip}
                              onBlur={this.bindTip}
                              placeholder={nowReadCard == 'R' ? '请点击读卡按钮查找病人'
                                : (nowReadCard == "" && replenishZero == 'Y' && autoCreateCardNo != "Y" ? cardLengthCard + '刷卡/输入或点击读卡（卡号可自动补零）'
                                  : (nowReadCard == "" && replenishZero == 'N' && autoCreateCardNo != "Y" ? cardLengthCard + '刷卡/输入或点击读卡'
                                    : (nowReadCard == 'I' && replenishZero == "Y" && autoCreateCardNo != "Y" ? cardLengthCard + '刷卡/输入卡号（卡号可自动补零）'
                                      : (nowReadCard == 'I' && replenishZero == "N" && autoCreateCardNo != "Y" ? cardLengthCard + '刷卡/输入卡号' : (autoCreateCardNo && autoCreateCardNo == "Y" ? "直接点击绑定自动生成卡号" : "")))))}
                              disabled={nowReadCard == 'R' || autoCreateCardNo == "Y"}
                              maxLength={cardLengthCard && cardLengthCard != "" ? parseInt(cardLengthCard) : 99}
                            />
                          )}
                        </FormItem>
                      </Tooltip>
                    </Col>
                  </Row>
                  <Row gutter={8} style={{ display: (this.state.repariFeeFlag != "Y" && nowCost != 0 && bindMoreInfo && autoCreateCardNo != "Y" ? 'block' : 'none') }}>
                    <Col span={19} >
                      <FormItem label='支付方式' wrapperCol={{ span: 16 }} labelCol={{ span: 5 }}>
                        {getFieldDecorator('payMethods', {
                          initialValue: this.state.baseParms.payMethod && this.state.baseParms.payMethod.length > 0 ? this.state.baseParms.payMethod[0].id : undefined,
                          rules: [{ required: false, message: '' }],
                        })(
                          <Select style={{ width: '100%' }}>
                            {payMethod}
                          </Select>
                        )}
                      </FormItem>
                    </Col >
                  </Row>
                  <Row gutter={8} style={{ display: (this.state.repariFeeFlag != "Y" && nowCost != 0 && bindMoreInfo && autoCreateCardNo != "Y" ? 'block' : 'none') }}>
                    <Col span={19}>
                      <FormItem label='当前发票' wrapperCol={{ span: 16 }} labelCol={{ span: 5 }}>
                        {getFieldDecorator('transactionNo', {
                          initialValue: undefined,
                          rules: [{ required: false, message: '' }],
                        })(
                          <Input style={{ width: '100%' }} disabled />
                        )}
                      </FormItem>
                    </Col >
                  </Row>
                </Form>
                <Table
                  columns={columnsBind}
                  dataSource={this.state.informationData}
                  rowKey={record => record.key}
                  rowClassName={this.setRowClassName}
                  bordered
                  style={{ marginTop: '12px' }}
                  pagination={false}
                />
              </div>
              <div style={{ display: (flag === 4) ? "block" : "none" }}>
                <Row>
                  <Col span={6} >
                    <FormItem label='新卡' {...formItemNewCard}>
                      {getFieldDecorator('newCard', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Select style={{ width: '100%' }} disabled>
                          {card}
                        </Select>
                      )}
                    </FormItem>
                  </Col >
                  <Col span={12} style={{ margin: '0 14px', display: (flag === 4 ? 'inline-block' : 'none') }} className="patchNoDom">
                    <Tooltip getPopupContainer={() => document.querySelector('.patchNoDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolTipDom patchNo" title={<div className="titleIcon">{mesIcon}<span >{patchNoMessage}</span></div>} visible={this.state.patchNoVisible}>
                      <FormItem  {...formItemCard}>
                        {getFieldDecorator(flag == 4 ? "cardNumber" : "cardPat", {
                          validateTrigger: [""],
                          initialValue: undefined,
                          rules: [{ required: false, message: '' },
                          { validator: this.state.visible ? this.validFunction : '' },
                          ],
                          getValueFromEvent: (event) => {
                            return initpatCardID == '3' ? event.target.value.replace(/[^\d|Xx]/g, '') : event.target.value.replace(/\D/g, '')
                          },
                        })(
                          <Input
                            onChange={this.closeBindVail}
                            ref={this.patchCardNu}
                            placeholder={nowReadCard == 'R' ? '请点击读卡按钮查找病人' :
                              (nowReadCard == "" && replenishZero == "Y" ? cardLengthCard + '刷卡/输入或点击读卡（卡号可自动补零）'
                                : (nowReadCard == "" && replenishZero == "N" ? cardLengthCard + '刷卡/输入或点击读卡'
                                  : (nowReadCard == 'I' && replenishZero == "Y" ? cardLengthCard + '刷卡/输入卡号（卡号可自动补零）'
                                    : (nowReadCard == 'I' && replenishZero == "N" ? cardLengthCard + '刷卡/输入卡号' : ""))))}
                            disabled={nowReadCard == 'R'}
                            maxLength={cardLengthCard && cardLengthCard != "" ? parseInt(cardLengthCard) : 99}
                            onBlur={this.patchTip}
                            onPressEnter={this.patchTip}
                          />
                        )}
                      </FormItem>
                    </Tooltip>
                  </Col >
                  <Col span={5} style={{ display: (flag != 7 ? 'block' : 'none') }}>
                    <FormItem  {...formItemNewButton}>
                      <Button
                        disabled={nowReadCard == 'I'}
                        ref={this.patchCardButton}
                        type='primary'
                        style={{ marginRight: "14px" }}
                        loading={readLoading}
                        onClick={this.handleCardReading}
                      >读卡</Button>
                      <Button type='primary' ref={this.patchOkButton} disabled={bindVail} loading={readLoading} onKeyDown={this.handleOnKeydown} onClick={() => this.handleFlag(4)}>补卡</Button>
                    </FormItem>
                  </Col >
                </Row>
                <Row style={{ display: (nowCost != 0 ? 'block' : 'none') }}>
                  <Col>
                    <FormItem label='补卡费用' {...formItemNew}>
                      {getFieldDecorator('patchMoney', {
                        initialValue: nowCost != 0 ? '￥' + nowCost : 0,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Input disabled />
                      )}
                    </FormItem>
                  </Col >
                </Row>
                <Row style={{ display: (nowCost != 0 ? 'block' : 'none') }}>
                  <Col>
                    <FormItem label='支付方式' {...formItemNew}>
                      {getFieldDecorator('payMethods', {
                        initialValue: this.state.baseParms.payMethod && this.state.baseParms.payMethod.length > 0 ? this.state.baseParms.payMethod[0].id : undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Select style={{ width: '100%' }}>
                          {payMethod}
                        </Select>
                      )}
                    </FormItem>
                  </Col >
                </Row>
                <Row style={{ display: (nowCost != 0 ? 'block' : 'none') }}>
                  <Col>
                    <FormItem label='当前发票' {...formItemNew}>
                      {getFieldDecorator('transactionNo', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Input style={{ width: '100%' }} disabled />
                      )}
                    </FormItem>
                  </Col >
                </Row>
                <Row style={{ display: (flag != 7 ? 'block' : 'none') }}>
                  <Col>
                    <FormItem label='原卡' {...formItemNew}>
                      {getFieldDecorator('originalCard', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Input disabled />
                      )}
                    </FormItem>
                  </Col >
                </Row>
                <Row style={{ display: (flag != 7 ? 'block' : 'none') }}>
                  <Col>
                    <p style={{ color: 'red' }}>补卡后，原卡将作废，停止使用，启用新卡。</p>
                  </Col >
                </Row>
              </div>
              <div style={{ display: (flag === 3) ? "block" : "none" }}>
                <Row>
                  <Col span={6} >
                    <FormItem label='新卡' {...formItemNewCard}>
                      {getFieldDecorator('newCard', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <Select style={{ width: '100%' }} disabled>
                          {card}
                        </Select>
                      )}
                    </FormItem>
                  </Col >
                  <Col span={12} style={{ margin: '0 14px' }} className="changeNoDom">
                    <Tooltip getPopupContainer={() => document.querySelector('.changeNoDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolTipDom patchNo" title={<div className="titleIcon">{mesIcon}<span >{changeNoMessage}</span></div>} visible={this.state.changeNoVisible}>
                      <FormItem  {...formItemCard}>
                        {getFieldDecorator(flag == 3 ? "cardNumber" : "cardNu", {
                          validateTrigger: [""],
                          initialValue: undefined,
                          rules: [{ required: false, message: '' },
                          { validator: this.state.visible ? this.validFunction : '' },
                          ],
                          getValueFromEvent: (event) => {
                            return initpatCardID == '3' ? event.target.value.replace(/[^\d|Xx]/g, '') : event.target.value.replace(/\D/g, '')
                          },
                        })(
                          <Input
                            onChange={this.closeBindVail}
                            ref={this.changeCardNu}
                            placeholder={nowReadCard == 'R' ? '请点击读卡按钮查找病人'
                              : (nowReadCard == "" && replenishZero == "Y" ? cardLengthCard + '刷卡/输入或点击读卡（卡号可自动补零）'
                                : (nowReadCard == "" && replenishZero == "N" ? cardLengthCard + '刷卡/输入或点击读卡'
                                  : (nowReadCard == 'I' && replenishZero == "Y" ? cardLengthCard + '刷卡/输入卡号（卡号可自动补零）'
                                    : (nowReadCard == 'I' && replenishZero == "N" ? cardLengthCard + '刷卡/输入卡号' : ""))))}
                            disabled={nowReadCard == 'R'}
                            maxLength={cardLengthCard && cardLengthCard != "" ? parseInt(cardLengthCard) : 99}
                            onBlur={this.patchTip}
                            onPressEnter={this.patchTip}
                          />
                        )}
                      </FormItem>
                    </Tooltip>
                  </Col >
                  <Col span={5} >
                    <FormItem  {...formItemNewButton}>
                      <Button
                        disabled={nowReadCard == 'I'}
                        ref={this.changeCardButton}
                        type='primary'
                        style={{ marginRight: "14px" }}
                        loading={readLoading}
                        onClick={this.handleCardReading}
                      >读卡</Button>
                      <Button type='primary' ref={this.changeOkButton} disabled={bindVail} loading={readLoading} onKeyDown={this.handleOnKeydown} onClick={() => this.handleFlag(3)}>换卡</Button>
                    </FormItem>
                  </Col >
                </Row>
                <Row>
                  <Col>
                    <FormItem label='原卡' {...formItemNew}>
                      {getFieldDecorator('originalCard', {
                        rules: [{ required: false, message: '' }],
                      })(
                        <Input disabled />
                      )}
                    </FormItem>
                  </Col >
                </Row>
                <Row>
                  <Col>
                    <p style={{ color: 'red' }}>换卡后，原卡将被回收，停止使用，启用新卡。</p>
                  </Col >
                </Row>
              </div>
            </Modal>
            <ReadCard ref={r => this.readCard = r} />
          </Spin>
        </div>
        // 
      )
    }
  })
export default CardList    