import React, { Fragment } from 'react';
import {
  Button,
  Card,
  DatePicker,
  Divider,
  Table,
  Form,
  Row,
  Col,
  Input,
  InputNumber,
  message,
  Modal,
  Select,
  Popconfirm,
  Tooltip,
  Spin
} from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from './PageHeaderWrapper';
import styles from './TableList.less';
import StandardTable from './StandardTable';
import moment from 'moment';
import router from 'umi/router';
import ExportInfo from '../../App/ExportInfo';
import ExportCurrentInfo from '../../App/ExportCurrentInfo';

import StatisticsInfo from '../../App/StatisticsInfo';
import ImportUtil from '../../App/ImportUtil';
import SearchInfo from '../../App/SearchInfo';
import {Base16Encode} from "../../Base16/index";
import baseX from 'base-x'
import {isEmpty} from 'lodash'
const BASE16 = '0123456789abcdef'
const bs16 = baseX(BASE16)
const FormItem = Form.Item;
let AllWidth = 0; // 表格总长度
const { RangePicker } = DatePicker;
const text = [
  'BINARY',
  'BIT',
  'BLOB',
  'CHAR',
  'GEOMETRY',
  'GEOMETRYCOLLECTION',
  'JSON',
  'LINESTRING',
  'LONGBLOB',
  'LONGTEXT',
  'MEDIUMBLOB',
  'MEDIUMINT',
  'MEDIUMTEXT',
  'MULTILINESTRING',
  'MULTIPOINT',
  'MULTIPOLYGON',
  'POINT',
  'POLYGON',
  'REAL',
  'DECIMAL',
  'ENUM',
  'SET',
  'TEXT',
  'TINYBLOB',
  'TIBYTEXT',
  'VARBINARY',
  'VARCHAR',
];
const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT'];
const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR'];

const CreateForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    handleAdd,
    formLoading,
    formData,
    isAdd,
    handleModalVisible,
    formItem,
    getItem,
    isView
  } = props;

  //通过回调
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(isView){
        handleModalVisible();
        return;
      }
      formItem.map((item, index) => {
        if (item.type.indexOf('DATE') > -1) {
          for (let d in fieldsValue) {
            if (item.name === d&&fieldsValue[d]) {
              fieldsValue[d] = fieldsValue[d].format('YYYY-MM-DD HH:mm:ss');
            }
          }
        }
      });
      let params = { ...fieldsValue };
      handleAdd(params, isAdd);
    });
  };
  console.log("isView",isView)
  //需要获取动态表单
  return (
    <Modal
      width="700px"
      maskClosable={false}
      destroyOnClose
      title={isView?"查看详情":(isAdd ? '新增' : '编辑')}
      visible={modalVisible}
      footer={isView?null:[
        <Button key="back" onClick={() => handleModalVisible()}>
          取消
        </Button>,
        <Button key="submit" type="primary"  onClick={okHandle}>
          确定
        </Button>
      ]}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      {formItem.map((item, index) => getItem(false,form, item, isAdd, formData, { span: 5 }, { span: 15 }))}


    </Modal>
  );
});

@connect(({ formList, loading }) => ({
  formList,  loading: loading.models.formList,
}))
@Form.create()
class FormList extends React.Component {
  state = {
    data: {
      list: [],
      pagination: {},
    },
    selects:[],
    modalVisible: false,
    formData: null,
    formValues: {},
    formItem: [],
    objId: this.props.objId || (this.props.location?this.props.location.state.id:null),
    isAdd: false,
    querys: [],
    selectedRows: [],
    primaryKey: null,
    options: {},
    isTable: true,
    tableWidth:500,
    rights:this.props.rights||[],
    columnRights:[],
    isReady:false,
    groups:{},
    showDiv:'',
    showMobileDiv:'',
    isView:false
  };

