// 住院费用

import React from 'react';
import { Select, Input, Row, Col, Button, Spin, message, Icon, Form, DatePicker, Table, Tabs, Modal, Card } from 'antd';
import { $http } from 'containers/config/https';
import { Keup, ArraySome } from '../../../tools/index';
import './style/style.less'
import store from '../../../store';
import ReadCard from '../../../components/readcard/ReadCard';
import CommonPagination from 'components/pagination/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import { Util } from 'tools/index';
import Reports from '../../raqSoft/reportsEmbed';

// 组件const
const { Option } = Select;
const cost_type = require('../../../assets/images/icon_Inquire.png')
let patientData;
export default class HospDateConstList extends React.Component {
  constructor(props) {
    super(props)
    patientData = window.sessionStorage.patientData ? JSON.parse(window.sessionStorage.patientData) : {}
    var userData = JSON.parse(sessionStorage.getItem('userData'))
    this.state = {
      userInfo: {}, // 用户数据
      dataTableTop: [], // table数据 上列表table
      totalTop: 0,
      pageTop: 1,
      pageSizeTop: 200,
      // 表格数据总条数1
      total1: 0,
      page1: 1,
      pageSize1: 50,
      StartDateTop: undefined,  // //开始日期
      EndDateTop: undefined,  // //结束日期
      StartDate1: undefined,  // //开始日期
      EndDate1: undefined,  // //结束日期
      // 表格数据总条数2
      total2: 0,
      page2: 1,
      pageSize2: 100,
      cardType: '', // 卡类型
      cardTypeData: [], // 卡类型
      cardNo: '', // 卡号
      patNo: '',
      execID: [],
      ordID: '',
      modalShow: false,
      columnsTop: [],
      selectedRowKeys: [],
      money: {},
      bqType: '',
      jsType: '',
      chargeStatus: '',
      bqData: [],
      bedData: [],
      jsTypeData: [],
      time1: '1',
      allMoney: 0,
      readModeI: true,
      readModeR: true,
      languageData: {}, // 国际化语言包
      language: {},   // 国际化语言
      languageCode: JSON.parse(window.sessionStorage.userData).language, // 国际化语言标识
      ColumnAuthority: '',
      medicalNo: '',  // 住院号
      bednumber: '',
      userData: userData,
      reportParam: {},
      tableLoadinig: false, //加载table数据
    }
  }

  componentDidMount() {
    // 数据加载成功关闭loading
    this.child && this.child.handleLoading()
    this.cardTypeList() //卡类型
    this.jsList() //结算
    this.bqList() //病区
    this.cloumData()
    this.ordList1() //国际化
    // this.dataTableTopData()
  }

