/*
 * Create:      柿子
 * CreateDate:  2022/09/14
 * Describe：   react组件 -- 组件数据维护
 * */
import React, { Component } from 'react';
import { Row, Col, Input, Select, Button, message, Card, Tabs, Tooltip } from 'antd';
import { Util, dayFormat } from 'tools';
import store from 'store';
import moment from 'moment';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import CDMComponentMaintenance from './component/CDMComponentMaintenance';
import iconListVisits from 'assets/images/icon_listvisits.png';
const TabPane = Tabs.TabPane;
const { Option } = Select;

class ComponentDataMaintenance extends Component {
  constructor() {
    super();
    this.state = {
      alias: undefined, // 代码/描述
      statusID: '',
      page: 1,
      pageSize: 20,
      tableData: [],
      total: 0,
      columns: [],
      tableWidth: 1400,
      rowID: '',
      rowData: {},
      basicHeight: 0,
      activeTabPaneKey: 'baseInfo',
      componentColumns: [],
      languageColumns: [],
      languageTableWidth: 1280,
      formData: [],
      componentFormData: [],
      languageFormData: [],
      fieldTypeSelectData: [], // 字段类型
      formColumns: [],
      formFormData: [],
      formTableWidth: 1420,
      btnColumns: [],
      btnFormData: [],
      btnTableWidth: 1280,
      selectData: {},
      loading: false
    };

    this.staticColumns = [{
      key: 1,
      title: '代码',
      dataIndex: 'code',
      align: 'center',
      width: '200px'
    }, {
      key: 2,
      title: '描述',
      dataIndex: 'descripts',
      align: 'center',
      width: '200px'
    }, {
      key: 3,
      title: '英文描述',
      dataIndex: 'enDesc',
      align: 'center',
      width: '200px'
    }, {
      key: 4,
      title: '路径',
      dataIndex: 'path',
      align: 'center',
      width: '200px'
    }, {
      key: 5,
      title: '组件地址',
      dataIndex: 'comAddress',
      align: 'center',
      width: '100px'
    }, {
      key: 6,
      title: '备注',
      dataIndex: 'note',
      align: 'center',
      width: '100px'
    }, {
      key: 7,
      title: '生效日期',
      dataIndex: 'startDate',
      align: 'center',
      width: '100px'
    }, {
      key: 8,
      title: '失效日期',
      dataIndex: 'stopDate',
      align: 'center',
      width: '100px'
    }];
  }

