import React, { Fragment } from 'react';
import { Divider, message, Modal, Popconfirm } from 'antd';
import moment from 'moment';
import ExportInfo from '../Export/index';
import { date, getFormArrayConfig } from '../config/index';
import { handleColumns } from '../AffairPage/destruction';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '../Shell';
import FormArray from '../AffairPage/component/FormArray';
import Edit from '../Edit/index';
import ImportUtil from '../ImportUtil/ImportUtil';
import SearchDom from '@/highOrderComponent/SearchDom';
import StandardTable from '@/components/StandardTable';
import { getHead, fetchData, deleteItem, add, getDetailId } from './services';
import router from 'umi/router';


const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const CreateForm = props => {
  const {
    modalVisible,
    handleAdd,
    formData,
    isAdd,
    handleModalVisible,
    formItem,
    changeFormData,
  } = props;

  // 通过回调
  const okHandle = () => {
    handleAdd({}, isAdd);
  };
  // 需要获取动态表单
  return (
    <Modal
      width="1000px"
      maskClosable={false}
      destroyOnClose
      title={isAdd ? '新增' : '编辑'}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormArray
        config={getFormArrayConfig(formItem)}
        value={formData}
        fileSpan={{ big: 2, small: 2 }}
        changeValue={changeFormData}
      />
      <div style={{ clear: 'both' }}/>
    </Modal>
  );
};