  // 费用类型table
  ordList1 = () => {
    let data = {
      params: [{
        "reactCode": ["DischargeSettlement"],
        "compontName": "DischargeSettlement",
        "type": "C"

      }]
    }
    $http.post('urlS', this, {
      code: "01040073",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            languageData: res.result.language || {},  // 国际化语言包
          }, () => {
            this.LanCNEN(this.state.languageCode)
          })
        }
      }
    });
  }

  LanCNEN = (code) => {
    let { languageData } = this.state
    this.setState({
      language: languageData[code]
    })
  }

  onColumnRef = (ref) => {
    this.columnRef = ref;
  }

  clearn = () => {
    this.setState({
      userInfo: {}, // 用户数据
      dataTableTop: [], // table数据 上列表table
      totalTop: 0,
      pageTop: 1,
      pageSizeTop: 20,
      // 表格数据总条数1
      total1: 0,
      page1: 1,
      pageSize1: 10,
      StartDateTop: undefined,  // //开始日期
      EndDateTop: undefined,  // //结束日期
      StartDate1: undefined,  // //开始日期
      EndDate1: undefined,  // //结束日期
      // 表格数据总条数2
      total2: 0,
      page2: 1,
      pageSize2: 100,
      cardNo: '', // 卡号
      patNo: '',
      execID: [],
      ordID: '',
      modalShow: false,
      selectedRowKeys: [],
      money: {},
      bqType: '',
      jsType: '',
      chargeStatus: '',
      hospStatus: '',
      time1: '1',
      allMoney: 0,
      readModeI: true,
      readModeR: true,
    })
  }

  // 数据配置
  cloumData() {
    var data2 = {
      params: [{
        compontName: "HospitalizationExpensesAdmList",
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: "01040073",
      data: data2,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          let resC = res.result.C

          // for (var i = 0; i < resC.length; i++) {
          //     resC[i].key = i;
          //     if (resC[i].dataIndex === 'dinose') {
          //         resC[i].dataIndex = 'diagnose'
          //     }
          // }
          let { languageCode } = this.state

          for (var i = 0; i < resC.length; i++) {
            resC[i].key = i;
          }

          if (languageCode === "EN") {
            resC.map((item, i) => {
              item.title = item.enDescripts
            })
          }

          if (languageCode === "CN") {
            resC.map((item, i) => {
              item.title = item.descripts
            })
          }
          let arr = res.result && resC.length > 0 ? JSON.parse(JSON.stringify(resC)).map(item => {
            return {
              align: item.align,
              widthNum: parseInt(item.width),
              width: item.width,
              dataIndex: item.dataIndex,
              title: <div onDoubleClick={() => this.setState({ ColumnAuthority: 'IPAdmList' }, () => this.columnRef.onOpenModel())}>{item.title}</div>,
              display: item.display,
              key: item.seqNo
            }
          }) : '';
          let filterArr = arr.filter(function (item) { return item.display === 'Y' });


          this.setState({
            columnsTop: filterArr, // 费用类型table
          });
        }
      }
    });
  }

  // 数据配置
  columnsTop(resC) {

    let { languageCode } = this.state
    for (var i = 0; i < resC.length; i++) {
      resC[i].key = i;
    }
    if (languageCode === "EN") {
      resC.map((item, i) => {
        item.title = item.enDescripts
      })
    }

    if (languageCode === "CN") {
      resC.map((item, i) => {
        item.title = item.descripts
      })
    }

    this.setState({
      columnsTop: resC, // 费用类型table
    });
  }

  //卡类型
  cardTypeList = () => {
    var data = {
      params: [{
        hospID: JSON.parse(window.sessionStorage.userData).hospID, //医院id 
      }]
    }

    $http.post('urlS', this, {
      code: "01040059",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          let cardDeffault = res.cardType.filter((item) => {
            return item.defaultFlag === 'Y';
          })
          this.setState({
            cardType: cardDeffault[0].id, // 默认卡
            cardTypeData: res.cardType,  // 用户数据
          }, () => {
            this.CardTypeChange(this.state.cardType)
          });
        }
      }
    });
  }

  //1.1.49.住院费用明细相关下拉框（病区）
  bqList = () => {
    let that = this;
    var data = {
      params: [{
        "hospID": JSON.parse(window.sessionStorage.userData).hospID || '', //医院id 
        "type": "W",
        "status": "1",
      }]
    }
    $http.post('urlS', this, {
      code: "04020008",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            bqData: res.result.Data || [], // 数据
            bqType: res.result.Data[0].id || '',
          }, () => {
            that.dataTableTopData()
          });
          for (var i = 0; i < res.result.Data.length; i++) {
            if (res.result.Data[i].id == JSON.parse(window.sessionStorage.userData).locID) {
              this.setState({
                bqType: res.result.Data[i].id
              }, () => this.BedChange(res.result.Data[i].id))
              break;
            }

          }

        }
      }
    });
  }

  //1.1.49.住院费用明细相关下拉框（结算）
  jsList = () => {
    var data = {
      params: [{
        "hospID": JSON.parse(window.sessionStorage.userData).hospID || '', //医院id 
      }]
    }

    $http.post('urlS', this, {
      code: "05100129",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {

          this.setState({
            jsTypeData: res.data || [], // 数据
          });
        }
      }
    });
  }

  // 回车查询登记号
  patNodownE = (e, type) => {
    if (e.keyCode === 13) {
      this.searchUser(type)
    }
  }

  // 1.1.52.住院费用明细相关接口（就诊信息及费用信息接口）
  dataTableTopData = (e) => {
    let that = this;
    let { pageSizeTop, pageTop, StartDateTop, EndDateTop, time1, bqType, jsType, cardType, cardNo, patNo, chargeStatus, dataTableTop, medicalNo, bednumber, hospStatus } = this.state
    this.setState({ tableLoadinig: true }); //数据加载中
    var data = {
      params: [{
        "number": patNo || '', // 登记号/身份证号
        "cardTypeID": cardType,   //卡类型id
        "cardNo": cardNo,    //卡号
        hospID: JSON.parse(window.sessionStorage.userData).hospID || '', //医院id 
        patID: dataTableTop.length == 0 ? patientData?.patID : '',  //病人id
        medicalNo: medicalNo,
        "stopDate": EndDateTop,
        "startDate": StartDateTop,
        "condition": time1,
        "wardID": bqType !== '' ? bqType : '', //病区
        "payReasonID": jsType,  //费别
        "chargeStatus": chargeStatus,
        "bedID": bednumber,// 床号
        "hospStatus": hospStatus //在院状态

      }],
      pagination: [{
        pageSize: pageSizeTop,
        currentPage: pageTop,
      }]
    }
    $http.post('urlS', this, {
      code: "05300013",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          let temRecord = {};
          if (res.data.length === 0) {
            that.setState({ tableLoadinig: false, dataTableTop: [] }); //取消数据加载中
          }
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].key = i;
            if (res.data[i].patID == patientData?.patID) {
              patNo = res.data[i].patNo
              temRecord = res.data[i]
            }
          }
          this.setState({
            tableLoadinig: false,
            dataTableTop: res.data,
            reportParam: { "admID": res.data[0].admID, "bedNo": res.data[0].admBedNo, "MedicalNo": res.data[0].MedicalNo, "patName": res.data[0].patName, "admReasonType": res.data[0].admReasonType, "admWardDesc": res.data[0].admWardDesc },
            totalTop: res.total,
          }, () => {
            if (!Util.isEmpty(temRecord)) {
              this.onClickRowPublicTop(temRecord)
            }
          });
        } else {
          this.setState({ tableLoadinig: false }); //取消数据加载中
        }
      },
      error: function () {
        this.setState({ tableLoadinig: false }); //取消数据加载中
      }
    });

  }

  // 读卡 --- 根据卡号取病人信息
  handleReadCard = (value, event) => {
    let { readModeI, readModeR, cardType } = this.state
    if (event.keyCode) {
      if (readModeI) {
        this.searchUser('cardNo'); // 重新调用查询接口
      }
      return false
    }
    if (readModeR) {
      this.readCard.ReadCard(cardType, "R", (json) => {
        let patNo = json && json.patInfo ? json.patInfo.patNo : ''
        this.setState({ patNo , cardNo: json.cardNo }, () => {

          //this.searchUser('cardNo'); // 重新调用查询接口
          if (patNo)
					{
						this.searchUser('patNo'); // 重新调用查询接口
					}else{
						this.searchUser('cardNo'); // 重新调用查询接口
					}
        })
      })
    }

  }

  // 读卡
  searchUser = (type) => {
    var data;
    let { cardType, cardNo, patNo, cardTypeData } = this.state
    if (!type) {   // 查询全部
      data = {
        params: [{
          "number": patNo || '', // 登记号/身份证号
          "cardTypeID": cardType,   //卡类型id
          "cardNo": cardNo,    //卡号
        }]
      }
    }
    if (type === 'patNo') {
      data = {
        params: [{
          "number": patNo || '', // 登记号/身份证号
          "cardTypeID": "",   //卡类型id
          "cardNo": "",    //卡号
        }]
      }

      if (patNo === '') {
        return false
      }
    }
    if (type === 'cardNo') {
      data = {
        params: [{
          "number": '', // 登记号/身份证号
          "cardTypeID": cardType || '',     //卡类型id
          "cardNo": cardNo || '', //卡号
        }]
      }

      if (cardNo === '') {
        return false
      }
      if (cardType === '') {
        message.error('请选择卡类型')
        return false
      }
      let cardTypeFilter = cardTypeData.filter(function (item) {
        return item.id == cardType;
      })

      let zeroLength = cardTypeFilter[0].cardLength

      if (zeroLength && zeroLength != '' && parseFloat(zeroLength) != 0) {
        this.setState({
          cardNo: ArraySome.addPreZero(cardNo, zeroLength)
        })
        data = {
          params: [{
            "number": '', // 登记号/身份证号
            "cardTypeID": cardType || '',     //卡类型id
            "cardNo": ArraySome.addPreZero(cardNo, zeroLength) || '', //卡号
          }]
        }
      }
    }
    $http.post('urlS', this, {
      code: "03040004",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            userInfo: res.data || {},  // 用户数据
            patNo: res.data.patNo || '',  // ID
          }, () => {
            this.dataTableTopData() // 就诊信息
          });

        }
      }
    });
  }

  // 查询条件 --- 病区
  bqType = (e) => {
    if (!e) {
      this.setState({ bqType: '' }, () => {
        this.dataTableTopData();
      });
    } else {
      this.setState({ bqType: e }, () => {
        this.dataTableTopData();
        this.BedChange(e);
      });
    }
  };

  // 查询条件 --- 结算
  jsType = (e) => {
    this.setState({ jsType: e });
  }

  // 查询条件 --- 时间类型
  time1 = (e) => {
    this.setState({ time1: e });
  }

  // 查询条件 --- 结算类型
  chargeStatus = (e) => {
    this.setState({ chargeStatus: e });
  }

  // 查询条件 --- 在院状态
  hospStatus = (e) => {
    this.setState({ hospStatus: e });
  }

  // 查询条件 --- 登记号
  patNo = (e) => {
    this.setState({ patNo: e.target.value });
  }

  // 住院号
  medicalNo = (e) => {
    this.setState({ medicalNo: e.target.value });
  }

  // 查询条件 --- 卡类型·
  cardType = (e) => {
    this.setState({ cardType: e }, () => {
      this.CardTypeChange(e)
    });
  }

  // 查询条件 --- 卡号
  cardNo = (e) => {
    let { readModeI } = this.state
    if (!readModeI) {
      return false
    }
    this.setState({ cardNo: e.target.value });
  }

  // Card
  CardTypeChange = (e) => {
    if (!e) {
      return false
    }
    let { cardTypeData } = this.state
    let readMode = cardTypeData.filter((item, i) => {
      return item.id == e;
    })
    switch (readMode[0] && readMode[0].readMode) {
      // 只可input
      case 'I':
        this.setState({
          readModeI: true,
          readModeR: false,
          cardNo: "",

        })
        break;
      // 只可读卡
      case 'R':
        this.setState({
          readModeR: true,
          readModeI: false,
          cardNo: "",
        })
        break;
      // 皆可
      default:
        this.setState({
          readModeI: true,
          readModeR: true,
          cardNo: "",
        })
        break;
    }
  }

  // 时间
  onChangeTimeTop = (date, dateString) => {
    this.setState({
      StartDateTop: dateString[0],    //开始日期
      EndDateTop: dateString[1],  //结束日期
    })
  }

  startChange(date) {
    this.setState({
      StartDateTop: date,
    })
  }

  endChange(date) {
    this.setState({
      EndDateTop: date,
    })
  }

  // 时间
  onChangeTime1 = (date, dateString) => {
    this.setState({
      StartDate1: dateString[0],    //开始日期
      EndDate1: dateString[1],  //结束日期
    })

  }

  // 操作行
  onClickRowPublicTop = (record) => {
    this.setState({ money: record, admID: record.admID }, () => {
      this.dataTable1Data(record)
    })
    var data = {
      params: [{
        "number": record.patNo || '', // 登记号/身份证号
        "cardTypeID": "",   //卡类型id
        "cardNo": "",    //卡号
      }]
    }
    $http.post('urlS', this, {
      code: "03040004",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {

          this.setState({
            userInfo: res.data || [],  // 用户数据
            // patNo: res.data.patNo || '',  // ID
          });

        }
      }
    });
  }

  // 选中行操作
  setRowClassNamePublicTop = (record) => {
    return record.admID === this.state.admID ? 'clickRowStyle' : '';
  }

  //查询床位
  BedChange = (locID) => {
    let data = {
      params: [{
        locID: locID,
      }]
    }
    $http.post('urlS', this, {
      code: "01050021",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ bedData: res.result.Data })
        }
      }
    })
  }

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

  // 显示分页总条数
  showTotal(total) {
    return `共 ${total} 条`;
  }

  onChangeTop = (page, pageSize) => {
    this.setState({ pageTop: page, pageSizeTop: pageSize }, () => {
      // 重新调用查询方法
      this.dataTableTopData();
    })
  }

  // 条数改变的回调
  onShowSizeChangeTop = (current, size) => {
    this.setState({ pageTop: 1, pageSizeTop: size }, () => {
      // 重新调用查询方法
      this.dataTableTopData();
    })
  }

  ///调用报表
  dataTable1Data = (e) => {
    this.setState({
      reportParam: { "admID": e.admID, "bedNo": e.admBedNo, "MedicalNo": e.MedicalNo, "patName": e.patName, "admReasonType": e.admReasonType, "admWardDesc": e.admWardDesc }
    });
  }

  // 查询条件 --- 床位
  bednum = (e) => {
    this.setState({ bednumber: e });
  }

  Selectbednum = (e) => {
    this.setState({ bednumber: e }, () => this.dataTableTopData());
  }

  render() {
    // 组件所需参数
    const paramTop = {
      // 数据总条数
      total: this.state.totalTop,
      // 数据页数
      page: this.state.pageTop,
    }
    let { language } = this.state
    return (
      <div style={{ background: '#e8e8e8', height: '100%', overflow: 'hidden' }} className='hospital-zation-express'>
        <ReadCard ref={r => this.readCard = r} />
        {/* <div >
                    <TipHeader userInfo={this.state.userInfo} key={this.state.userInfo.patID} />
                </div> */}
        <Row>
          <Col span={5}>
            <Card style={{ width: '100%', padding: '0' }} className='pd0'
              title={<span><img src={cost_type} style={{ marginRight: 5 }} />{language.DischargeSettlementQueryvisitrecords && language.DischargeSettlementQueryvisitrecords.descripts} </span>}>
              <div style={{ padding: 12, paddingBottom: "32px", position: "relative" }}>
                <div style={{ lineHeight: '32px', height: "260px", overflow: "auto" }}>
                  <Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementPatientinformation && language.DischargeSettlementPatientinformation.descripts + '：'} disabled />
                        <Input id='patNo' style={{ width: '74.9%' }} allowClear placeholder={language.DischargeSettlementPatientinformation && language.DischargeSettlementPatientinformation.message} className='input' value={this.state.patNo} onChange={(event) => { this.patNo(event) }} onKeyUp={(e) => { this.patNodownE(e, 'patNo'); }} />
                      </Input.Group>
                    </Col>
                  </Row>
                  <Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementInpatientNo && language.DischargeSettlementInpatientNo.descripts + '：'} disabled />
                        <Input allowClear style={{ width: '74.9%' }} placeholder={language.DischargeSettlementInpatientNo && language.DischargeSettlementInpatientNo.message} className='input' value={this.state.medicalNo} onChange={(event) => { this.medicalNo(event) }} onPressEnter={this.dataTableTopData} />
                      </Input.Group>
                    </Col>
                  </Row>
                  <Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementChargeStatus && language.DischargeSettlementChargeStatus.descripts + '：'} disabled />
                        <Select className='express-select-border' allowClear style={{ width: '74.9%' }} placeholder={language.DischargeSettlementChargeStatus && language.DischargeSettlementChargeStatus.message} value={this.state.chargeStatus} onChange={(event) => { this.chargeStatus(event) }}  >
                          <Option value='P'>已结算</Option>
                          <Option value='B'>未结算</Option>
                        </Select>
                      </Input.Group>
                    </Col>
                  </Row>
                  <Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementVisitingward && language.DischargeSettlementVisitingward.descripts + '：'} disabled />
                        <Select className='express-select-border' allowClear style={{ width: '74.9%' }} placeholder={language.DischargeSettlementVisitingward && language.DischargeSettlementVisitingward.message} value={this.state.bqType} onChange={(event) => { this.bqType(event) }}  >
                          <Option value=''>{language.DischargeSettlementVisitingward && language.DischargeSettlementVisitingward.message}</Option>
                          {this.state.bqData.map(item => <Option title={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                        </Select>
                      </Input.Group>
                    </Col>
                  </Row><Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementBednumber && language.DischargeSettlementBednumber.descripts + '：'} disabled />
                        <Select className='express-select-border' allowClear showSearch style={{ width: '74.9%' }} placeholder={language.DischargeSettlementBednumber && language.DischargeSettlementBednumber.message} value={this.state.bednumber} onChange={(event) => { this.bednum(event) }}
                          filterOption={(input, options) => options.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0} onSelect={this.Selectbednum}>
                          {this.state.bedData.map(item => <Option title={item.bedDesc} key={item.bedCBID} value={item.bedCBID}  >{item.bedDesc}</Option>)}
                        </Select>
                      </Input.Group>
                    </Col>
                  </Row>
                  <Row className='mB10'>
                    <Col span={25}>
                      <Input.Group>
                        <Input className='express-input-disable' style={{ width: '25%', textAlign: 'center' }} value={language.DischargeSettlementSettlementtype && language.DischargeSettlementSettlementtype.descripts + '：'} disabled />
                        <Select className='express-select-border' allowClear style={{ width: '74.9%' }} placeholder={language.DischargeSettlementVisitingward && language.DischargeSettlementVisitingward.message} value={this.state.jsType} onChange={(event) => { this.jsType(event) }}  >
                          <Option value=''>{language.DischargeSettlementVisitingward && language.DischargeSettlementVisitingward.message}</Option>
                          {this.state.jsTypeData.map(item => <Option title={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                        </Select>
                      </Input.Group>
                    </Col>
                  </Row>
                </div>
                <Row style={{ textAlign: 'center', position: "absolute", bottom: 0, left: 0, paddingBlock: '10px', width: "100%" }}>
                  <Button type='primary' style={{ marginRight: '2px', width: 150 }} onClick={() => this.dataTableTopData()} >{language.DischargeSettlementquery && language.DischargeSettlementquery.descripts}</Button>
                  {/*<Button onClick={() => this.clearn()} style={{ width: 150 }}>{language.DischargeSettlementempty && language.DischargeSettlementempty.descripts}</Button>*/}
                </Row>
              </div>
            </Card>
            <Card style={{ width: '100%', padding: '0' }} className='pd0'
            >
              <div style={{ padding: 5 }}>
                <Table
                  pagination={false}
                  bordered
                  loading={this.state.tableLoadinig}
                  scroll={{ y: (store.getState().tableHeight.y) - 200, x: 1100 }}
                  columns={this.state.columnsTop}
                  dataSource={this.state.dataTableTop}
                  style={{ height: store.getState().tableHeight.y - 150 + 'px' }}
                  onRow={(record) => {
                    return {
                      onClick: (event) => {
                        this.onClickRowPublicTop(record)
                      },
                    };
                  }}
                  rowClassName={(record) => this.setRowClassNamePublicTop(record)}
                />
                <ColumnAuthoritysModel
                  clientWidth='900px'
                  compontName={this.state.ColumnAuthority}
                  configType="C"
                  onRef={this.onColumnRef}
                  reloadData={() => {
                    this.cloumData(this.state.ColumnAuthority, this.state.ColumnAuthority)
                  }}
                />
                <CommonPagination current={paramTop.page} total={paramTop.total} search='search' pageSize='200' size='large'
                  onShowSizeChange={this.onShowSizeChangeTop.bind(this)} complete={false} dataSource={this.state.dataTableTop}
                  onChange={this.onChangeTop.bind(this)} />
              </div>
            </Card>
          </Col>
          <Col span={19} >
            <div style={{ height: store.getState().tableHeight.y + 260 + 'px' }}>
              <Reports
                raqName={"hospDateCost.rpx"}
                params={this.state.reportParam}
              />
            </div>
          </Col>
        </Row>
      </div >
    )
  }
}