  componentDidMount() {
    this.getSelectData();
    this.getFormData();
    this.handleQuery();
    this.getColumnsData();
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  getSelectData = async () => {
    try {
      let res = await React.$asyncPost(this, '01040287');
      this.setState({ selectData: res });
    } catch (error) {
      this.setState({ selectData: {} });
    }
  }

  // 获取基本信息form数据
  getFormData = () => {
    const formData = [{
      dataIndex: 'code',
      title: '代码',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'descripts',
      title: '描述',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'enDesc',
      title: '英文描述',
      typeCode: 'Input'
    }, {
      dataIndex: 'path',
      title: '组件路径',
      typeCode: 'Input'
    }, {
      dataIndex: 'comAddress',
      title: '方法文件名',
      typeCode: 'Input',
      placeholder: '操作按钮事件对应的js文件名(默认使用当前组件名)',
      doubt: '对应的js文件统一放在当前组件js文件夹下',
    }, {
      dataIndex: 'note',
      title: '备注',
      typeCode: 'Input'
    }, {
      dataIndex: 'startDate',
      title: '生效日期',
      typeCode: 'Date',
      required: 'Y',
      defaultValue: moment().format(dayFormat),
    }, {
      dataIndex: 'stopDate',
      title: '失效日期',
      typeCode: 'Date',
    }];
    this.setState({ formData })
  }

  // 获取列表表头数据
  getColumnsData = async () => {
    try {
      let data = {
        params: [{
          type: 'C',
          compontName: 'ComponentDataMaintenance',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let filterColumn = res.result && res.result.C && Array.isArray(res.result.C) && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).filter(function (item) { return item.displayFlag !== 'N' }) : [];
      if (filterColumn && filterColumn.length > 0) {
        this.setState({ columns: filterColumn, tableWidth: res.totalWidth });
      }
    } catch (error) {
      console.log(error)
    }
  }

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

  // 获取列表数据
  getTableData = async () => {
    try {
      this.setState({ loading: true });
      let { alias, statusID, page, pageSize } = this.state;
      let data = {
        params: [{
          alias,
          status: statusID
        }],
        pagination: [{
          pageSize: pageSize,
          currentPage: page,
          sortColumn: '',
          sortOrder: ''
        }]
      }
      let res = await React.$asyncPost(this, '01040272', data);
      let tableData = res.result && res.result.rows ? res.result.rows : [];
      this.setState({ tableData, total: res.result?.total || 0, loading: false }, () => {
        this.resetFields();
      })
    } catch (error) {
      console.log(error);
      this.setState({ tableData: [], total: 0, loading: false }, () => {
        // this.resetFields();
      })
    }
  }

  // 数据导入
  handleDataImport = () => {
    message.info('功能开发中……')
  }

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

          })
        } else {
          if (this.state.rowID !== record.id) {
            this.setState({ rowID: record.id, rowData: record }, () => {

            })
          } else {
            this.resetFields();
          }
        }
      }
    }
  }

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

  // 切换医嘱查询页签
  toggleTabPane = key => {
    let { componentColumns, componentFormData, languageColumns, languageFormData, formColumns, formFormData, btnColumns, btnFormData } = this.state;
    this.setState({ activeTabPaneKey: key }, () => {
      if (this.state.activeTabPaneKey === 'table') {
        componentColumns && componentColumns.length > 0 ? '' : this.getComponentColumns(); // 获取table组件表列表头数据
        componentFormData && componentFormData.length > 0 ? '' : this.getComponentFormData(); // 获取table组件列form数据
      } else if (this.state.activeTabPaneKey === 'field') {
        languageColumns && languageColumns.length > 0 ? '' : this.getLanguageColumns(); // 获取国际化表头数据
        languageFormData && languageFormData.length > 0 ? '' : this.getLanguageFormData(); // 获取国际化form数据
      } else if (this.state.activeTabPaneKey === 'form') {
        formColumns && formColumns.length > 0 ? '' : this.getFormColumns(); // 获取form表单表头数据 
        formFormData && formFormData.length > 0 ? '' : this.getFormFormData(); // 获取form表单form数据
      } else if (this.state.activeTabPaneKey === 'button') {
        btnColumns && btnColumns.length > 0 ? '' : this.getBtnColumns(); // 获取操作按钮表头数据
        btnFormData && btnFormData.length > 0 ? '' : this.getBtnFormData(); // 获取操作按钮form数据
      }
    })
  }

  // 保存
  handleSave = async () => {
    try {
      let { rowID } = this.state;
      let values = await this.formRef.handleSave();
      if (!values?.error) {
        let data = {
          params: [{
            ...values,
            id: rowID ? rowID : undefined,
          }]
        }
        let res = await React.$asyncPost(this, '01040271', data);
        message.success(res.errorMessage);
        this.getTableData();
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 重置表单
  resetFields = () => {
    let { rowID } = this.state;
    if (rowID) {
      this.setState({ rowID: '' });
    }
    this.setState({ rowData: {} }, () => {
      this.formRef && this.formRef.resetFields && this.formRef.resetFields();
    })
  }

  // 获取组件表列表头数据
  getComponentColumns = () => {
    let componentColumns = [{
      key: 5,
      title: '序号',
      dataIndex: 'seqNo',
      align: 'center',
      width: '80px'
    }, {
      key: 1,
      title: '代码',
      dataIndex: 'code',
      align: 'center',
      width: '150px'
    }, {
      key: 2,
      title: '描述',
      dataIndex: 'descripts',
      align: 'center',
      width: '150px'
    }, {
      key: 3,
      title: '读写类型',
      dataIndex: 'type',
      align: 'center',
      width: '80px'
    }, {
      key: 4,
      title: '列宽',
      dataIndex: 'width',
      align: 'center',
      width: '80px'
    }, {
      key: 6,
      title: '显示',
      dataIndex: 'display',
      align: 'center',
      width: '80px',
    }, {
      key: 7,
      title: '打印',
      dataIndex: 'print',
      align: 'center',
      width: '80px',
    }, {
      key: 8,
      title: '导出',
      dataIndex: 'export',
      align: 'center',
      width: '80px',
    }, {
      key: 9,
      title: '关联方法',
      dataIndex: 'linkMethod',
      align: 'center',
      width: '200px'
    }, {
      key: 10,
      title: '关联服务',
      dataIndex: 'linkService',
      align: 'center',
      width: '100px'
    }, {
      key: 11,
      title: '对齐方式',
      dataIndex: 'alignDesc',
      align: 'center',
      width: '80px'
    }, {
      key: 12,
      title: '固定显示',
      dataIndex: 'fixedDesc',
      align: 'center',
      width: '80px'
    }, {
      key: 13,
      title: '是否显示标题',
      dataIndex: 'visible',
      align: 'center',
      width: '120px',
    }, {
      key: 14,
      title: '英文描述',
      dataIndex: 'enDesc',
      align: 'center',
      width: '200px',
    }];
    componentColumns = componentColumns.map(item => {
      return {
        ...item,
        render: (text, record) => {
          if (item.dataIndex === 'display' || item.dataIndex === 'print' || item.dataIndex === 'export' || item.dataIndex === 'visible') {
            let config = {
              'Y': '是',
              'N': '否'
            }
            return config[text];
          } else {
            return (
              <Tooltip title={text}>
                <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
              </Tooltip>
            )
          }
        }
      }
    })
    this.setState({ componentColumns, componentTableWidth: 1450 })
  }

  // 获取组件表列按钮维护form数据
  getComponentFormData = async () => {
    let componentFormData = [{
      dataIndex: 'code',
      title: '代码',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'descripts',
      title: '描述',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'type',
      title: '读写类型',
      typeCode: 'Select',
      required: 'Y',
      disabled: 'Y',
      detailItem: [],
    }, {
      dataIndex: 'width',
      title: '列宽',
      typeCode: 'Input',
      defaultValue: 100
    }, {
      dataIndex: 'seqNo',
      title: '序号',
      typeCode: 'NumberInput'
    }, {
      dataIndex: 'enDesc',
      title: '英文描述',
      typeCode: 'Input'
    }, {
      dataIndex: 'linkMethod',
      title: '关联方法',
      typeCode: 'Input'
    }, {
      dataIndex: 'linkService',
      title: '关联服务',
      typeCode: 'Input'
    }, {
      dataIndex: 'align',
      title: '对齐方式',
      typeCode: 'Select',
      detailItem: [],
      defaultValue: 'center'
    }, {
      dataIndex: 'fixed',
      title: '固定显示',
      typeCode: 'Select',
      detailItem: []
    }, {
      dataIndex: 'display',
      title: '显示',
      typeCode: 'Switch',
      defaultValue: 'Y'
    }, {
      dataIndex: 'print',
      title: '打印',
      typeCode: 'Switch',
      defaultValue: 'Y'
    }, {
      dataIndex: 'export',
      title: '导出',
      typeCode: 'Switch',
      defaultValue: 'Y'
    }, {
      dataIndex: 'visible',
      title: '是否显示标题',
      typeCode: 'Switch'
    }];
    this.setState({ componentFormData })
  }

  // 获取table组件表单数据
  getLanguageColumns = () => {
    let languageColumns = [{
      key: 1,
      title: '代码',
      dataIndex: 'code',
      align: "center",
      width: '100px'
    }, {
      key: 2,
      title: '描述',
      dataIndex: 'descripts',
      align: "center",
      width: '100px'
    }, {
      key: 4,
      title: '英文描述',
      dataIndex: 'enDesc',
      align: "center",
      width: '100px'
    }, {
      key: 5,
      title: '提示信息',
      dataIndex: 'message',
      align: "center",
      width: '100px'
    }, {
      key: 6,
      title: '提示信息英文',
      dataIndex: 'messageEN',
      align: "center",
      width: '150px'
    }, {
      key: 7,
      title: '字段类型',
      dataIndex: 'fieldTypeDrDesc',
      align: "center",
      width: '100px'
    }, {
      key: 8,
      title: '长度',
      dataIndex: 'length',
      align: "center",
      width: '100px'
    }, {
      key: 9,
      title: '焦点顺序',
      dataIndex: 'focusIndex',
      align: "center",
      width: '100px'
    }, {
      key: 10,
      title: '前缀',
      dataIndex: 'suffix',
      align: "center",
      width: '100px'
    }, {
      key: 11,
      title: '是否必填',
      dataIndex: 'required',
      align: "center",
      width: '80px'
    }, {
      key: 12,
      title: '是否无效',
      dataIndex: 'disabled',
      align: "center",
      width: '80px'
    }];
    languageColumns = languageColumns.map(item => {
      return {
        ...item,
        render: (text, record) => {
          if (item.dataIndex === 'required' || item.dataIndex === 'disabled') {
            let config = {
              'Y': '是',
              'N': '否'
            }
            return config[text];
          } else {
            return (
              <Tooltip title={text}>
                <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
              </Tooltip>
            )
          }
        }
      }
    })
    this.setState({ languageColumns });
  }

  // 获取国际化表单数据
  getLanguageFormData = () => {
    let languageFormData = [{
      dataIndex: 'code',
      title: '代码',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'descripts',
      title: '描述',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'seqNo',
      title: '序号',
      typeCode: 'Input'
    }, {
      dataIndex: 'enDesc',
      title: '英文描述',
      typeCode: 'Input'
    }, {
      dataIndex: 'message',
      title: '提示信息',
      typeCode: 'Input'
    }, {
      dataIndex: 'messageEN',
      title: '提示信息英文',
      typeCode: 'Input'
    }, {
      dataIndex: 'fieldTypeID',
      title: '字段类型',
      typeCode: 'Select',
      detailItem: [],
      defaultValue: '5'
    }, {
      dataIndex: 'length',
      title: '占位长度',
      typeCode: 'Input',
      defaultValue: 12
    }, {
      dataIndex: 'focusIndex',
      title: '焦点顺序',
      typeCode: 'Input'
    }, {
      dataIndex: 'suffix',
      title: '前缀',
      typeCode: 'Input'
    }, {
      dataIndex: 'required',
      title: '是否必填',
      typeCode: 'Switch'
    }, {
      dataIndex: 'disabled',
      title: '是否无效',
      typeCode: 'Switch'
    }];
    this.setState({ languageFormData });
  }

  // 获取form表单表头数据
  getFormColumns = () => {
    let formColumns = [{
      key: 1,
      title: '序号',
      dataIndex: 'seqNo',
      align: "center",
      width: '60px'
    }, {
      key: 2,
      title: '代码',
      dataIndex: 'code',
      align: "center",
      width: '150px'
    }, {
      key: 3,
      title: '描述',
      dataIndex: 'descripts',
      align: "center",
      width: '150px'
    }, {
      key: 4,
      title: '英文描述',
      dataIndex: 'enDesc',
      align: "center",
      width: '100px',
    }, {
      key: 5,
      title: '字段类型',
      dataIndex: 'fieldTypeDrDesc',
      align: "center",
      width: '100px'
    }, {
      key: 6,
      title: '回调方法',
      dataIndex: 'callback',
      align: "center",
      width: '100px'
    }, {
      key: 7,
      title: '提示信息',
      dataIndex: 'placeholder',
      align: "center",
      width: '150px',
    }, {
      key: 8,
      title: '输入域描述',
      dataIndex: 'doubt',
      align: "center",
      width: '150px',
    }, {
      key: 9,
      title: '关联类',
      dataIndex: 'className',
      align: "center",
      width: '100px'
    }, {
      key: 10,
      title: '关联方法',
      dataIndex: 'methodName',
      align: "center",
      width: '100px'
    }, {
      key: 11,
      title: '关联取值',
      dataIndex: 'linkValueDesc',
      align: "center",
      width: '100px'
    }, {
      key: 12,
      title: '取值接口代码',
      dataIndex: 'linkCode',
      align: "center",
      width: '150px'
    }, {
      key: 13,
      title: '占位',
      dataIndex: 'col',
      align: "center",
      width: '100px'
    }, {
      key: 14,
      title: '跳转到',
      dataIndex: 'jumpDesc',
      align: "center",
      width: '100px'
    }, {
      key: 15,
      title: '默认值',
      dataIndex: 'default',
      align: "center",
      width: '150px'
    }, {
      key: 16,
      title: 'labelCol',
      dataIndex: 'labelCol',
      align: "center",
      width: '100px'
    }, {
      key: 17,
      title: 'wrapperCol',
      dataIndex: 'wrapperCol',
      align: "center",
      width: '100px'
    }, {
      key: 18,
      title: '是否必填',
      dataIndex: 'required',
      align: "center",
      width: '80px',
    }, {
      key: 19,
      title: '是否只读',
      dataIndex: 'disabled',
      align: "center",
      width: '80px',
    }, {
      key: 20,
      title: '是否显示',
      dataIndex: 'display',
      align: "center",
      width: '80px',
    }];
    formColumns = formColumns.map(item => {
      return {
        ...item,
        render: (text, record) => {
          if (item.dataIndex === 'required' || item.dataIndex === 'disabled' || item.dataIndex === 'display') {
            let config = {
              'Y': '是',
              'N': '否'
            }
            return config[text];
          } else {
            return (
              <Tooltip title={text}>
                <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
              </Tooltip>
            )
          }
        }
      }
    })
    this.setState({ formColumns });
  }

  // 获取form表单form数据
  getFormFormData = () => {
    let formFormData = [{
      dataIndex: 'code',
      title: '代码',
      typeCode: 'Input',
      required: 'Y',
      doubt: '表单保存时对应传给后台的字段（dataIndex）'
    }, {
      dataIndex: 'descripts',
      title: '描述',
      typeCode: 'Input',
      required: 'Y',
      doubt: '表单对应的描述'
    }, {
      dataIndex: 'seqNo',
      title: '序号',
      typeCode: 'Input'
    }, {
      dataIndex: 'enDesc',
      title: '英文描述',
      typeCode: 'Input'
    }, {
      dataIndex: 'fieldTypeID',
      title: '字段类型',
      typeCode: 'Select',
      detailItem: [],
      defaultValue: '5'
    }, {
      dataIndex: 'callback',
      title: '回调方法',
      typeCode: 'Input'
    }, {
      dataIndex: 'placeholder',
      title: '提示信息',
      typeCode: 'Input',
      doubt: '操作框对应的placeholder'
    }, {
      dataIndex: 'doubt',
      title: '输入域描述',
      typeCode: 'Input',
      doubt: '问号图标对应鼠标移入展示的描述信息'
    }, {
      dataIndex: 'className',
      title: '关联类',
      typeCode: 'Input',
      doubt: '可维护成下拉框数据对应初始化接口的字段名；或下拉列表/远程搜索对应的接口代码；或维护成disabledDate，可以控制日期选择范围'
    }, {
      dataIndex: 'methodName',
      title: '关联方法',
      typeCode: 'Input',
      doubt: '可维护下拉列表请求接口对应的别名字段及远程搜索后台对应接收的ID字段；当className=disabledDate时可对应维护成 <，<=，>，>='
    }, {
      dataIndex: 'linkValueID',
      title: '关联取值',
      typeCode: 'Select',
      mode: 'multiple',
      detailItem: [],
      doubt: '下一个下拉框需要根据当前选择的值获取数据（比如选择省去获取市的数据）'
    }, {
      dataIndex: 'linkCode',
      title: '取值接口代码',
      typeCode: 'Input',
      doubt: '关联取值对应的接口代码/为远程搜索时需维护成数据查询接口后台接收字段（入：desc）'
    }, {
      dataIndex: 'col',
      title: '占位',
      typeCode: 'Input',
      defaultValue: 12,
      doubt: '一行24份，独占一行则维护24，一行两个则维护12，以此类推'
    }, {
      dataIndex: 'jumpID',
      title: '跳转到',
      typeCode: 'Select',
      doubt: '回车后希望跳转到哪一个输入域？？？跳转到下一个可不用维护，默认下一个。'
    }, {
      dataIndex: 'labelCol',
      title: 'labelCol',
      typeCode: 'Input',
      defaultValue: 8,
      doubt: 'label对应的份数（共24份）'
    }, {
      dataIndex: 'wrapperCol',
      title: 'wrapperCol',
      typeCode: 'Input',
      defaultValue: 16,
      doubt: '操作框对应的份数（共24份）小技巧分享：希望买个formItem存在间隙的话wrapperCol可以少占一份'
    }, {
      dataIndex: 'default',
      title: '默认值',
      typeCode: 'Input',
      doubt: '日期组件可以维护1/2/3，默认第前几天(0是当前)，Switch可以维护Y/N'
    }, {
      dataIndex: 'required',
      title: '是否必填',
      typeCode: 'Switch'
    }, {
      dataIndex: 'disabled',
      title: '是否只读',
      typeCode: 'Switch'
    }, {
      dataIndex: 'display',
      title: '是否显示',
      typeCode: 'Switch',
      defaultValue: 'Y'
    }];
    this.setState({ formFormData })
  }

  // 获取操作按钮表头数据
  getBtnColumns = () => {
    let btnColumns = [{
      key: 1,
      title: '描述',
      dataIndex: 'title',
      align: "center",
      width: '100px'
    }, {
      key: 2,
      title: '图标',
      dataIndex: 'icon',
      align: "center",
      width: '100px'
    }, {
      key: 3,
      title: '点击事件',
      dataIndex: 'onClick',
      align: "center",
      width: '100px'
    }, {
      key: 4,
      title: '类型',
      dataIndex: 'typeDesc',
      align: "center",
      width: '100px'
    }, {
      key: 5,
      title: '按钮大小',
      dataIndex: 'sizeDesc',
      align: "center",
      width: '100px'
    }, {
      key: 6,
      title: '按钮形状',
      dataIndex: 'shapeDesc',
      align: "center",
      width: '150px'
    }, {
      key: 7,
      title: '跳转地址',
      dataIndex: 'href',
      align: "center",
      width: '100px'
    }, {
      key: 8,
      title: 'target属性',
      dataIndex: 'target',
      align: "center",
      width: '100px'
    }, {
      key: 9,
      title: '背景透明',
      dataIndex: 'ghost',
      align: "center",
      width: '100px',
      render(text) {
        let config = {
          'Y': '是',
          'N': '否'
        }
        return config[text];
      }
    }, {
      key: 10,
      title: '宽度自适应',
      dataIndex: 'block',
      align: "center",
      width: '100px',
      render(text) {
        let config = {
          'Y': '是',
          'N': '否'
        }
        return config[text];
      }
    }];
    this.setState({ btnColumns });
  }

  // 获取操作按钮form数据
  getBtnFormData = () => {
    let btnFormData = [{
      dataIndex: 'title',
      title: '描述',
      typeCode: 'Input',
      required: 'Y'
    }, {
      dataIndex: 'icon',
      title: '图标',
      typeCode: 'Input',
      placeholder: '对应antd/Icon组件名称',
      doubt: '设置按钮的图标类型'
    }, {
      dataIndex: 'onClick',
      title: '点击事件',
      typeCode: 'Input',
      doubt: '点击按钮时的回调'
    }, {
      dataIndex: 'typeID',
      title: '类型',
      typeCode: 'Select',
      doubt: '设置按钮类型，可选值为 primary dashed danger link(3.17 中增加) 或者不设，默认为default'
    }, {
      dataIndex: 'sizeID',
      title: '按钮大小',
      typeCode: 'Select',
      doubt: '设置按钮大小，可选值为 small large 或者不设'
    }, {
      dataIndex: 'shapeID',
      title: '按钮形状',
      typeCode: 'Select',
      doubt: '设置按钮形状，可选值为 circle、 round 或者不设'
    }, {
      dataIndex: 'href',
      title: '跳转地址',
      typeCode: 'Input',
      doubt: '点击跳转的地址，指定此属性 button 的行为和 a 链接一致'
    }, {
      dataIndex: 'target',
      title: 'target 属性',
      typeCode: 'Input',
      doubt: '相当于 a 链接的 target 属性，href 存在时生效'
    }, {
      dataIndex: 'ghost',
      title: '背景透明',
      typeCode: 'Switch',
      doubt: '幽灵属性，使按钮背景透明'
    }, {
      dataIndex: 'block',
      title: '宽度自适应',
      typeCode: 'Switch',
      doubt: '将按钮宽度调整为其父宽度的选项'
    }];
    this.setState({ btnFormData })
  }

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

  render() {
    let { alias, statusID, tableData, columns, total, page, tableWidth, loading, activeTabPaneKey, rowID, rowData, componentColumns, languageColumns, componentFormData,
      languageFormData, componentTableWidth, languageTableWidth, formData, formColumns, formFormData, formTableWidth, btnColumns, btnFormData, btnTableWidth, selectData
    } = this.state;

    // 组件所需参数
    let param = {
      page, // 当前页数
      total, // 数据总条数
      loading,
      pageSize: '20',
      x: tableWidth, // 表格的宽度
      data: tableData, // 表格数据
      componentName: 'ComponentDataMaintenance',
      y: store.getState().tableHeight.y + 22,
      height: store.getState().tableHeight.y + 72 + 'px',
      // 表头配置
      columns: columns && columns.length > 0 ? columns : this.staticColumns,
    }
    return (
      <div className="component-data-maintenance">
        <Row className="common-query-header">
          <Col span={16}>
            <div>
              代码/描述：<Input
                value={alias}
                className="common-query-input"
                title="输入内容后可回车检索"
                placeholder="请输入( Enter )"
                style={{ width: '260px' }}
                onPressEnter={this.handleQuery}
                onChange={Util.commonInputChange.bind(this, 'alias')}
              />
              状态：<Select
                showSearch
                value={statusID}
                placeholder="请选择"
                optionFilterProp="search"
                className="common-query-input"
                onChange={Util.handleSelectChange.bind(this, 'statusID')}
              >
                <Option value="">全部</Option>
                <Option value="Y">可用</Option>
                <Option value="N">不可用</Option>
              </Select>
              <Button onClick={this.handleQuery}>查询</Button>
            </div>
          </Col>
          <Col span={8} className="flex-end-align-center" style={{ height: '100%' }}>
            <Button
              ghost
              type="primary"
              style={{ width: '100px', display: 'none' }}
              onClick={this.handleDataImport}
            >
              数据导入
            </Button>
          </Col>
        </Row>
        <div className="common-query-split-line" style={{ height: 8 }}></div>
        <Row>
          <Col span={10}>
            <div className="table-body-height" style={{ paddingRight: '8px', position: 'relative' }}>
              <Card
                size="small"
                bordered={false}
                title={<div className="common-card-title-img">
                  <img src={iconListVisits} alt="" />
                  组件信息
                </div>}
              >
                <PublicTablePagination
                  param={param}
                  compilePage={this.compilePage}
                  getColumns={this.getColumnsData}
                  onClickRowPublic={this.onClickRowPublic}
                  setRowClassNamePublic={this.setRowClassNamePublic}
                />
              </Card>
              <div className='common-card-right-split-line' style={{ width: 8 }}></div>
            </div>
          </Col>
          <Col span={14} className="card-container">
            <Tabs activeKey={activeTabPaneKey} onChange={this.toggleTabPane} type="card">
              <TabPane tab="基本信息" key="baseInfo">
                <div style={{ padding: '12px', height: store.getState().tableHeight.y + 124 + 'px', overflow: 'auto' }}>
                  <DynamicRenderingForm
                    onRef={ref => this.formRef = ref}
                    formItemCol={{ labelCol: 3, wrapperCol: 12, col: 24 }}
                    rowData={rowData}
                    formData={formData}
                  />
                  <Row>
                    <Col span={12} className="flex-center">
                      <Button style={{ marginRight: '24px' }} onClick={this.resetFields}>{rowID ? '取消修改' : '重置'}</Button>
                      <Button type='primary' onClick={this.handleSave}>{rowID ? '确认修改' : '保存'}</Button>
                    </Col>
                  </Row>
                </div>
              </TabPane>
              <TabPane tab="Table列维护" key="table">
                <div style={{ padding: '12px', paddingBottom: 0, height: store.getState().tableHeight.y + 124 + 'px', overflow: 'auto' }}>
                  <CDMComponentMaintenance
                    authorizeFlag="Y"
                    saveCode="01040273"
                    deleteCode="01040274"
                    queryCode="01040275"
                    className="User.CBReactComTable"
                    componentTitle="组件表列按钮维护"
                    componentID={rowID}
                    selectData={selectData}
                    columns={componentColumns}
                    formData={componentFormData}
                    activeKey={activeTabPaneKey}
                    tableWidth={componentTableWidth}
                  />
                </div>
              </TabPane>
              <TabPane tab="国际化数据维护" key="field">
                <div style={{ padding: '12px', paddingBottom: 0, height: store.getState().tableHeight.y + 124 + 'px', overflow: 'auto' }}>
                  <CDMComponentMaintenance
                    saveCode="01040276"
                    deleteCode="01040277"
                    queryCode="01040278"
                    selectData={selectData}
                    componentTitle="国际化数据维护"
                    componentID={rowID}
                    columns={languageColumns}
                    formData={languageFormData}
                    activeKey={activeTabPaneKey}
                    tableWidth={languageTableWidth}
                  />
                </div>
              </TabPane>
              <TabPane tab="表单数据维护" key="form">
                <div style={{ padding: '12px', paddingBottom: 0, height: store.getState().tableHeight.y + 124 + 'px', overflow: 'auto' }}>
                  <CDMComponentMaintenance
                    saveCode="01040279"
                    className="User.CBReactForm"
                    deleteCode="01040289"
                    queryCode="01040280"
                    selectData={selectData}
                    componentTitle="Form表单数据维护"
                    componentID={rowID}
                    columns={formColumns}
                    formData={formFormData}
                    tableWidth={formTableWidth}
                    activeKey={activeTabPaneKey}
                  />
                </div>
              </TabPane>
              <TabPane tab="操作按钮维护" key="button">
                <div style={{ padding: '12px', paddingBottom: 0, height: store.getState().tableHeight.y + 124 + 'px', overflow: 'auto' }}>
                  <CDMComponentMaintenance
                    saveCode="01040281"
                    deleteCode="01040282"
                    queryCode="01040283"
                    selectData={selectData}
                    componentTitle="操作按钮维护"
                    componentID={rowID}
                    columns={btnColumns}
                    formData={btnFormData}
                    tableWidth={btnTableWidth}
                    activeKey={activeTabPaneKey}
                  />
                </div>
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </div>
    )
  }
};

export default ComponentDataMaintenance;