/*
 * Create:      柿子
 * CreateDate:  2022/07/13
 * Describe：   供应商 - 申请单字段配置
 * */
import React, { Component } from 'react';
import { Card, Row, Col, Select, Checkbox, Button, Popconfirm, Icon, Divider, message, Tooltip } from 'antd';
import { Util, dayFormat } from 'tools';
import store from 'store';
import moment from 'moment';
// import SelectFromBrandLibrary from './component/SelectFromBrandLibrary';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import PublicModalFormHooks from 'pages/common/PublicModalFormHooks';
import iconListVisits from 'assets/images/icon_listvisits.png';
import './style/index.less';

class ApplicationFieldConfiguration extends Component {
  constructor(props) {
    super(props);
    const userData = React.$getSessionData();
    this.state = {
      userData,
      checked: true,
      selectData: {},
      brandID: undefined,
      loading: false,
      tableData: [],
      columns: [],
      totalWidth: 560,
      formData: [],
      rowID: '',
      rowData: {}, // 选中行数据
      recordData: {}, // 编辑数据源
      detailLoading: false,
      detailTableData: [],
      detailFormSelectData: {},
      detailTotalWidth: 1400,
      detailColumns: [],
      detailSelectedRowKeys: [],
      detailSelectedRowData: [],
      detailFormData: [],
      detailRowData: {},
      copyRecordData: {}, // 复制到其他品牌表单数据
      tabList: [{
        key: '1',
        tab: '申请单配置',
      }, {
        key: '2',
        tab: '关联产品',
      }],
      activeKey: '1',
      productLoading: false,
      productTableData: [],
      productTotalWidth: 0,
      productColumns: [],
      productSelectedRowKeys: [],
      copyBrandsFormData: [], // 复制品牌
    };

    // 主列表静态表头数据
    this.staticColumns = [{
      key: 1,
      title: '序号',
      dataIndex: 'key',
      align: 'center',
      width: 60
    }, {
      key: 2,
      title: '品牌',
      dataIndex: 'brandDesc',
      align: 'center',
      width: 200
    }, {
      key: 5,
      title: '系列',
      dataIndex: 'series',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '状态',
      dataIndex: 'activeStatus',
      align: 'center',
      width: 100
    }, {
      key: 7,
      dataIndex: 'startDate',
      title: '生效日期',
      align: 'center',
      width: 100
    }, {
      key: 9,
      dataIndex: 'stopDate',
      title: '失效日期',
      align: 'center',
      width: 100
    }];

    // 明细列表表头数据
    this.staticDetailColumns = [{
      key: 'code',
      title: '代码',
      dataIndex: 'code',
      align: 'center',
      width: 150
    }, {
      key: 1,
      title: '描述',
      dataIndex: 'desc',
      align: 'center',
      width: 150
    }, {
      key: 2,
      title: '英文描述',
      dataIndex: 'enDesc',
      align: 'center',
      width: 150
    }, {
      key: 3,
      title: '组件类型',
      dataIndex: 'compTypeDesc',
      align: 'center',
      width: 100
    }, {
      key: 4,
      title: '关联取值',
      dataIndex: 'linkValueDesc',
      align: 'center',
      width: 100
    }, {
      key: 5,
      title: '取值代码',
      dataIndex: 'linkCode',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '取值类',
      dataIndex: 'linkClass',
      align: 'center',
      width: 100
    }, {
      key: 7,
      title: '取值方法',
      dataIndex: 'linkMethod',
      align: 'center',
      width: 100
    }, {
      key: 8,
      title: '是否必填',
      dataIndex: 'required',
      align: 'center',
      width: 100
    }, {
      key: 9,
      title: '是否显示',
      dataIndex: 'display',
      align: 'center',
      width: 100
    }, {
      key: 10,
      title: '是否只读',
      dataIndex: 'readOnly',
      align: 'center',
      width: 100
    }, {
      key: 11,
      title: '前端回调方法',
      dataIndex: 'callBackFunction',
      align: 'center',
      width: 150
    }, {
      key: 12,
      title: '跳转到',
      dataIndex: 'enterJumpToDesc',
      align: 'center',
      width: 100
    }, {
      key: 13,
      title: '占位',
      dataIndex: 'seatSize',
      align: 'center',
      width: 100
    }]
  }

  componentDidMount() {
    this.getSelectData();
    this.getTableData();
    this.getTableColumns();
    this.getDetailTableColumns();
  }