  columns = [];
  getOptions = () => {
    const refIds = []
    for (var i = 0; i < this.state.formItem.length; i++) {

      if (this.state.formItem[i].referenceObjId != null && this.state.options[this.state.formItem[i].id + ''] == null) {
        refIds.push(datas[t].id)
      }

    }

    if (refIds.length > 0) {
      dispatch({
        type: 'formList/getBatchOptions',
        payload: { ids: refIds },
        callback: (options) => {

          this.setState({ options: { ...this.state.options, ...options } })
        }
      });
    }
  }
  modify = record => {
  //  if (this.state.formItem.length < 10) {
      this.getOptions()
      this.setState({
        formData: record,
        modalVisible: true,
        isAdd: false,
        isView:false
      });
    // } else {
    //   router.push({
    //     pathname: '/admin/ddl/dataObj/formEdit',
    //     state: {
    //       id: this.state.objId,
    //       recordId: record[this.state.primaryKey],
    //       recordKey: this.state.primaryKey,
    //       isAdd: false,
    //       isView:false
    //     },
    //   });
    // }
  };


  view = record => {
   // if (this.state.formItem.length < 10) {
      this.getOptions()
      this.setState({
        formData: record,
        modalVisible: true,
        isAdd: false,
        isView:true
      });
    // } else {
    //   router.push({
    //     pathname: '/admin/ddl/dataObj/formEdit',
    //     state: {
    //       id: this.state.objId,
    //       recordId: record[this.state.primaryKey],
    //       recordKey: this.state.primaryKey,
    //       isAdd: false,
    //       isView:true
    //     },
    //   });
    // }
  };

  delete = record => {
    //找出主键
    let Keys = {};
    Keys[this.state.primaryKey] = record[this.state.primaryKey];
    this.props.dispatch({
      type: 'formList/delete',
      payload: {
        keys: JSON.stringify(Keys),
        objId: this.state.objId
      },
      callback: () => {
        this.getPage();
      },
    });
  };

  viewProcess = record => {
    const {dispatch}= this.props;
    dispatch({
      type: 'formList/getAppId',
      payload: {
        code: record.process_biz_key,
      },
      callback: (data) => {
        router.push({pathname: '/portal/serviceCentre/getdetail',state: {id:data.id}})
      },
    });
  };

