// 晶体条码规则维护
import React, { Component } from 'react';
import '../../pharmacy/outpha/style/outpha.less';
import { Card, Row, Col, Input, DatePicker, Select, Button, Table, Switch, message, Icon, Popconfirm, Divider } from 'antd';
import PubilcTablePagination from 'pages/common/PubilcTablePagination';
import iconListVisits from 'assets/images/icon_listvisits.png';
import store from 'store';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import CommonPagination from 'components/pagination/index';

let timer;
let {Option} = Select

class BarcodeRuleMaintenance extends Component {
  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData,
      ruleName: undefined,
      startDate: Moment(),
      endDate: Moment(),
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      columns: [],
      widthTotal: 0,
      basicHeight: 0,
      loading: false,
      detailTableData: [],
      detailColumns: [],
      detailWidthTotal: [],
      detailPage: 1,
      detailPageSize: 10,
      detailTotal: 0,
      rowID: "",
      rowData: {},
      parameterSetting: {},
      hospID: userData && userData.hospID ? userData.hospID : undefined,
      selectSearchData: [], //搜索下拉数据
      tableKey: 0, // 新增数据标识
      detailTableKey: 0, // 新增明细列表数据标识
    };
    this.columns = [
      { title: '序号', dataIndex: 'seqNo', key: '1', width: '100px', align: "center", inputType: 'input-number', editable: true },
      { title: '医院', dataIndex: 'hospID', key: '2', width: '250px', align: "center", inputType: 'select', editable: true },
      { title: '规则代码', dataIndex: 'code', key: '3', width: '150px', align: "center", inputType: 'input', editable: true },
      { title: '规则名称', dataIndex: 'descripts', key: '4', width: '250px', align: "center", inputType: 'input', editable: true },
      { title: '生产企业', dataIndex: 'manfDesc', key: '5', width: '350px', align: "center", inputType: 'select-search', editable: true },
      { title: '序列号总长度', dataIndex: 'codeLength', key: '6', width: '200px', align: "center", inputType: 'input-number', editable: true },
      { title: '开始日期', dataIndex: 'startDate', key: '7', width: '200px', align: "center", inputType: 'datePicker', editable: true },
      { title: '失效日期', dataIndex: 'endDate', key: '8', width: '200px', align: "center", inputType: 'datePicker', editable: true },
      {
        title: '操作',
        isShow: "N",
        dataIndex: 'operation',
        key: "operation",
        align: "center",
        // fixed: 'right',
        width: 100,
        render: (text, record) => (
          <span>
            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record, "main")} >
              <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
            </Popconfirm>
          </span>
        ),
      }
    ];
    this.detailColumns = [
      { title: '序号', dataIndex: 'seqNo', key: '1', width: '100px', align: "center", inputType: 'input-number', editable: true },
      { title: '晶体规则', dataIndex: 'brandDesc', key: '2', width: '150px', align: "center", inputType: 'input', editable: true, isEdit: "N" },
      { title: '类型', dataIndex: 'typeID', key: '3', width: '150px', align: "center", inputType: 'select', editable: true },
      { title: '开始长度', dataIndex: 'startLength', key: '4', width: '150px', align: "center", inputType: 'input-number', editable: true },
      { title: '截至长度', dataIndex: 'endLength', key: '5', width: '150px', align: "center", inputType: 'input-number', editable: true },
      { title: '分隔符', dataIndex: 'splitSymbol', key: '6', width: '100px', align: "center", inputType: 'input', editable: true },
      { title: '是否校验', dataIndex: 'checkFlag', key: '7', width: '100px', align: "center", inputType: 'switch', editable: true },
      { title: '校验规则', dataIndex: 'checkRules', key: '8', width: '100px', align: "center", inputType: 'switch', editable: true },
      { title: '备注', dataIndex: 'remark', key: '9', width: '250px', align: "center", inputType: 'input', editable: true },
      { title: '开始日期', dataIndex: 'startDate', key: '10', width: '150px', align: "center", inputType: 'datePicker', editable: true },
      { title: '失效日期', dataIndex: 'endDateset', key: '11', width: '150px', align: "center", inputType: 'datePicker', editable: true },
      {
        title: '操作',
        dataIndex: 'operation',
        key: "operation",
        align: "center",
        fixed: 'right',
        width: 100,
        render: (text, record) => (
          <span>
            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record, "detail")} >
              <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
            </Popconfirm>
          </span>
        ),
      }
    ]
    this.myRef1 = React.createRef();
  }

  componentDidMount() {
    this.setState({ basicHeight: document.getElementById("brm-operation").clientHeight }, () => {
      setTimeout(() => {
        this.myRef1.current.focus();
      }, 300)
    });
    this.getParameterSetting();
  }

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

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

  // 查询
  handleQuery = () => {
    this.setState({ page: 1 }, () => {
      this.getTableData();
    })
  }

  // 提供修改page和pageSize的回调函数
	compilePage(page, pageSize) {
		// 修改page，或者pageSize
		this.setState({ page, pageSize }, () => {
			// 重新调用查询方法
			this.getTableData()
		})
	}

  // 获取主表table数据
  getTableData = () => {
    let { hospID, ruleName, pageSize, page } = this.state;
    let data = {
      params: [{
        hospID,
        ruleName
      }],
      pagination: [{
        pageSize,
        currentPage: page,
      }]
    }
    $http.post('urlS', this, {
      code: "02020355",
      data: data,
      success: function (res) {
        this.child.handleLoading();
        if (+res.errorCode === 0) {
          if (res.result && res.result.rows && res.result.rows.length > 0) {
            let tableData = res.result.rows;
            for (var i = 0; i < tableData.length; i++) {
              tableData[i].brandID = tableData[i].ID;
              tableData[i].key = "distalMain" + (i + 1);
            }
            this.setState({ tableData, total: res.result.total, rowID: "", rowData: {}, detailTableData: [], detailPage: 1, detailTotal: 0, })
          } else {
            // this.handleAddRowData(); // 新增
            this.setState({ tableData: [], total: 0, rowID: "", rowData: {}, detailTableData: [], detailPage: 1, detailTotal: 0, })
          }
        } else {
          this.setState({ tableData: [], total: 0, rowID: "", rowData: {}, detailTableData: [], detailPage: 1, detailTotal: 0, })
        }
      },
      error: function () {
        this.setState({ mainData: [], total: 0, loading: false, rowID: "", rowData: {}, detailTableData: [], detailPage: 1, detailTotal: 0, }, () => {
          // 数据加载成功关闭loading
          this.child.handleLoading();
        })
      }
    })
  }

  // 新增主表行数据
  handleAddRowData = () => {
    let { userData, tableKey, tableData } = this.state;
    let newTableKey = tableKey ? (tableKey + 1) : (tableData && tableData.length ? (tableData.length + 1) : 1);
    let obj = {
      hospID: userData && userData.hospID ? userData.hospID : undefined,
      seqNo: newTableKey,
      code: undefined,
      descripts: undefined,
      manfDesc: undefined,
      codeLength: undefined,
      startDate: Moment().format("YYYY-MM-DD"),
      endDate: undefined,
      key: "main" + newTableKey
    };
    this.setState({ tableData: [...tableData, obj], tableKey: newTableKey })
  }

  // 删除行数据
  handleDelete = (record, type) => {
    let { tableData, detailTableData } = this.state;
    let data = JSON.parse(JSON.stringify(type === "main" ? tableData : detailTableData));
    if (record && record.ID && type === "main") {
      // 删除主表数据
      this.handleDeleteDistalData(record, type);
      return
    }
    if (record && record.brandDetailID && type === "detail") { // 358
      // 删除子表数据
      this.handleDeleteDistalData(record, type);
      return
    }
    // 本地删除
    let newTableData = data && data.length > 0 ? data.filter(item => item.key !== record.key) : [];
    if (type === "main") {
      this.setState({ tableData: newTableData })
    } else {
      this.setState({ detailTableData: newTableData })
    }
  }

  // 数据库删除数据
  handleDeleteDistalData = (record, type) => {
    let data = {
      params: [{
        brandID: type === "main" ? record.ID : undefined, // 主表ID
        brandDetailID: type === "detail" ? record.brandDetailID : undefined, // 删除子表
      }]
    }
    $http.post('urlS', this, {
      code: "02020358",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage)
          if (type === "main") {
            this.handleQuery();
          } else if (type === "detail") {
            this.handleQueryDetail();
          }
        }
      }
    })
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (!(record && record.ID)) return;
        if (this.state.rowID === '') {
          // 保存行数据以及ID
          this.setState({ rowID: record.ID, rowData: record }, () => {
            this.handleQueryDetail();
          });
        } else {
          if (this.state.rowID !== record.ID) {
            this.setState({ rowID: record.ID, rowData: record }, () => {
              this.handleQueryDetail();
            });
          }
        }
      }
    }
  }

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

  // 查询条件 --- 开始日期
  handleStartDate = (e) => {
    this.setState({ startDate: e });
  }

  // 查询条件 --- 截止日期
  handleEndDate = (e) => {
    this.setState({ endDate: e });
  }

  // 规则名称
  handleRuleNameChange = (e) => {
    this.setState({ ruleName: e.target.value })
  }

  // 明细列表修改条数
  handleDetailChange = (page, pageSize) => {
    this.setState({ detailPage: page, detailPageSize: pageSize }, () => {
      this.getDetailTableData();
    })
  }

  // 明细列表修改条数
  handleDetailSizeChange = (current, size) => {
    this.setState({ detailPage: 1, detailPageSize: size }, () => {
      this.getDetailTableData();
    })
  }

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

  // 处理单元格框类型
  getInput = (data, rowIndex, record, type) => {
    let { parameterSetting } = this.state;
    // 医院下拉
    let hospOption = parameterSetting && parameterSetting.hosp && parameterSetting.hosp.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    let typeOption = parameterSetting && parameterSetting.brandType && parameterSetting.brandType.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]) ? String(data[record.dataIndex]) : undefined} onChange={(e) => this.handleChange(e, rowIndex, record, type)} showSearch optionFilterProp="seatchprop" allowClear style={{ width: '80%' }}>
        {record.dataIndex === "hospID" ? hospOption : (record.dataIndex === "typeID" ? typeOption : [])}
      </Select>;
    } else if (record && record.inputType === 'select-search') {
      return <Select
        allowClear
        showSearch
        disabled={record.isEdit === 'N' ? true : false}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        notFoundContent={null}
        style={{ width: '80%' }}
        placeholder="输入关键字自动检索"
        onSearch={this.getSelectSearchData}
        onChange={(e) => this.handleChange(e, rowIndex, record, type)}
        value={data[record.dataIndex]}
      >
        {
          this.state.selectSearchData && this.state.selectSearchData.map((item, index) => {
            return (<Option key={index} value={item.descripts} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
          })
        }
      </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, type)} 
      />
    } else if (record && record.inputType === 'switch') {
      return <Switch 
        checkedChildren="是" unCheckedChildren="否" disabled={record.isEdit === 'N' ? true : false} 
        checked={data[record.dataIndex] === 'Y' ? true : false} onChange={(e) => this.handleChange(e, rowIndex, record, type)} 
      />
    } 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, type)} 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, type)} 
      />;
    }
  };

  // 输入框change
  handleChange = (e, rowIndex, record, type) => {
    let value = (record && record.inputType === 'select' || record.inputType === 'select-search') ? e :
      (record.inputType === 'datePicker' ? Moment(e).format("YYYY-MM-DD") :
        (record.inputType === 'switch' ? (e ? "Y" : "N") :
          e.target.value
        ));
    let tableData = JSON.parse(JSON.stringify(type === "main" ? this.state.tableData : this.state.detailTableData));
    tableData[rowIndex][record.dataIndex] = value;
    // for (var i = 0; i < tableData.length; i++) {
    //   if (tableData[i][record.dataIndex] === data[record.dataIndex]) {
    //     tableData[i][record.dataIndex] = value;
    //     // if (record.dataIndex === "rp") { // 给关联输入框赋值
    //     //   tableData[i].rpAmt = value ? (value * tableData[i].qty) : 0;
    //     // }
    //     break;
    //   }
    // }
    if (type === "main") { // 主表
      this.setState({ tableData }, () => {
        console.log(this.state.tableData)
      })
    } else { // 明细列表
      this.setState({ detailTableData: tableData })
    }
  }

  // 医院切换
  handleHospChange = e => {
    this.setState({ hospID: e })
  }

  getSelectSearchData = (value) => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      if (value) {
        let data = {
          params: [{
            desc: value
          }]
        }
        $http.post('urlS', this, {
          code: "02020352",
          data: data,
          success: function (res) {
            if (+res.errorCode === 0) {
              this.setState({ selectSearchData: res.manf })
            }
          }
        })
      }
    }, 300)
  };

  // 保存
  handleSave = (type) => {
    let { tableData, detailTableData, rowID } = this.state;
    if (!(tableData && tableData.length > 0)) {
      message.error("请添加条码规则后再保存。")
      return;
    }
    for (var i = 0; i < tableData.length; i++) {
      if (!tableData[i].code) {
        message.error(`第${i + 1}行规则代码不能为空。`);
        return;
      }
      if (!tableData[i].descripts) {
        message.error(`第${i + 1}行规则描述不能为空。`);
        return;
      }
      if (!tableData[i].startDate) {
        message.error(`第${i + 1}行开始日期不能为空。`);
        return;
      }
    }
    if (detailTableData && detailTableData.length > 0) {
      for (var i = 0; i < detailTableData.length; i++) {
        detailTableData[i].brandID = rowID;
        if (!detailTableData[i].typeID) {
          message.error(`明细列表第${i + 1}行类型不能为空。`);
          return;
        }
        if (!detailTableData[i].startLength) {
          message.error(`明细列表第${i + 1}行开始长度不能为空。`);
          return;
        }
        if (!detailTableData[i].endLength) {
          message.error(`明细列表第${i + 1}行截止长度不能为空。`);
          return;
        }
        if (!detailTableData[i].startDate) {
          message.error(`明细列表第${i + 1}行开始日期不能为空。`);
          return;
        }
      }
    }
    let data = {
      params: [{
        brandData: tableData,
        brandDetailData: detailTableData
      }]
    }
    $http.post('urlS', this, {
      code: "02020357",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage);
          if (type === "main") {
            this.getTableData();
          } else if (type === "detail") {
            this.handleQueryDetail();
          }
        }
      }
    })
  }

  // 查询明细
  handleQueryDetail = () => {
    this.setState({ detailPage: 1 }, () => {
      this.getDetailTableData();
    })
  }

  // 获取明细列表数据
  getDetailTableData = () => {
    let { rowID, detailPage, detailPageSize } = this.state;
    let data = {
      params: [{
        brandID: rowID
      }],
      pagination: [{
        pageSize: detailPageSize,
        currentPage: detailPage,
      }]
    }
    $http.post('urlS', this, {
      code: "02020356",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          if (res.result && res.result.rows && res.result.rows.length > 0) {
            for (var i = 0; i < res.result.rows.length; i++) {
              res.result.rows[i].key = "distalDetail" + (i + 1)
            }
            this.setState({ detailTableData: res.result.rows, detailTotal: res.result.total })
          } else {
            this.setState({ detailTableData: [], detailTotal: 0 })
          }
        } else {
          this.setState({ detailTableData: [], detailTotal: 0 })
        }
      },
      error: function () {
        this.setState({ detailTableData: [], detailTotal: 0 })
      }
    })
  }

  // 新增明细行数据
  handleAddDetailRowData = () => {
    let { detailTableData, rowID, detailTableKey, rowData } = this.state;
    if (!rowID) {
      message.error("请在左侧列表选中一条已保存的数据再新增。")
      return;
    };
    let newDetailTableKey = detailTableKey ? (detailTableKey + 1) : (detailTableData && detailTableData.length ? (detailTableData.length + 1) : 1);
    let obj = {
      brandID: rowData && rowData.ID ? rowData.ID : undefined,
      brandDesc: rowData && rowData.descripts ? rowData.descripts : undefined,
      seqNo: newDetailTableKey,
      typeID: undefined,
      startLength: undefined,
      endLength: undefined,
      splitSymbol: undefined,
      checkFlag: undefined,
      checkRules: undefined,
      remark: undefined,
      startDate: Moment().format("YYYY-MM-DD"),
      endDateset: undefined,
      key: "detail" + newDetailTableKey
    };
    this.setState({ detailTableData: [...detailTableData, obj], detailTableKey: newDetailTableKey })
  }

  render() {
    let { ruleName, tableData, total, page, columns, widthTotal, basicHeight, loading, detailTableData, detailWidthTotal, detailPage, detailTotal, detailColumns, hospID, parameterSetting } = this.state;
    // 组件所需参数
    const param = {
      // 表头配置
      columns: this.processingHeaderData(columns && columns.length > 0 ? columns : this.columns, "main"),
      // 表格数据
      data: tableData,
      // 数据总条数
      total,
      // 当前页数
      page,
      // 表格的宽度
      x: columns && columns.length > 0 ? widthTotal : 1800,
      y: store.getState().tableHeight.y / 2 + 5 - basicHeight,
      height: store.getState().tableHeight.y / 2 + 50 - basicHeight + 'px',
      isOnRow: true,
      rowClassName: true,
      TableClassName: 'table-scroll-height',
      loading
    };

    // 医院下拉
    let hospOption = parameterSetting && parameterSetting.hosp && parameterSetting.hosp.map((item, index) => {
      return (<Option key={index} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
    })
    return (
      <div className="barcode-rule-maintenance">
        <Row id="brm-operation" style={{ padding: '0 24px' }}>
          <Col span={18} className="input-padding-right">
            <Row style={{ margin: '20px 0', display: "flex", alignItems: "center" }}>
              <span className="custom-form-item-label">医院：</span>
              <Select className="custom-form-item-input" style={{ width: '200px', marginRight: "15px" }} value={hospID} onChange={this.handleHospChange} showSearch optionFilterProp="seatchprop" allowClear placeholder="请选择">
                {hospOption}
              </Select>
              <span className="custom-form-item-label" style={{ width: "96px" }}>规则名称：</span>
              <Input
                title={"回车触发条码规则查询"}
                allowClear
                placeholder="回车查询（Enter）"
                style={{ width: '180px', marginRight: '20px' }}
                className="custom-form-item-input"
                ref={this.myRef1}
                value={ruleName}
                onChange={this.handleRuleNameChange}
                onPressEnter={this.handleQuery} />
              {/* <DatePicker className="custom-start-date" style={{ width: '150px' }} placeholder="开始日期" value={startDate} onChange={this.handleStartDate} allowClear={false} />
              <span className="custom-form-item-label custom-form-label-date">到</span>
              <DatePicker className="custom-end-date" style={{ width: '150px', marginRight: '20px' }} placeholder="结束日期" value={endDate} onChange={this.handleEndDate} /> */}
              <Button type="primary" style={{ marginRight: '120px' }} onClick={this.handleQuery}>查询</Button>
              {/* <Button
                type="primary"
                onClick={this.handleSave}
                disabled={tableData && tableData.length > 0 ? false : true}
              >保存</Button> */}
            </Row>
          </Col>
        </Row>
        <div style={{ height: '6px', background: 'rgba(240, 242, 245, 1)', width: '100%' }}></div>
        <div>
          <Card
            size="small"
            title={<div className="card-title-left-img" style={{ justifyContent: "space-between" }}>
              <span style={{ display: "flex", alignItems: "center" }}><img src={iconListVisits} alt="" />条码规则列表</span>
              <div>
                <span style={{ color: "#42b983", fontWeight: 900, cursor: "pointer", fontSize: "14px" }} onClick={this.handleAddRowData}>新增</span>
                <Divider type="vertical" />
                <span style={{ color: "#007AFF", fontWeight: 900, cursor: "pointer", fontSize: "14px" }} onClick={() => this.handleSave("main")}>保存</span>
              </div>
            </div>}
          >
            <div>
              <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} onClickRowPublic={this.onClickRowPublic} setRowClassNamePublic={this.setRowClassNamePublic} />
            </div>
          </Card>
        </div>
        <div style={{ height: '6px', background: 'rgba(240, 242, 245, 1)', width: '100%' }}></div>
        <div>
          <Card
            size="small"
            title={<div className="card-title-left-img" style={{ justifyContent: "space-between" }}>
              <span style={{ display: "flex", alignItems: "center" }}><img src={iconListVisits} alt="" />条码规则明细列表</span>
              <div>
                <span style={{ color: "#42b983", fontWeight: 900, cursor: "pointer", fontSize: "14px" }} onClick={this.handleAddDetailRowData}>新增</span>
                <Divider type="vertical" />
                <span style={{ color: "#007AFF", fontWeight: 900, cursor: "pointer", fontSize: "14px" }} onClick={() => this.handleSave("detail")}>保存</span>
              </div>
            </div>}
          >
            <div>
              <Table
                dataSource={detailTableData}
                pagination={false}
                bordered
                scroll={{ x: detailWidthTotal ? parseInt(detailWidthTotal) : 1600, y: store.getState().tableHeight.y / 2 + 5 - basicHeight }}
                columns={this.processingHeaderData(detailColumns && detailColumns.length > 0 ? detailColumns : this.detailColumns, "detail")}
                onRow={this.handleTableClickRow}
                rowClassName={this.handleTableSetRowClassName}
                className="table-body-height"
              />
              <CommonPagination size="small" current={detailPage} total={detailTotal} search="search"
                onShowSizeChange={this.handleDetailSizeChange} complete={true} dataSource={detailTableData}
                onChange={this.handleDetailChange} />
            </div>
          </Card>
        </div>
      </div>
    );
  }
}

export default BarcodeRuleMaintenance;