// 晶体扫码入库 - 弹窗
import React, { Component } from 'react';
import { Modal, Table, Input, Select, Form, message, DatePicker, Icon, Popconfirm, Spin } from 'antd';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import { $http } from 'containers/config/https';
import PublicModalTable from 'pages/common/PublicModalTable';
import store from 'store';
import Moment from 'moment';
import '../style/index.less';
import 'assets/css/common.css';

let { Option } = Select;

class CrystalStorageModal extends Component {
  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData,
      visible: false,
      serialNumber: undefined, // 晶体序列号
      editingKey: '',
      brandRulesList: [], //晶体品牌下拉数据
      brandRulesID: undefined,
      modalRowId: '',
      pageSize: 10,
      page: 1,
      inOperLocID: userData && userData.locID ? userData.locID : undefined,
      vendorID: undefined,
      columns: [],
      detailWidthTotal: "",
      tableData: [],
      modalTotal: 0,
      loading: false,
      spAmt: 0
    };

    this.columns = [
      { title: '代码', dataIndex: 'stockCode', key: '1', width: '100px', align: "center" },
      { title: '名称', dataIndex: 'stockDesc', key: '2', width: '100px', align: "center" },
      {
        title: '晶体度数', dataIndex: 'degreesID', key: '3', width: '150px', align: "center", inputType: 'select', editable: true, isEdit: "N"
      },
      { title: '晶体序列号', dataIndex: 'serialNo', key: '4', width: '150px', align: "center", isShow: "N" },
      { title: '数量', dataIndex: 'qty', key: '5', width: '150px', align: "center", isShow: "N" },
      {
        title: '单位', dataIndex: 'unitID', key: '6', width: '150px', align: "center", inputType: 'select', editable: true, isEdit: "N", isShow: "N"
      },
      {
        title: '进价', dataIndex: 'rp', key: '7', width: '150px', align: "center", inputType: 'input-number', editable: true, isShow: "N"
      },
      { title: '进价金额', dataIndex: 'rpAmt', key: '8', width: '150px', align: "center", isShow: "N" },
      {
        title: '生产日期', dataIndex: 'produceDate', key: '9', width: '150px', align: "center", inputType: 'datePicker', editable: true
      },
      {
        title: '有效日期', dataIndex: 'expDate', key: '10', width: '150px', align: "center", inputType: 'datePicker', editable: true
      },
      { title: '售价', dataIndex: 'sp', key: '11', width: '150px', align: "center", isShow: "N" },
      { title: '售价金额', dataIndex: 'spAmt', key: '12', width: '150px', align: "center", isShow: "N" },
      {
        title: '生产企业', dataIndex: 'manfID', key: '13', width: '150px', align: "center", inputType: 'select', editable: true
      },
      {
        title: '操作',
        isShow: "N",
        dataIndex: 'operation',
        key: "operation",
        align: "center",
        fixed: 'right',
        width: 130,
        render: (text, record) => (
          <span>
            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
              <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
            </Popconfirm>
          </span>
        ),
      }
    ];
    this.myRef1 = React.createRef();
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  // 获取晶体扫码入库表头数据
  getColumns = () => {
    let { userData } = this.state;
    let data = {
      params: [{
        compontName: "CrystalStorageModal",
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let obj = {
            title: '操作',
            isShow: "N",
            dataIndex: 'operation',
            key: "operation",
            align: "center",
            fixed: 'right',
            width: 130,
            render: (text, record) => (
              <span>
                <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
                <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                  <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                </Popconfirm>
              </span>
            ),
          }
          let arr = res.result && res.result.C && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
            return {
              ...item,
              inputType: ((item.dataIndex === 'degreesID') || (item.dataIndex === 'unitID') || (item.dataIndex === 'manfID') || (item.dataIndex === 'clyDegreesID')) ? 'select' :
                (((item.dataIndex === 'produceDate') || (item.dataIndex === 'expDate')) ? 'datePicker' :
                  ((item.dataIndex === 'rp') ? 'input-number' : (item?.linkMethod || ''))), // 单元格框类型
              editable: ((item.dataIndex === 'degreesID') || (item.dataIndex === 'unitID') || (item.dataIndex === 'rp') || (item.dataIndex === 'produceDate') || (item.dataIndex === 'expDate') || (item.dataIndex === 'manfID') || (item.dataIndex === 'clyDegreesID') || !!item?.linkMethod) ? true : '',
              isEdit: ((item.dataIndex === 'degreesID') || (item.dataIndex === 'unitID')) ? 'N' : 'Y', // 是否可编辑
              isShow: ((item.dataIndex === 'serialNo') || (item.dataIndex === 'qty') || (item.dataIndex === 'unitID') || (item.dataIndex === 'rp') || (item.dataIndex === 'rpAmt') || (item.dataIndex === 'sp') || (item.dataIndex === 'spAmt')) ? 'N' : 'Y',
              key: index + 1,
              title: <div onDoubleClick={() => this.detailColumnRef.onOpenModel()}>{userData && userData.language == 'EN' ? (item && item.enDescripts ? item.enDescripts : item.title) : item.title}</div>
            }
          }) : [];

          let filterArr = arr.filter(function (item) { return item.display === 'Y' });
          this.setState({ columns: filterArr && filterArr.length > 0 ? [...filterArr, obj] : [], detailWidthTotal: res.totalWidth })
        }
      }
    })
  }

  onDetailColumnRef = (ref) => {
    this.detailColumnRef = ref;
  }

  // 获取初始化数据
  getParameterSetting = () => {
    let data = {
      params: []
    }
    $http.post('urlS', this, {
      code: '02060197',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            parameterSetting: res.result
          })
        }
      }
    })
  }

  // 打开弹窗
  showModal = () => {
    let { parameterSetting, columns } = this.state;
    this.setState({ visible: true }, () => {
      if (!(columns && columns.length > 0)) {
        this.getColumns();
      }
      if (!(parameterSetting && parameterSetting.brandRulesList && parameterSetting.brandRulesList.length > 0)) {
        this.getParameterSetting();
      }
    })
  }

  // 关闭弹窗
  handleCancelModal = () => {
    let serialNumber = document.getElementById('csm-serial-number').value;
    this.setState({ visible: false }, () => {
      if (!serialNumber) {
        document.getElementById('csm-serial-number').value = '';
      }
    })
  }

  // 确认
  handleOk = () => {
    let { inOperLocID, vendorID, tableData, parameterSetting } = this.state;
    if (!(tableData && tableData.length > 0)) {
      message.error("明细列表不能为空")
      return;
    }
    if (!inOperLocID) {
      message.error("请选择入库科室")
      return;
    }
    if (!vendorID) {
      message.error("请选择供应商")
      return;
    }
    for (var i = 0; i < tableData.length; i++) {
      if (tableData[i].rp === undefined || tableData[i].rp === "") {
        message.error(`第${i + 1}行进价不能为空。`);
        return;
      }
    }
    let data = {
      params: []
    }
    let obj = {
      detailInfo: tableData,
      inOperLocID,
      vendorID,
      operTypeID: parameterSetting && parameterSetting.operTypeID ? parameterSetting.operTypeID : ""
    };
    data.params.push(obj);
    $http.post('urlADS', this, {
      code: "02060006",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          // 成功提示
          message.success(res.errorMessage);
          this.handleCancelModal();
          this.resetData();
          let inOperID = res.result && res.result.length > 0 ? res.result[0].inOperID : "";
          this.props.getEchoData(inOperID);
        }
      }
    })
  }

  // 晶体序列号
  handleSerialNumberChange = e => {
    this.setState({ serialNumber: e.target.value })
  }

  // 获取晶体品牌数据
  handleBrandRulesChange = e => {
    let serialNumber = document.getElementById('csm-serial-number').value;
    this.setState({ brandRulesID: e }, () => {
      if (!serialNumber) {
        document.getElementById('csm-serial-number').value = "";
      }
    })
  }

  // 名称回车事件
  nameOnPressEnter = (e) => {
    let top = document.getElementById('csm-serial-number').getBoundingClientRect().top + 40 + 'px';
    let left = document.getElementById('csm-serial-number').getBoundingClientRect().left - 110 + 'px';
    this.setState({
      top,
      left,
      serialNumber: e.target.value,
      loading: true
    }, () => {
      this.getModalTableData();
    });
  }

  // 获取晶体序列号弹窗数据
  getModalTableData = () => {
    let { serialNumber, pageSize, page, brandRulesID } = this.state;
    let data = {
      params: [{
        brandRulesID,
        serialNo: serialNumber, // 晶体序列号
      }],
      pagination: [{
        pageSize,
        currentPage: page
      }]
    }
    $http.post('urlS', this, {
      code: "02060198",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let modalTableData = res.result && res.result.rows && res.result.rows.length > 0 ? res.result.rows : [];
          for (var i = 0; i < modalTableData.length; i++) {
            modalTableData[i].key = i + 1;
          }
          if (modalTableData && modalTableData.length > 1) {
            this.setState({
              modalTableData, modalTotal: res.total, modalRowId: modalTableData && modalTableData.length > 0 ? modalTableData[0].key : '', loading: false
            }, () => {
              this.child.showModal()
            })
          } else {
            if (!this.handleJudgeSerialNumber(modalTableData)) {
              this.setState({ tableData: this.handleAddUniqueID([...this.state.tableData, ...modalTableData]), modalTotal: 0, serialNumber: undefined, loading: false }, () => {
                document.getElementById('csm-serial-number').value = "";
              }); // 清楚晶体序列号输入框
            }
          }
        } else {
          this.setState({
            modalTableData: [], modalTotal: 0, serialNumber: undefined, loading: false
          }, () => {
            document.getElementById('csm-serial-number').value = "";
          })
        }
      }
    })
  }

  /**
   * @ByShizi: 晶体序列号是否重复，重复不让添加，给提示
   * 需求 #637
   * Create 2022-05-20
   */
  handleJudgeSerialNumber = (record) => {
    let { tableData } = this.state;
    let repeat = false;
    for (var i = 0; i < tableData.length; i++) {
      if (record && 'serialNo' in record && tableData[i].serialNo === record.serialNo) {
        repeat = true;
        break;
      }
    }
    if (repeat) {
      message.error("当前序列号在列表中已存在，请不要重复录入。")
    }
    return repeat;
  }

  // 处理表头数据
  processingHeaderData = (columns) => {
    return columns && columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        render: (text, data, index) => this.getInput(data, index, col)
      };
    })
  }

  // 处理单元格框类型
  getInput = (data, rowIndex, record) => {
    let { parameterSetting } = this.state;
    // 晶体度数
    let degreesOption = parameterSetting && parameterSetting.degrees && parameterSetting.degrees.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 生产厂商
    let manfOption = parameterSetting && parameterSetting.manf && parameterSetting.manf.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 单位
    let unitOption = parameterSetting && parameterSetting.unit && parameterSetting.unit.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 柱镜度数
    let clyDegreesOption = parameterSetting && parameterSetting.clyDegrees && parameterSetting.clyDegrees.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    if (record && record.inputType === 'select') {
      return <Select disabled={record.isEdit === 'N' ? true : false} value={data[record.dataIndex]} onChange={(e) => this.handleChange(e, rowIndex, record)} showSearch optionFilterProp="seatchprop" allowClear style={{ width: '80%' }}>
        {record.dataIndex === "degreesID" ? degreesOption : (record.dataIndex === "unitID" ? unitOption : (record.dataIndex === "manfID" ? manfOption : (record.dataIndex === "clyDegreesID" ? clyDegreesOption : [])))}
      </Select>;
    } else if (record && record.inputType === 'input-number') {
      return <Input ref={record.dataIndex === 'rp' ? this.myRef1 : ''} disabled={record.isEdit === 'N' ? true : false} style={{ width: '80%' }} type="number" className="input-number" value={data[record.dataIndex]} onChange={(e) => this.handleChange(e, rowIndex, record)} />
    } else if (record && record.inputType === 'datePicker') {
      return <DatePicker disabled={record.isEdit === 'N' ? true : false} value={data[record.dataIndex] ? Moment(data[record.dataIndex]) : undefined} onChange={(e) => this.handleChange(e, rowIndex, record)} style={{ width: '80%' }} />;
    } else {
      return <Input disabled={record.isEdit === 'N' ? true : false} style={{ width: '80%' }} value={data[record.dataIndex]} onChange={(e) => this.handleChange(e, rowIndex, record)} />;
    }
  };

  // 输入框change
  handleChange = (e, rowIndex, record) => {
    let value = record && record.inputType === 'select' ? e : (record.inputType === 'datePicker' ? Moment(e).format("YYYY-MM-DD") : e.target.value);
    let tableData = JSON.parse(JSON.stringify(this.state.tableData));
    tableData[rowIndex][record.dataIndex] = value;
    if (record && record.dataIndex === 'rp') { // 进价金额
      tableData[rowIndex].rpAmt = value ? (value * tableData[rowIndex].qty) : 0;
    }
    this.setState({ tableData, }, () => {
      document.getElementById('csm-serial-number').value = "";
    })
  }

  // 操作弹框
  onClickRowPublic = (record) => {
    return {
      onDoubleClick: () => {
        if (!this.handleJudgeSerialNumber(record)) {
          this.setState({ tableData: this.handleAddUniqueID([...this.state.tableData, { ...record }]), serialNumber: undefined }, () => {
            document.getElementById('csm-serial-number').value = "";
            this.myRef1 && this.myRef1.current && this.myRef1.current.focus();
          });
        }
        this.child.handleCancel()
      }
    }
  }

  setRowClassNamePublic = (record) => {
    return record.key === this.state.modalRowId ? 'clickRowStyle' : '';
  }

  // 修改名称列表条数以及列数
  compilePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.getModalTableData()
    })
  }

  // 添加表格数据的唯一标识
  handleAddUniqueID = (data) => {
    let newData = (data && data.length > 0) ? JSON.parse(JSON.stringify(data)) : [];
    let spAmt = 0;
    for (var i = 0; i < newData.length; i++) {
      newData[i].key = i + 1;
      spAmt = +newData[i].spAmt + spAmt;
    }
    var str = newData.splice(newData.length - 1, 1);
    newData.unshift(str[0]);
    this.setState({ spAmt: spAmt })
    return newData
  }

  // 键盘操作名称模态框数据
  handlePublicModalTableOnKeydown = (e) => {
    var e = window.event || e;
    let scroll_height = 26;
    let id = '';
    let oneArr = this.state.modalTableData && this.state.modalTableData.length > 0 ? this.state.modalTableData : [];
    switch (e.keyCode) {
      case 13:
        if (this.state.modalRowId) {
          let obj = {}
          for (var i = 0; i < oneArr.length; i++) {
            if (oneArr[i].key === this.state.modalRowId) {
              obj = i > 0 ? oneArr[i] : oneArr[0];
              break;
            }
          }
          if (!this.handleJudgeSerialNumber(obj)) {
            this.setState({ tableData: this.handleAddUniqueID([...this.state.tableData, { ...obj }]), serialNumber: undefined }, () => {
              document.getElementById('csm-serial-number').value = "";
              this.myRef1 && this.myRef1.current && this.myRef1.current.focus();
            });
          }
          this.child.handleCancel();
        } else {
          message.info("请选择需要操作的数据。", this.state.userData && this.state.userData.messageTime)
        }
        break;
      case 38: //上
        if (this.state.modalRowId) {
          for (var i = 0; i < oneArr.length; i++) {
            if (oneArr[i].key === this.state.modalRowId) {
              id = i > 0 ? oneArr[i - 1].key : oneArr[0].key;
              break;
            }
          }
          this.setState({ modalRowId: id })
          setTimeout(() => {
            var gundong = document.getElementById("gundong");
            gundong.scrollTop = gundong.scrollTop - scroll_height;
          }, 100)
        } else {
          this.setState({ modalRowId: oneArr[0].key })
        }
        break;
      case 40: //下
        if (this.state.modalRowId) {
          for (let i = 0; i < oneArr.length; i++) {
            if (oneArr[i].key === this.state.modalRowId) {
              id = i + 1 >= oneArr.length ? oneArr[oneArr.length - 1].key : oneArr[i + 1].key;
              break;
            }
          }
          this.setState({ modalRowId: id })
          setTimeout(() => {
            var gundong = document.getElementById("gundong");
            gundong.scrollTop = gundong.scrollTop + scroll_height;
          }, 100)
        } else {
          this.setState({ modalRowId: oneArr[0].key })
        }
        break;
    }
  };

  onRef = ref => {
    this.child = ref;
  }

  // 过滤晶体序列号弹窗表头数据
  filterColumns = (columns) => {
    let newColumns = [...columns];
    for (var i = 0; i < newColumns.length; i++) {
      if (newColumns[i].dataIndex === 'degreesID') { // 晶体度数
        newColumns[i].render = (text, data) => {
          return data.degreesDesc;
        }
      }
      if (newColumns[i].dataIndex === 'manfID') { // 生产厂家
        newColumns[i].render = (text, data) => {
          return data.manfDesc;
        }
      }
    }
    return newColumns && newColumns.filter(item => item.isShow !== 'N');
  }

  // 入库科室
  handleInOperLocChange = e => {
    let serialNumber = document.getElementById('csm-serial-number').value;
    this.setState({ inOperLocID: e }, () => {
      if (!serialNumber) {
        document.getElementById('csm-serial-number').value = "";
      }
    })
  }

  // 供应商
  handleVendorChange = e => {
    let serialNumber = document.getElementById('csm-serial-number').value;
    this.setState({ vendorID: e }, () => {
      if (!serialNumber) {
        document.getElementById('csm-serial-number').value = "";
      }
    })
  }

  // 重置数据
  resetData = () => {
    let { userData } = this.state;
    this.setState({
      serialNumber: undefined,
      brandRulesID: undefined,
      modalTableData: [],
      tableData: [],
      inOperLocID: userData && userData.locID ? userData.locID : undefined,
      vendorID: undefined
    }, () => {
      document.getElementById('csm-serial-number').value = "";
    })
  }

  // 删除列表行数据
  handleDelete = (record) => {
    let { tableData } = this.state;
    let newTableData = tableData && tableData.length > 0 ? JSON.parse(JSON.stringify(tableData)).filter(item => item.key !== record.key) : [];
    let spAmt = 0;
    for (var i = 0; i < newTableData.length; i++) {
      spAmt = +newTableData[i].spAmt + spAmt;
    }
    this.setState({ tableData: newTableData, spAmt: spAmt }, () => {
      document.getElementById('csm-serial-number').value = "";
    })
  }

  render() {
    let { visible, serialNumber, tableData, brandRulesID, parameterSetting, top, left, modalTableData, inOperLocID, vendorID, detailWidthTotal, columns, loading, spAmt } = this.state;
    let inOpLocList = parameterSetting && parameterSetting.inOpLoc && parameterSetting.inOpLoc.length > 0 ? parameterSetting.inOpLoc : [];
    let vendorList = parameterSetting && parameterSetting.vendor && parameterSetting.vendor.length > 0 ? parameterSetting.vendor : [];
    let brandRulesList = parameterSetting && parameterSetting.brandRulesList && parameterSetting.brandRulesList.length > 0 ? parameterSetting.brandRulesList : [];
    // 入库科室
    let inOpLocOption = inOpLocList && inOpLocList.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 供应商
    let vendorOption = vendorList && vendorList.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    // 晶体
    let brandRulesOption = brandRulesList && brandRulesList.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })

    let param = {
      width: '1200px',
      height: 300,
      top,
      left,
      columns: this.filterColumns(columns && columns.length > 0 ? columns : this.columns),
      data: modalTableData,
      isOnRow: true,
      TableClassName: 'tab-placeholder',
      rowClassName: true,
      // showPagination: true,
      // page,
      // total,
    }

    return (
      <div>
        <Modal
          visible={visible}
          title="晶体扫码入库"
          onCancel={this.handleCancelModal}
          onOk={this.handleOk}
          okText="保存"
          width='85%'
          maskClosable={false}
          height='85%'
          className="crystal-storage-modal"
        >
          <div>
            <Spin tip="数据加载中，请稍等……" spinning={loading}>
              <div style={{ marginBottom: "24px", display: "flex", alignItems: "center" }}>
                <span className="custom-form-item-label" style={{ width: "86px" }}>晶体品牌：</span>
                <Select className="custom-form-item-input" style={{ width: '160px', marginRight: '15px' }} value={brandRulesID} onChange={this.handleBrandRulesChange} showSearch optionFilterProp="seatchprop" allowClear placeholder="请选择">
                  {brandRulesOption}
                </Select>
                <span className="custom-form-item-label" style={{ width: "100px" }}>晶体序列号：</span>
                <Input className="custom-form-item-input" style={{ width: '300px', marginRight: '15px' }}
                  // value={serialNumber} onChange={this.handleSerialNumberChange}
                  placeholder="输入内容后可回车检索"
                  onPressEnter={this.nameOnPressEnter}
                  id="csm-serial-number"
                />
                <span className="custom-form-item-label formRequired in-op-coc" style={{ width: "90px" }}>入库科室：</span>
                <Select className="custom-form-item-input" style={{ width: '200px', marginRight: '15px' }} value={inOperLocID} onChange={this.handleInOperLocChange} showSearch optionFilterProp="seatchprop" allowClear placeholder="请选择" >
                  {inOpLocOption}
                </Select>
                <span className="custom-form-item-label formRequired" style={{ width: "90px" }}>供应商：</span>
                <Select className="custom-form-item-input" style={{ width: '200px', marginRight: '15px' }} value={vendorID} onChange={this.handleVendorChange} showSearch optionFilterProp="seatchprop" allowClear placeholder="请选择">
                  {vendorOption}
                </Select>
                <span className="custom-form-item-label" style={{ width: "68px" }}>总数量：</span>
                <span className="custom-form-item-label" style={{ width: "68px", marginRight: '15px', fontWeight: 900, fontSize: "18px", borderRadius: "0 4px 4px 0", borderRight: "1px solid #d9d9d9" }}>{tableData && tableData.length > 0 ? tableData.length : 0}</span>
                <span className="custom-form-item-label" style={{ width: "68px" }}>总金额：</span>
                <span className="custom-form-item-label" style={{ width: "80px", fontWeight: 900, fontSize: "18px", borderRadius: "0 4px 4px 0", borderRight: "1px solid #d9d9d9" }}>{spAmt ? spAmt : 0}</span>
              </div>
              <div>
                <Table
                  dataSource={tableData}
                  pagination={false}
                  bordered
                  scroll={{ x: detailWidthTotal ? parseInt(detailWidthTotal) : 1870, y: store.getState().tableHeight.y - 226 }}
                  columns={this.processingHeaderData(columns && columns.length > 0 ? columns : this.columns)}
                  onRow={this.handleTableClickRow}
                  rowClassName={this.handleTableSetRowClassName}
                  className="table-body-height"
                />
              </div>
            </Spin>
          </div>
        </Modal>
        <div
          tabIndex={1}
          onKeyDown={this.handlePublicModalTableOnKeydown}
          style={{ outline: 'none' }}
        >
          <PublicModalTable
            onClickRowPublic={this.onClickRowPublic}
            setRowClassNamePublic={this.setRowClassNamePublic}
            param={param}
            onRef={this.onRef}
            compilePage={this.compilePage}
            id="gundong"
          />
        </div>
        <ColumnAuthoritysModel
          clientWidth='800px'
          compontName='CrystalStorageModal'
          configType="C"
          onRef={this.onDetailColumnRef}
          reloadData={this.getColumns}
        />
      </div>
    );
  }
}

const CrystalStorageModalForm = Form.create()(CrystalStorageModal);
export default CrystalStorageModalForm;