  /**
   * 宽度自适应函数
   */
  resize = (e) => {
    let scrollWidth  = document.documentElement.clientWidth || document.body.clientWidth;  //可使宽度
    let showMobileDiv = scrollWidth-77
    if(document.querySelector('#previewDiv')){ // 预览模式
      this.setState({
        showMobileDiv:document.querySelector('#previewDiv').clientWidth-77
      })
    } else {
      this.setState({
        showMobileDiv,
      })
    }
  }
  //渲染值
  componentDidMount() {
    const { dispatch, isFormCom, isSelect, callback,  valueName } = this.props;
    window.addEventListener('resize', this.resize);
    if(this.props.objCode){
      const { dispatch, objCode,sql} = this.props;

      if(objCode==1||objCode=="1"){
        this.initColumn();
      }else{
        dispatch({
          type: 'DataObj/findByCode',
          payload: { objCode:this.props.objCode },
          callback: dataObj => {
            this.setState({ objId: dataObj.id ,isTable: data.isTable},()=>{

              dispatch({
                type: 'DataRight/getUserRight',
                payload: { objId: this.state.objId },
                callback: data => {
                  if(!this.props.rights){
                    this.setState({ rights: data });
                  }
                  dispatch({
                    type: 'DataRight/getUserColumnRight',
                    payload: { objId: this.state.objId },
                    callback: data => {

                      this.setState({ columnRights: data });
                      this.initColumn();
                    }
                  });
                }
              });

            });
          },
        });
      }

    }else{
      dispatch({
        type: 'formList/getObjDetail',
        payload: { id: this.state.objId },
        callback: data => {
          this.setState({ isTable: data.isTable });
        }
      });
      dispatch({
        type: 'DataRight/getUserRight',
        payload: { objId: this.state.objId },
        callback: data => {
          if(!this.props.rights){
            this.setState({ rights: data });
          }
          dispatch({
            type: 'DataRight/getUserColumnRight',
            payload: { objId: this.state.objId },
            callback: data => {
              this.setState({ columnRights: data });
              this.initColumn();
            }
          });
        }
      });

    }



  }
  /**
   * 移除监听器
   */
  componentWillUnmount(){
    window.removeEventListener('resize',this.resize);
  }
  custom=this.props.value?Base16Encode(JSON.stringify(this.props.value)):null
  componentWillReceiveProps(nextProps){

    const b = nextProps.value||{}
    const a = this.props.value||{}

    if(JSON.stringify(a)!=JSON.stringify(b)){
     const   params = {
        pageNo: 1,
        pageSize: this.props.pageSize||10,
        query: JSON.stringify(this.state.formValues),
      };
      this.custom=Base16Encode(JSON.stringify(b))

      if(this.state.objId)this.getPage(params)


    }
    if(this.props.objCode=="1"||this.props.objCode==1){
      const   params = {
        pageNo: 1,
        pageSize: this.props.pageSize||10,
        query: JSON.stringify(this.state.formValues),
      };
      this.columns=nextProps.value.columns
      if( nextProps.value.getPage){
        this.getPage(params,null,nextProps.value.getPage);
      }
    }
    const x=nextProps.selects
    const y = this.props.selects
    if(JSON.stringify(x)!=JSON.stringify(y)){

      this.setState({selects:x})
    }


  }
  initColumn = () =>{

    const { dispatch, isFormCom, isSelect, callback,  valueName } = this.props;

    const {rights,columnRights} = this.state;
    if(this.props.value&&this.props.value.columns){
      this.columns=this.props.value.columns
      this.getPage();
      return
    }
    if(this.props.objCode==1||this.props.objCode=="1"){

    }else{
      dispatch({
        type: 'formList/getHead',
        payload: { dataObjId: this.state.objId },
        callback: datas => {
          const querys = []
          const refIds = []
          const groups ={};
          if (datas) {
            this.state.formItem = datas;
            let i = 0;

            for (let t in datas) {
              if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
              if(datas[t].isHidden){
                continue
              }
              let column = {};
              column.title = datas[t].title;
              column.dataIndex = datas[t].name;
              column.width = datas[t].width;
              if(i==0) column.fixed='left';

              if(columnRights.length>0&&!columnRights.includes(datas[t].id)){
                 continue;
              }
              if (data.includes(datas[t].type)) {
                column.render =( val) =>{
                  if(val == null){
                    return val;
                  }
                  if(datas[t].dataFormatStrWeb!=null){
                    return  moment(val).format(datas[t].dataFormatStrWeb);
                  }else {
                    return moment(val).format('YYYY-MM-DD HH:mm:ss');
                  }
                }
              }else if(datas[t].name.indexOf("process_status")>-1){
                column.render=(val)=>val?(val==="0"?"审核通过":"审核未通过"):null
              }else {
                column.render=(val)=>val&&val.length>100?  <Tooltip title={val} overlayStyle={{width:1000}}>
                  <span style={{width:column.width||200,display:"block", wordBreak:"keep-all",whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{val}</span>
                </Tooltip>:val
              }

              this.setState({tableWidth:((datas.length-1)*200)})
              this.columns.push(column);


              if (datas[t].isShowQuery) {
                querys.push(datas[t])
                if (datas[t].referenceObjId != null) {
                  refIds.push(datas[t].id)
                }
                if(datas[t].isGroupQuery!=null){
                  dispatch({
                    type: 'formList/getGroupList',
                    payload: { columnId: datas[t].id },
                    callback: (gourp) => {
                      groups[datas[t].id] = gourp;
                      this.setState({ groups })
                    }
                  });
                }
              }
              i++;
            }
            if (querys.length > 0) {
              this.setState({ querys })
              if (refIds.length > 0) {
                dispatch({
                  type: 'formList/getBatchOptions',
                  payload: { ids: refIds },
                  callback: (options) => {
                    this.setState({ options })
                  }
                });
              }
            }




            this.getPage();

          }
        },
      });
    }


  }
 sqlBs16=Base16Encode(this.props.sql)
  getPage = (params, values,callPage) => {

    if(this.columns==null||this.columns.length==0){
      return;
    }
    const { dispatch } = this.props;
    const pagination = this.state.data.pagination;

    if (params == null) {
      params = {
        pageNo: pagination.current ? pagination.current : 1,
        pageSize: pagination.pageSize ? pagination.pageSize : (this.props.pageSize||10),
        query: JSON.stringify(values!=null?values:this.state.formValues),
      };
    }

    if(this.props.objCode&&(this.props.objCode=="1"||this.props.objCode==1)){
      if(callPage){
        callPage(params,(data)=>{
          if(!this.state.isReady){
            this.setState({data,isReady:true})
          }else{
            this.setState({data})
          }
        })
      }else if(this.props.value&&this.props.value.getPage){
        this.props.value.getPage(params,(data)=>{

          if(!this.state.isReady){
            this.setState({data,isReady:true})
          }else{
            this.setState({data})
          }
        })
      }

    }else{
      dispatch({
        type: 'formList/fetch',
        payload: {
          custom:this.custom,
          ...params,

          sql:this.sqlBs16,
          dataObjId: this.state.objId,
        },
        callback:(data)=>{
          if(!this.state.isReady){
            this.setState({data,isReady:true})
          }else{
            this.setState({data})
          }


        }
      });
    }

  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const filters = Object.keys(filtersArg)
      .reduce((obj, key) => {
        const newObj = { ...obj };
        newObj[key] = getValue(filtersArg[key]);
        return newObj;
      }, {});

    const params = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      ...filters,
      query: JSON.stringify(this.state.formValues),
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    this.getPage(params);
  };

  handleAdd = (fields, isAdd) => {
    let params = {
      ...fields,
    };
    this.props.dispatch({
      type: 'formList/add',
      payload: {
        params: params,
        objId: this.state.objId,
        isAdd: isAdd,
        isSelf: true,
        isView:false
      },
      callback: () => {
        message.success('操作成功');
        this.setState({
          modalVisible: false,
        });
        this.getPage();
      },
    });
  };

  handleModalVisible = () => {
    this.setState({
      modalVisible: this.state.modalVisible ? false : true,
      formData: {},
    });
  };

  add = () => {
   // if (this.state.formItem.length < 10) {
      this.getOptions()
      this.setState({
        modalVisible: true,
        formData: {},
        isAdd: true,
        isView:false
      });
    // } else {
    //   router.push({
    //     pathname: '/admin/ddl/dataObj/formEdit',
    //     state: { id: this.state.objId,isAdd: true,isView:false }
    //   });
    // }
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  batchDelete = e => {
    const { dispatch } = this.props;
    const { selectedRows } = this.state;

    if (!selectedRows) return;

    let columns = this.state.formItem;
    let Keys = {};

    for (let i in columns) {
      if (columns[i].isPrimaryKey) {
        //key
        Keys[columns[i].name] = selectedRows.map(row => row[columns[i].name])
          .join(',');
      }
    }
    this.props.dispatch({
      type: 'formList/delete',
      payload: {
        keys: JSON.stringify(Keys),
        objId: this.state.objId,
        isSelf: true
      },
      callback: () => {
        this.setState({
          selectedRows: [],
        });
        this.getPage();
      },
    });
  };

  goBack = () => {
    router.goBack();
  };
  handleSearch = (e) => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    const {formValues} = this.state;

    form.validateFields((err, fieldsValue) => {
      if (err) return;


      const formItem = this.state.formItem
      formItem.map((item, index) => {
        if (item.type.indexOf('DATE') > -1) {
          for (let d in fieldsValue) {
            if (item.name === d && fieldsValue[d]) {
              if(fieldsValue[d]!=null&&fieldsValue[d].length>0){
                fieldsValue[d]=[fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'),fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss')];
              }else {
                fieldsValue[d]="";
              }
            }
          }
        }
      });
      const values = {
        ...this.state.formValues,
        ...fieldsValue
      };
       this.setState({
         formValues: fieldsValue,
       });

      this.getPage(null, values)
    });
  }

  hanldeHighSearch=(e)=>{
    const pagination = this.props.formList.data.pagination;
    let params = {
      pageNo: pagination.current ? pagination.current : 1,
      pageSize: pagination.pageSize ? pagination.pageSize : (this.props.pageSize||10),
      ...e
    }
    this.setState({formValues:{...e,...this.state.formValues}})
    this.getPage(params)
  }
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    }, () => {
      this.getPage()
    });

  }
  getItem = (isQuery,form, item, isAdd, formData, labelCol, wrapperCol) => {
    const {groups} =this.state;
    if (item.isPrimaryKey) {
      if (isAdd) {
        return (<></>);
      } else {
        return (
          <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
            {form.getFieldDecorator(item.name, {
              initialValue: formData == null ? '' : formData[item.name],
              rules: [{ required: !item.isNull }],
            })(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入"/>)}
          </FormItem>
        );
      }
    } else if (item.referenceObjId != null) {
      const { options } = this.state
      const ops = options[item.id + ''] || []

      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<Select style={{ width: '70%' }} placeholder="请选择" allowClear>

            {ops.map((r) => <Option value={r[item.referenceCodeName]}
                                    key={r[item.referenceCodeName]}>{r[item.referenceNameName]}</Option>)}
          </Select>)}
        </FormItem>
      );
    }else if(item.name.indexOf("process_status")>-1){
      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<Select style={{ width: '70%' }} placeholder="请选择" allowClear>
                 <Option value={'0'} key={'0'}>审核通过</Option>
                 <Option value={'2'} key={'2'}>审核未通过</Option>
          </Select>)}
        </FormItem>
      );

    } else if(isQuery&&item.isGroupQuery!=null&&item.isGroupQuery){ //如果是查询 并且是组合查询

      const ops = groups[item.id + ''] || []
      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<Select style={{ width: '70%' }} placeholder="请选择" allowClear>
            {ops.map((r) => <Option value={r.value}
                                    key={r.value}>{r.value}</Option>)}
          </Select>)}
        </FormItem>
      );
    } else if (text.indexOf(item.type) > -1) {
      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<Input style={{ width: '70%' }} placeholder="请输入"/>)}
        </FormItem>
      );
    } else if (number.indexOf(item.type) > -1) {
      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<InputNumber placeholder="请输入" min={0}/>)}
        </FormItem>
      );
    } else if (isQuery&&data.indexOf(item.type) > -1) {

      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? null : moment(formData[item.name]),
            rules: [{ required: !item.isNull }],
          })(
            <RangePicker format={item.dataFormatStrWeb==null?"YYYY-MM-DD HH:mm:ss":item.dataFormatStrWeb}
                         style={{ width: '95%' }} />)}
        </FormItem>
      );
    }else if (data.indexOf(item.type) > -1) {

      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>

          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? moment() :(formData[item.name]?moment(formData[item.name]):null),
            rules: [{ required: !item.isNull }],
          })(
            <DatePicker
              format={item.dataFormatStrWeb==null?"YYYY-MM-DD HH:mm:ss":item.dataFormatStrWeb}
              style={{ width: '100%' }}
              placeholder="请输入"
            />,
          )}
        </FormItem>
      );
    } else {
      return (
        <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
          {form.getFieldDecorator(item.name, {
            initialValue: formData == null ? '' : formData[item.name],
            rules: [{ required: !item.isNull }],
          })(<Input style={{ width: '70%' }} placeholder="请输入"/>)}
        </FormItem>
      );
    }
  }

  renderForm() {
    const {
      form,
    } = this.props;
    const { querys } = this.state
    if (querys.length == 0) {
      return '';
    }

    return (
      <Form layout="inline">
        <Row >
          {querys.map((item) =>
            <Col style={{height:58}} span={8}  key={item.id}>
              {this.getItem(true,form, {
                ...item,
                isNull: true
              }, true)}
            </Col>
          )}

          <Col span={8} >
            <span className={styles.submitButtons}>
              <Button type="primary" loading={this.props.loading} onClick={this.handleSearch}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
              {/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <Icon type="down" />
              </a> */}
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  render() {
    const { modalVisible, selectedRows, querys,tableWidth,rights ,data,isReady} = this.state;

    if(!isReady){
      return <div style={{width:20,margin:"auto"}}><Spin/></div>
    }
    const {
      isFormCom,
      isSelect,

      callback,
      valueName,
      notShowBack,
      istableCom, // 是否有模板设计器调用
    } = this.props;
    const {
      showMobileDiv,
      isView
    } = this.state


    let scrollWidth  = document.documentElement.clientWidth || document.body.clientWidth;  //可使宽度
    let isMobile = scrollWidth < 1200
    if(document.querySelector('#previewDiv')){
      isMobile = true
    }
    let showDiv = document.querySelector('#mobelDiv')&&document.querySelector('#mobelDiv')?.parentNode.clientWidth
    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      formData: this.state.formData,
      formItem: this.state.formItem,
      isAdd: this.state.isAdd,
      getItem: this.getItem,
      isView:isView,
    };


    if(!isSelect&&!rights.includes('edit')&&!rights.includes('delete')&&!rights.includes("view")){
      const column = {
        title: '操作',
        fixed: 'right',
        width: 150,
        render: (text, record) => {
          return  <Fragment>
            <div >
              {record.process_biz_key?<><a onClick={this.view.bind(this, record)}>查看详情</a></>:''}
            </div>
          </Fragment>
        }
      }
      if(this.columns.length>0&&this.columns[this.columns.length-1].title=="操作"){
        this.columns[this.columns.length-1]=column;
      }
    }else{

      let width=0;
      if(rights && rights.includes('view')){
        width=width+75;
      }
      if(rights && rights.includes('edit')){
        width=width+40;
      }
      if(rights && rights.includes('delete')){
        width=width+40;
      }
      const column = {
        title: '操作',
        fixed: 'right',
        width: width,
        render: (text, record) => {
         return  <Fragment>
         <div style={{textAlign:'center'}}>
           {isSelect ? this.state.selects.includes(record[valueName]) ? <><span>已选择</span><Divider
             type="vertical"/></> : <><a
             onClick={callback.bind(this, record, this.columns)}>选择</a><Divider
             type="vertical"/></> : ''}
           {rights && !rights.includes('view') ? '' : <><a
             onClick={this.view.bind(this, record)}>查看详情</a><Divider type="vertical"/></>}
           {rights && !rights.includes('edit') ? '' : <><a
             onClick={this.modify.bind(this, record)}>编辑</a><Divider type="vertical"/></>}
           {record.process_biz_key?<><a onClick={this.viewProcess.bind(this, record)}>查看流程详情</a><Divider type="vertical"/></>:''}
           {rights && !rights.includes('delete') ? '' : <> <Popconfirm
             title="确定删除该数据?"
             onConfirm={this.delete.bind(this, record)}
             okText="确定"
             cancelText="取消"
           >
             <a>删除</a>
           </Popconfirm></>}
         </div>
       </Fragment>
        }


      }
      if(this.columns.length>0&&this.columns[this.columns.length-1].title=="操作"){
        this.columns[this.columns.length-1]=column;
      }else{
        this.columns.push(column);
      }

  }


    if(this.columns){
          /**
           * 计算总长度
           */
          AllWidth = 0
          this.columns = this.columns.map((item,index) => {
              if(isEmpty(item)){
                return item
              }
              if(index === this.columns.length-1&&this.columns[this.columns.length-1].title !== '操作'){
                AllWidth+=150
                item.width = ''
                return item
              }
              let width = item.width?item.width:150
              if(!item.width){
                item.width = 150
              }
              AllWidth += width
              return item
          })
          if(!isEmpty(this.columns[this.columns.length-1])
            &&this.columns[this.columns.length-1].title === '操作'
          ){
            this.columns[this.columns.length-2].width = ''
            AllWidth+=100
          }
    }
    const xxxx = <><Card bordered={false} bodyStyle={{padding:0}}>
      <div className={styles.tableList}>
        <div className={styles.tableListForm}>{this.renderForm()}</div>
        <div className={styles.tableListOperator}>
          {notShowBack ? notShowBack : <Button icon="rollback" type="primary" onClick={this.goBack}>
            返回
          </Button>}
          {rights && !rights.includes('add') ? '' :
            <Button icon="plus" type="primary" onClick={this.add}>
              新建
            </Button>}
            {rights && !rights.includes('searchData') ? '' :<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId = {this.state.objId}/>}

          {rights && !rights.includes('importData') ? '' : <ImportUtil objId={this.state.objId}/>}
          {rights && !rights.includes('exportCurrent') ? '' :  <ExportCurrentInfo objId={this.state.objId}
          query={JSON.stringify(this.state.formValues)}
          custom={this.props.value?Base16Encode(JSON.stringify(this.props.value)):null}
          sql={Base16Encode(this.props.sql)}
          />}
          {rights && !rights.includes('exportData') ? '' : <ExportInfo objId={this.state.objId}/>}
          {rights && !rights.includes('statistics') ? '' :
            <StatisticsInfo objId={this.state.objId}/>}
          {rights && !rights.includes('delete') ? '' : selectedRows.length > 0 && (
            <span>
             <Popconfirm
               title="确定删除该数据?"
               onConfirm={this.batchDelete}
               okText="确定"
               cancelText="取消"
             >
            <Button>批量删除</Button></Popconfirm>
          </span>
          )}
        </div>
        {
          (!istableCom)||(this.props.value&&this.props.value.columns)?
          <StandardTable
          showHeader={this.props.showHeader!=null?this.props.showHeader:true}
          noSelectRow={rights==null|| !rights.includes('delete') }
            rowKey="id"
            data={data}
            isHiddenPage={this.props.isHiddenPage!=null?this.props.isHiddenPage:false}
            columns={this.columns}
            scroll={this.props.value&&this.props.value.columns?{}:{ x: AllWidth }}
            selectedRows={selectedRows}
            onSelectRow={this.handleSelectRows}
            onChange={this.handleStandardTableChange}
            loading={this.props.loading}
          />
:
            <div
              id='mobelDiv'
              style={{
                overflow:'hidden',
                width: isMobile?showMobileDiv:showDiv,
                height: '100%'
              }}
              >
              <div
                >

                  {
                    showDiv&&<StandardTable
                    showHeader={this.props.showHeader!=null?this.props.showHeader:true}
                    noSelectRow={rights==null|| !rights.includes('delete') }
                    rowKey="id"
                    data={data}
                    columns={this.columns}
                    scroll={this.props.value&&this.props.value.columns?{}:{ x: AllWidth }}
                    selectedRows={selectedRows}
                    isHiddenPage={this.props.isHiddenPage!=null?this.props.isHiddenPage:false}
                    onSelectRow={this.handleSelectRows}
                    onChange={this.handleStandardTableChange}
                    loading={this.props.loading}
                  />
                  }

              </div>
            </div>


        }


      </div>
    </Card>
      <CreateForm {...parentMethods} modalVisible={modalVisible}/></>
    if (isFormCom) {
      return xxxx
    }
    return (
      <PageHeaderWrapper title="">
        {xxxx}
      </PageHeaderWrapper>
    );
  }
}

export default FormList;