  // 获取下拉数据
  getSelectData = async () => {
    try {
      let { userData } = this.state;
      let data = {
        params: [{
          hospID: userData?.hospID || ''
        }]
      }
      let res = await React.$asyncPost(this, '17030013', data);
      this.setState({ selectData: res.result });
    } catch (error) {
      this.setState({ selectData: {} });
    }
  }

  // 获取表头数据
  getTableColumns = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ApplicationFieldConfiguration',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result?.C || [];
      if (columns && columns.length > 0) {
        this.setState({
          columns,
          totalWidth: res.totalWidth
        });
      }
      let formData = res.result?.formData || [];
      this.setState({ formData });
    } catch (error) {
      console.log(error);
      this.getFormData();
    }
  }

  // 复制品牌数据
  getCopyBrandsFormData = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ApplicationFieldConfigurationCopyBrands',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      this.setState({ copyBrandsFormData: res.result?.formData || [] });
    } catch (error) {
      console.log(error);
    }
  }

  // 获取表单数据
  getFormData = () => {
    let { selectData } = this.state;
    let formData = [{
      dataIndex: 'brandID',
      title: '品牌',
      typeCode: 'Select',
      required: 'Y',
      detailItem: selectData && 'brandList' in selectData ? selectData.brandList : [],
    }, {
      dataIndex: 'series',
      title: '系列',
      typeCode: 'Input',
      // required: 'Y',
    }, {
      dataIndex: 'startDate',
      title: '生效日期',
      typeCode: 'Date',
      required: 'Y',
      defaultValue: moment().format(dayFormat)
    }, {
      dataIndex: 'stopDate',
      title: '失效日期',
      typeCode: 'Date'
    }];
    this.setState({ formData })
  }

  // 仅显示生效切换
  handleCheckboxChange = e => {
    this.setState({ checked: e.target.checked }, () => {
      this.getTableData();
    })
  }

  // 获取品牌列表数据
  getTableData = async (isClearDetailData) => {
    try {
      this.setState({ loading: true })
      let { brandID, checked } = this.state;
      let data = {
        params: [{
          brandID,
          activeFlag: checked ? 'Y' : 'N', // 有效标志
        }]
      }
      let res = await React.$asyncPost(this, '17030016', data);
      let tableData = res.result && 'rows' in res.result ? Util.addKeyValueToDataSource(res.result.rows) : [];
      this.setState({ tableData, total: res.result.total, loading: false }, () => {
        isClearDetailData === 'N' ? '' : this.handleClearDetailData();
      });
    } catch (error) {
      this.setState({ tableData: [], total: 0, loading: false }, () => {
        this.handleClearDetailData();
      })
    }
  }

  // 清除明细操作数据
  handleClearDetailData = () => {
    this.setState({
      rowID: '', rowData: {},
      detailTableData: [],
      detailRowData: {},
      detailFormSelectData: {},
      detailSelectedRowKeys: [],
      detailSelectedRowData: [],
      productTableData: [],
      productSelectedRowKeys: [],
    })
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowID === '' || (this.state.rowID && (this.state.rowID !== record.brandMainID))) {
          this.setState({ rowID: record.brandMainID, rowData: record, detailSelectedRowKeys: [], detailSelectedRowData: [] }, () => {
            this.getDetailTableData();
            this.getProductTableData();
          })
        } else {
          this.handleClearDetailData();
        }
      }
    }
  }

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

  // 添加
  handleAdd = () => {
    let { recordData } = this.state;
    if (recordData && 'brandMainID' in recordData && recordData.brandMainID) {
      this.setState({ recordData: {} })
    }
    this.setState({ addType: 'mainTable' })
    this.modalFormRef && this.modalFormRef.modifyVisible(true);
  }

  // 编辑
  handleModify = (record, e) => {
    this.handleStopPropagation(e);
    this.setState({ recordData: React.$dataConversion(record), addType: 'mainTable' }, () => {
      this.modalFormRef && this.modalFormRef.modifyVisible(true);
    })
  }

  // 删除
  handleDelete = async (record, e) => {
    this.handleStopPropagation(e);
    try {
      if (!(record && record.brandMainID)) return;
      let data = {
        params: [{
          brandMainID: record?.brandMainID
        }]
      }
      let res = await React.$asyncPost(this, '17030015', data);
      message.success(res.errorMessage ? res.errorMessage : '删除成功');
      this.getTableData();
    } catch (error) {
      console.log(error)
    }
  }

  // 保存
  handleSave = async values => {
    try {
      let { recordData, addType } = this.state;
      let data = {
        params: [{
          ...values,
          brandMainID: addType === 'mainTable' ? recordData?.brandMainID : undefined,
          detailIDArr: addType === 'mainTable' ? undefined : this.getDetailTableCheckedID('detailSelectedRowData')
        }]
      }
      let res = await React.$asyncPost(this, addType === 'mainTable' ? '17030014' : '17030022', data);
      let messageTitle = res.errorMessage || (addType === 'mainTable' ? '保存成功' : '复制成功')
      message.success(messageTitle);
      this.modalFormRef && this.modalFormRef.modifyVisible(false, 'Y');
      this.state[addType === 'mainTable' ? 'recordData' : 'copyRecordData'] = {};
      this.setState({}, () => {
        this.getTableData(addType === 'mainTable' ? 'Y' : 'N');
      });
    } catch (error) {
      console.log(error)
    }
  }

  // 记录表单的值
  recordFormInput = record => {
    const { addType } = this.state;
    if (addType === 'mainTable') { // 主列表操作
      this.setState({ recordData: { ...this.state.recordData, ...record } })
    } else {
      this.setState({ copyRecordData: { ...this.state.copyRecordData, ...record } })
    }
  }

  // 获取明细列表表头数据
  getDetailTableColumns = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ApplicationFieldConfigDetail',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (columns && columns.length > 0) {
        columns = columns.map(item => {
          return {
            ...item,
            render: (text, record) => {
              let currentText = text === 'Y' ? '是' : (text === 'N' ? '否' : text);
              return (
                <Tooltip title={currentText}>
                  <span className='ellipsis' style={{ width: '100%', display: 'block' }}>
                    {currentText}
                  </span>
                </Tooltip>
              )
            }
          }
        })
        this.setState({
          detailColumns: columns,
          detailTotalWidth: res.totalWidth
        })
      }
      let detailFormData = res.result?.formData || [];
      if (detailFormData && Array.isArray(detailFormData) && detailFormData.length > 0) {
        this.setState({ detailFormData });
      } else {
        this.getDetailFormData();
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 获取表单数据
  getDetailFormData = () => {
    let { detailFormSelectData, selectData } = this.state;
    let formData = [{
      title: '代码',
      dataIndex: 'code',
      typeCode: 'Input',
      required: 'Y',
    }, {
      title: '描述',
      dataIndex: 'desc',
      typeCode: 'Input',
      required: 'Y',
    }, {
      title: '组件类型',
      dataIndex: 'compTypeID',
      typeCode: 'Select',
      detailItem: detailFormSelectData?.componentTypeSelect || [],
      required: 'Y',
      defaultValue: detailFormSelectData && detailFormSelectData.componentTypeSelect && detailFormSelectData.componentTypeSelect.length > 0 ? detailFormSelectData.componentTypeSelect[0].id : undefined
    }, {
      title: '英文描述',
      dataIndex: 'enDesc',
      typeCode: 'Input',
    }, {
      title: '关联取值',
      dataIndex: 'linkValueID',
      typeCode: 'Select',
      detailItem: detailFormSelectData?.linkValueSelect || [],
    }, {
      title: '取值接口代码',
      dataIndex: 'linkCode',
      typeCode: 'Input',
    }, {
      title: '关联类',
      dataIndex: 'linkClass',
      typeCode: 'Input',
    }, {
      title: '关联方法',
      dataIndex: 'linkMethod',
      typeCode: 'Input',
    }, {
      title: '占位',
      dataIndex: 'seatSize',
      typeCode: 'Input',
      defaultValue: 24
    }, {
      title: '前端回调方法',
      dataIndex: 'callBackFunction',
      typeCode: 'Input',
    }, {
      title: '单位',
      dataIndex: 'unitID',
      typeCode: 'Select',
      detailItem: selectData?.unit || [],
    }, {
      title: '跳转到',
      dataIndex: 'enterJumpToID',
      typeCode: 'Select',
      detailItem: detailFormSelectData?.enterJumpToSelect || [],
    }, {
      title: '是否必填',
      dataIndex: 'required',
      typeCode: 'Switch',
    }, {
      title: '是否显示',
      dataIndex: 'display',
      typeCode: 'Switch',
      defaultValue: 'Y'
    }, {
      title: '是否只读',
      dataIndex: 'readOnly',
      typeCode: 'Switch',
    }];
    this.setState({ detailFormData: formData })
  }

  handleDetailSelectedRowKeysChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      detailSelectedRowKeys: selectedRowKeys,
      detailSelectedRowData: selectedRows
    })
  }

  // 获取明细列表数据
  getDetailTableData = async () => {
    try {
      this.setState({ detailLoading: true });
      let { rowID } = this.state;
      let data = {
        params: [{
          brandMainID: rowID
        }]
      }
      let res = await React.$asyncPost(this, '17030017', data);
      this.setState({
        detailTableData: Util.addKeyValueToDataSource(res.result?.brandSetDetail || [], false, 0),
        detailFormSelectData: { ...res.result },
        detailLoading: false
      });
    } catch (error) {
      this.setState({ detailLoading: false });
      console.log(error);
    }
  }

  // 记录表单的值
  recordDetailFormInput = record => {
    this.setState({ detailRowData: { ...this.state.detailRowData, ...record } })
  }

  // 添加明细
  handleDetailAdd = () => {
    let { rowID } = this.state;
    if (rowID === '') {
      message.info("请选中一条主记录后再添加！")
      return
    }
    let { detailRowData } = this.state;
    if (detailRowData && 'brandSetDetailID' in detailRowData && detailRowData.brandSetDetailID) {
      this.setState({ detailRowData: {} })
    }
    this.detailModalFormRef && this.detailModalFormRef.modifyVisible(true);
  }

  // 编辑
  handleDetailModify = record => {
    this.setState({ detailRowData: React.$dataConversion(record) }, () => {
      this.detailModalFormRef && this.detailModalFormRef.modifyVisible(true);
    })
  }

  // 删除明细列表
  handleDetailDelete = async record => {
    try {
      let data = {
        params: [{
          IDArr: [record?.brandSetDetailID]
        }]
      }
      let res = await React.$asyncPost(this, '17030020', data);
      message.success(res.errorMessage ? res.errorMessage : '删除成功');
      this.setState({ detailSelectedRowKeys: [], detailSelectedRowData: [] });
      this.getDetailTableData();
    } catch (error) {
      console.log(error)
    }
  }

  // 保存
  handleDetailSave = async values => {
    try {
      let { rowID, rowData, detailRowData } = this.state;
      let data = {
        params: [{
          ...values,
          brandMainID: rowID,
          brandID: rowData?.brandID, // 品牌ID
          seqNo: detailRowData?.seqNo, // 序号
          brandSetDetailID: detailRowData?.brandSetDetailID
        }]
      }
      let res = await React.$asyncPost(this, '17030019', data);
      message.success(res.errorMessage || '保存成功');
      this.detailModalFormRef && this.detailModalFormRef.modifyVisible(false, 'Y');
      this.setState({ detailRowData: {} }, () => {
        this.getDetailTableData();
      });
    } catch (error) {
      console.log(error)
    }
  }

  //上移
  handleUp = () => {
    let { detailTableData, detailSelectedRowKeys } = this.state;
    var newKeys = [];
    detailSelectedRowKeys = detailSelectedRowKeys.sort(function (m, n) {
      if (m < n) return -1
      else if (m > n) return 1
      else return 0
    });
    for (var i = 0; i < detailSelectedRowKeys.length; i++) {
      if (detailSelectedRowKeys[i] === 0) {
        newKeys.push(detailSelectedRowKeys[i]);
        continue;
      }
      var curRowData = detailTableData[detailSelectedRowKeys[i]];
      var curRowKey = curRowData.key;
      var upRowData = detailTableData[detailSelectedRowKeys[i] - 1];
      var upRowKey = upRowData.key;
      upRowData.key = curRowKey;
      curRowData.key = upRowKey;
      detailTableData[detailSelectedRowKeys[i]] = upRowData;
      detailTableData[detailSelectedRowKeys[i] - 1] = curRowData;
      newKeys.push(detailSelectedRowKeys[i] - 1);
    }
    this.setState({
      detailTableData,
      detailSelectedRowKeys: newKeys
    }, () => {
      this.handleMoveSave();
    })
  }

  //下移
  handleDown = () => {
    let { detailTableData, detailSelectedRowKeys } = this.state;
    var newKeys = [];
    detailSelectedRowKeys = detailSelectedRowKeys.sort(function (m, n) {
      if (m < n) return -1
      else if (m > n) return 1
      else return 0
    });
    for (var i = detailSelectedRowKeys.length - 1; i >= 0; i--) {
      if (detailSelectedRowKeys[i] === detailTableData.length - 1) {
        newKeys.push(detailSelectedRowKeys[i]);
        continue;
      }
      var curRowData = detailTableData[detailSelectedRowKeys[i]];
      var upRowData = detailTableData[detailSelectedRowKeys[i] + 1];
      var curRowKey = curRowData.key;
      var upRowKey = upRowData.key;
      upRowData.key = curRowKey;
      curRowData.key = upRowKey;
      detailTableData[detailSelectedRowKeys[i]] = upRowData;
      detailTableData[detailSelectedRowKeys[i] + 1] = curRowData;
      newKeys.push(detailSelectedRowKeys[i] + 1);
    }
    this.setState({
      detailTableData,
      detailSelectedRowKeys: newKeys
    }, () => {
      this.handleMoveSave();
    })
  }

  // 获取明细列表选中数据ID集合
  getDetailTableCheckedID = (dataIndex) => {
    let dataSource = this.state[dataIndex]
    let checkedID = [];
    for (var i = 0; i < dataSource.length; i++) {
      checkedID.push(dataSource[i]?.brandSetDetailID)
    }
    return checkedID;
  }

  // 上下移保存
  handleMoveSave = Util.debounce(async () => {
    try {
      let data = {
        params: [{
          IDArr: this.getDetailTableCheckedID('detailTableData')
        }]
      }
      let res = await React.$asyncPost(this, '17030021', data);
      message.success(res.errorMessage || '保存成功');
    } catch (error) {
      console.log(error)
    }
  })

  // 获取列表操作列
  getOperationObj = (type, fixed) => {
    const operationObj = {
      width: 130,
      title: '操作',
      fixed: fixed === 'N' ? '' : 'right',
      align: 'center',
      key: 'operation',
      render: (text, record) => (
        <span>
          <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
          <span
            className="span"
            onClick={type === 'detail' ? () => this.handleDetailModify(record) : (type === 'product' ? (e) => this.handleProductModify(record, e) : (e) => this.handleModify(record, e))}
          >
            编辑
          </span>
          <Divider type="vertical" />
          <Icon type="delete" className="common-record-delete-span"></Icon>
          <Popconfirm
            title="删除不可恢复，你确定要删除吗?"
            onClick={this.handleStopPropagation}
            onConfirm={type === 'detail' ? () => this.handleDetailDelete(record) : (type === 'product' ? (e) => this.handleProductDelete(record, e) : (e) => this.handleDelete(record, e))}
          >
            <span className="span common-record-delete-span">删除</span>
          </Popconfirm>
        </span>
      ),
    };
    return operationObj;
  }

  // 点击input框时阻止事件冒泡
  handleStopPropagation = (e) => {
    e.stopPropagation();
  }

  // 复制到其他品牌
  handleCopyBrand = () => {
    const { copyBrandsFormData } = this.state;
    if (!(copyBrandsFormData && copyBrandsFormData.length > 0)) {
      this.getCopyBrandsFormData();
    }
    this.setState({ addType: 'copy' })
    this.modalFormRef && this.modalFormRef.modifyVisible(true);
  }

  handleTabChange = (key) => {
    const { productColumns } = this.state;
    if (key === '2' && !(productColumns && productColumns.length > 0)) {
      this.getProductTableColumns();
    }
    this.setState({ activeKey: key });
  }

  // 产品表头数据
  getProductTableColumns = async () => {
    try {
      let data = {
        params: [{
          compontName: 'ApplicationFieldConfigProduct',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result?.C || [];
      if (columns && columns.length > 0) {
        this.setState({
          productColumns: columns,
          productTotalWidth: res.totalWidth
        })
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 获取产品列表数据
  getProductTableData = async () => {
    try {
      this.setState({ productLoading: true });
      let { rowID } = this.state;
      let data = {
        params: [{
          brandMainID: rowID
        }]
      }
      let res = await React.$asyncPost(this, '17020017', data);
      let productTableData = Util.addKeyValueToDataSource(res.result?.rows || [], 'stockID');
      let productSelectedRowKeys = [];
      for (let i = 0; i < productTableData.length; i++) {
        if (!!(productTableData[i]?.brandLinkStockID)) {
          productSelectedRowKeys.push(productTableData[i].stockID)
        }
      }
      this.setState({
        productTableData,
        productSelectedRowKeys,
        productLoading: false
      });
    } catch (error) {
      console.log(error);
      this.setState({ productLoading: false });
    }
  }

  handleProductSave = async () => {
    try {
      const { rowID, productTableData, productSelectedRowKeys } = this.state;
      let saveArr = [];
      console.log('productTableData', productTableData, productSelectedRowKeys)
      for (let i = 0; i < productTableData.length; i++) {
        let currentStockID = productTableData[i]?.stockID || '';
        let currentBrandLinkStockID = productTableData[i]?.brandLinkStockID || '';
        if (!currentBrandLinkStockID) {
          if (productSelectedRowKeys.indexOf(currentStockID) > -1) {
            saveArr.push({
              brandMainID: rowID,
              stockID: currentStockID,
            })
          }
        } else {
          if (productSelectedRowKeys.indexOf(currentStockID) < 0) {
            saveArr.push({
              brandMainID: rowID,
              stockID: currentStockID,
              brandLinkStockID: currentBrandLinkStockID,
              deleteFlag: 'Y'
            })
          }
        }
      }
      console.log('saveArr', saveArr)
      let data = {
        params: [{
          saveArr
        }]
      }
      let res = await React.$asyncPost(this, '17020018', data);
      message.success(res.errorMessage || '保存成功');
      this.getProductTableData();
    } catch (error) {
      console.log(error)
    }
  }

  handleProductSelectedRowKeysChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      productSelectedRowKeys: selectedRowKeys,
    })
  }

  render() {
    const { checked, selectData, brandID, loading, columns, totalWidth, tableData, rowID, detailLoading, detailTableData, detailTotalWidth, detailColumns, detailSelectedRowKeys, formData, recordData,
      detailFormData, detailRowData, addType, copyRecordData, tabList, activeKey, productLoading, productTotalWidth, productColumns, productTableData, productSelectedRowKeys, detailFormSelectData,
      copyBrandsFormData
    } = this.state;

    const detailRowSelection = {
      selectedRowKeys: detailSelectedRowKeys,
      onChange: this.handleDetailSelectedRowKeysChange
    };

    return (
      <div className="table-body-height application-field-configuration">
        <Row>
          <Col span={8}>
            <div style={{ paddingRight: '8px', position: 'relative', height: '100%' }}>
              <Card
                size="small"
                className="afc-card"
                bordered={false}
                title={(
                  <div className="card-title-left-img">
                    <img src={iconListVisits} alt="" />
                    品牌列表
                  </div>
                )}
                extra={(
                  <Checkbox checked={checked} onChange={this.handleCheckboxChange}>仅显示生效</Checkbox>
                )}
              >
                <div style={{ marginBottom: 12 }}>
                  <span className="common-input-label">品牌：</span>
                  <Select
                    allowClear
                    showSearch
                    optionFilterProp="seachprop"
                    placeholder="请选择"
                    value={brandID}
                    onChange={Util.handleSelectChange.bind(this, 'brandID')}
                    style={{ width: '160px', marginRight: 12 }}
                  >
                    {selectData && selectData.brandList ? React.$SelectOptions(selectData.brandList) : ''}
                  </Select>
                  <Button onClick={this.getTableData}>查询</Button>
                  <Button
                    icon="plus"
                    className="add-btn add-btn-nohover"
                    style={{ float: 'right' }}
                    onClick={this.handleAdd}
                  >添加配置品牌</Button>
                </div>
                <PubilcTablePagination
                  param={{
                    loading,
                    data: tableData, // 表格数据
                    x: totalWidth, // 表格的宽度
                    y: store.getState().tableHeight.y + 70,
                    height: store.getState().tableHeight.y + 131 + 'px',
                    componentName: 'ApplicationFieldConfiguration',
                    columns: columns && columns.length > 0 ? [...columns, this.getOperationObj('main')] : [...this.staticColumns, this.getOperationObj('main')], // 表头配置
                  }}
                  getColumns={this.getTableColumns}
                  onClickRowPublic={this.onClickRowPublic}
                  setRowClassNamePublic={this.setRowClassNamePublic}
                />
              </Card>
              <div className="common-card-right-split-line" style={{ width: 8 }}></div>
            </div>
          </Col>
          <Col span={16}>
            <Card
              size="small"
              className="sm-card-tabs"
              bordered={false}
              tabList={tabList}
              activeTabKey={activeKey}
              onTabChange={this.handleTabChange}
            >
              <div style={{ display: activeKey === '1' ? 'block' : 'none' }}>
                <div className="flex-between-center" style={{ marginBottom: 12 }}>
                  <div className="afc-card-header">
                    <Button
                      type="link"
                      icon="arrow-up"
                      className="afc-card-up-btn"
                      disabled={!(detailSelectedRowKeys && detailSelectedRowKeys.length > 0)}
                      onClick={this.handleUp}
                    >
                      上移
                    </Button>
                    <Divider type="vertical" />
                    <Button
                      type="link"
                      icon="arrow-down"
                      className="afc-card-down-btn"
                      disabled={!(detailSelectedRowKeys && detailSelectedRowKeys.length > 0)}
                      onClick={this.handleDown}
                    >下移</Button>
                  </div>
                  <div>
                    <Button
                      ghost
                      icon="copy"
                      type="primary"
                      style={{ marginRight: 12 }}
                      disabled={!(detailSelectedRowKeys && detailSelectedRowKeys.length > 0)}
                      onClick={this.handleCopyBrand}
                    >
                      复制到其他品牌
                    </Button>
                    <Button
                      icon="plus"
                      className={rowID ? 'add-btn add-btn-nohover' : ''}
                      disabled={!rowID}
                      onClick={this.handleDetailAdd}
                    >添加字段</Button>
                  </div>
                </div>
                <PubilcTablePagination
                  param={{
                    loading: detailLoading,
                    data: detailTableData, // 表格数据
                    x: detailTotalWidth, // 表格的宽度
                    y: store.getState().tableHeight.y + 72,
                    componentName: 'ApplicationFieldConfigDetail',
                    height: store.getState().tableHeight.y + 122 + 'px',
                    columns: detailColumns && detailColumns.length > 0 ? [...detailColumns, this.getOperationObj('detail')] : [...this.staticDetailColumns, this.getOperationObj('detail')], // 表头配置
                  }}
                  rowSelectionPublic={detailRowSelection}
                  getColumns={this.getDetailTableColumns}
                />
              </div>
              <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>
                <div style={{ textAlign: 'right', marginBottom: 12 }}>
                  <Button
                    type="primary"
                    disabled={!rowID}
                    onClick={this.handleProductSave}
                  >保存</Button>
                </div>
                <PubilcTablePagination
                  param={{
                    loading: productLoading,
                    data: productTableData, // 表格数据
                    x: productTotalWidth, // 表格的宽度
                    y: store.getState().tableHeight.y + 72,
                    componentName: 'ApplicationFieldConfigProduct',
                    height: store.getState().tableHeight.y + 122 + 'px',
                    columns: productColumns, // 表头配置
                  }}
                  rowSelectionPublic={{
                    selectedRowKeys: productSelectedRowKeys,
                    onChange: this.handleProductSelectedRowKeysChange
                  }}
                  getColumns={this.getProductTableColumns}
                />
              </div>
            </Card>
          </Col>
        </Row>

        {/* 主表新增弹窗 */}
        <PublicModalFormHooks
          formData={addType !== 'copy' ? formData : copyBrandsFormData}
          selectData={{ ...selectData, ...detailFormSelectData }}
          idField='brandMainID'
          rowData={addType === 'mainTable' ? recordData : copyRecordData}
          title={addType === 'copy' ? '复制到其他品牌' : ''}
          formItemCol={{ labelCol: 5, wrapperCol: 16, col: 24 }}
          onRef={ref => this.modalFormRef = ref}
          recordFormInput={this.recordFormInput}
          handleSave={this.handleSave}
        />

        {/* 申请单配置 */}
        <PublicModalFormHooks
          width="1000px"
          formData={detailFormData}
          rowData={detailRowData}
          selectData={{ ...selectData, ...detailFormSelectData }}
          formItemCol={{ labelCol: 6, wrapperCol: 16, col: 12 }}
          onRef={ref => this.detailModalFormRef = ref}
          recordFormInput={this.recordDetailFormInput}
          handleSave={this.handleDetailSave}
        />
      </div>
    )
  }
};

export default ApplicationFieldConfiguration;