class FormList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalVisible: false,
      formData: null,
      formItem: [],
      searchConfig: [],
      formValues: {},
      isAdd: false,
      selectedRows: [],
      primaryKey: null,
      showEdit: false,
      pageData: {
        list: [],
        pagination: {},
      },
    };
    this.columns = [];
  }


  // 渲染值
  componentDidMount() {
    this.getTableHead();
  }

  getTableHead = () => {
    const { objId, Authority, handleColumnsDiy } = this.props;
    getHead({ dataObjId: objId }, datas => {
      if (!datas) return;
      let findPrimaryKey = datas.find((x) => {
        return x.isPrimaryKey === true;
      });
      if (findPrimaryKey) {
        this.setState({
          primaryKey: findPrimaryKey.name,
        });
      } else {
        console.error('没有数据主键,无法执行删除操作');
      }
      datas = datas.filter((x) => {
        return x.isHidden !== true;
      });
      for (let item of datas) {
        item.extendType = item.extendTypeId;
        item.dataIndex = item.name;
        item.dataType = item.type;
      }
      datas = handleColumns(datas);
      if (handleColumnsDiy) {
        datas = handleColumnsDiy(datas);
      }
      if (Authority && Authority.auditDetail) {  //流程审核详情 和 编辑,查看 不能 同时存在.
        datas.push(
          {
            dataIndex: 'auditProcessDetail',
            title: '审核详情',
            fixed: datas.length > 12 ? 'right' : false,
            render: (text, record) => {
              return (<a onClick={() => {
                this.getIdByCode(record.process_biz_key);
              }}>
                流程审核详情
              </a>);
              /*return (<Link to={
                {
                  pathname: './Detail',
                  state: {
                    record: {
                      id: record.process_biz_key,
                    },
                  },
                }}>
                详情
              </Link>);*/
            },
          },
        );
      }

      this.columns = datas;
      this.setState({ formItem: datas });
      let searchConfig = [];
      for (let item of datas) {
        if (item.isShowQuery) {
          let sear = getFormArrayConfig([item]);
          if (!Array.isArray(sear)) {
            return false;
          }
          delete sear[0].required;
          delete sear[0].placeHolder;
          searchConfig.push(sear[0]);
        }
      }
      this.setState({
        searchConfig,
      });
      if (Authority && Authority.edit) {  //编辑功能
        datas.push(
          {
            dataIndex: 'operationEdit',
            title: '编辑',
            fixed: 'right',
            width: 60,
            render: (text, record) => {
              return (
                <a onClick={this.modify.bind(this, record)}>
                  编辑
                </a>);
            },
          },
        );
      }
      this.getPage();
    });
  };

  getIdByCode = (code) => {
    getDetailId({ code }, res => {
      router.push({
        pathname: './Detail',
        state: {
          record: { id: res.id },
        },
      });
    });
  };

  modify = record => {
    const { formItem } = this.state;
    if (formItem.length < 10 || true) {
      this.setState({
        formData: { ...record },
        modalVisible: true,
        isAdd: false,
      });
    } else {
      this.setState({
        formData: { ...record },
        showEdit: true,
      });
    }
  };

  delete = record => {
    const { objId } = this.props;
    // 找出主键
    const { primaryKey } = this.state;
    const Keys = {};
    Keys[primaryKey] = record[primaryKey];
    deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
      this.getPage();
    });
  };

  changeFormData = (value, key) => {
    this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } }));
  };

  getPage = (params, values) => {
    const { objId } = this.props;
    const { formValues, pageData: pagination } = this.state;
    if (params == null) {
      params = {
        pageNo: pagination.current ? pagination.current : 1,
        pageSize: pagination.pageSize ? pagination.pageSize : 10,
        ...values,
      };
    }
    params = {
      ...params,
      query: JSON.stringify(formValues),
    };
    fetchData({ ...params, dataObjId: objId }, res => {
      if (!res.rows) {
        console.error('分页接口rows返回null报错');
      }
      this.setState({
        pageData: {
          list: res.rows,
          pagination: {
            current: res.pageNo,
            pageSize: res.pageSize,
            total: Number(res.total),
          },
        },
      });
    });
  };

  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,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    this.getPage(params);
  };

  handleAdd = (fields, isAdd) => {
    const { formData } = this.state;
    const { objId } = this.props;
    add({ params: formData, objId, isAdd }, () => {
      message.success('操作成功');
      this.setState({
        modalVisible: false,
      });
      this.getPage();
    });
  };

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

  add = () => {
    const { formItem } = this.state;
    if (formItem.length < 10 || true) {
      this.setState({
        modalVisible: true,
        formData: {},
        isAdd: true,
      });
    } else {
      this.setState({
        formData: {},
        showEdit: true,
        isAdd: true,
      });
    }
  };

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

  batchDelete = (e) => {
    const { objId } = this.props;
    const { selectedRows, formItem } = this.state;
    if (!selectedRows || selectedRows.length < 1) {
      message.warning('请选择您要删除的数据');
      return false;
    }
    // 找出主键
    const { primaryKey } = this.state;
    let Keys = selectedRows.map((x) => {
      return x[primaryKey];
    });
    deleteItem({
      keys: JSON.stringify({ [primaryKey]: Keys.join(',') }),
      objId,
      //  isSelf: true,
    }, () => {
      this.setState({
        selectedRows: [],
      });
      this.getPage();
    });
  };

  goBack = () => {
    router.goBack();
  };

  formStateChange = (value, key) => {
    this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } }));
  };

  resetFormValues = () => {
    this.setState({
      formValues: {},
    });
  };

  render() {
    const {
      modalVisible, selectedRows, formItem, isAdd,
      pageData, showEdit, formData, primaryKey,
      formValues, searchConfig,
    } = this.state;
    const { objId, Authority } = this.props;
    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      formData,
      formItem,
      isAdd,
      changeFormData: this.changeFormData,
    };
    return (
      <>
        {showEdit ? (
          <Edit
            id={objId}
            recordId={formData[primaryKey]}
            recordKey={primaryKey}
            returnThis={() => {
              this.setState({
                showEdit: false,
              });
              this.getPage();
            }}
          />
        ) : (
          <Fragment>
            {searchConfig.length > 0 ? (
              <SearchDom
                formStateChange={this.formStateChange}
                formValues={formValues}
                getPage={this.getPage}
                resetFormValues={this.resetFormValues}
                config={{ condition: searchConfig, fromTab: true }}
              />
            ) : null}
            <Shell styleShell={searchConfig.length > 0 ? {} : { marginTop: 0 }}>
              <div style={{
                paddingLeft: '10px',
                paddingTop: '10px',
              }}
              >
                {
                  Authority && Authority.add === false ? null :
                    <ButtonDiy icon="plus"
                               className="primaryBlue"
                               handleClick={this.add}
                               name="新建"/>
                }
                {
                  Authority && Authority.delete === false ? null :
                    <ButtonDiy handleClick={this.batchDelete}
                               name="批量删除"/>
                }
                {
                  Authority && Authority.exportUtil === false ? null :
                    <ExportInfo objId={objId}/>
                }
                {
                  Authority && Authority.importUtil === false ? null :
                    <ImportUtil objId={objId}
                                callback={this.getPage}
                    />
                }

              </div>
              <StandardTable
                rowKey={primaryKey}
                data={pageData}
                scroll={{ x: true }}
                columns={this.columns}
                selectedRows={selectedRows}
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
              />
            </Shell>
          </Fragment>
        )}

        <CreateForm {...parentMethods} modalVisible={modalVisible}/>
      </>
    );
  }
}

export default FormList;
