import React from 'react';
import ExtendsComponent from '../ExtendsComponent';
import {
  Card,
  Spin,
  Form,
  Row,
  Col,
  Table,
  Button,
  Modal,
  Icon,
  Pagination
} from 'antd';
import QueryItem from './QueryItem';
import { get } from '../../utils/request';
import './styles.less';

class TableWithQuery extends ExtendsComponent {
  MODAL_CONFIG = {
    RENDER_MODAL: false,
    MODAL_TYPE_ENUMS: {},
    MODAL_PROPS: {}
  };
  COMPONENT_CLASSNAME = '';
  TABLE_CONFIG = {
    SHOW_PAGE_HEADER: true,
    PAGE_HEADER_PROPS: {},
    SHOW_CARD: false,
    SHOW_ROW_SELECTION: false,
    SHOW_PAGINATION: true,
    PAGINATION_PAGESIZE: 20,
    FETCH_CHECK_HANDLER: null,
    REQUEST_URL: null,
    QUERY_PARAMS_HANDLER: queryParams => queryParams,
    REQUEST_CALLBACK: resp => {
      if (resp && resp.code === 200) {
        const { list, total } = resp.data;
        this.updateStateData([
          {
            key: 'tableData',
            value: list
          },
          {
            key: 'pagination',
            path: 'total',
            value: total
          }
        ]);
      }
    },
    ROW_KEY: 'key',
    USE_FRONT_PAGINATION: false, // 是否前端分页
    COLUMNS: [],
    TABLE_PROPS: {},
    HEADER: '',
    FOOTER: ''
  };
  defaultQueryParams = null;
  state = {
    tableDataAll: [],
    selectedRowKeys: [],
    queryFilterArr: [],
    pagination: {
      current: 1,
      pageSize: this.TABLE_CONFIG.PAGINATION_PAGESIZE
    },
    queryParams: {},
    tableData: [],
    modalOption: {
      visible: false
    }
  };

  componentWillMount() {
    const { queryParams } = this.state;
    this.defaultQueryParams = JSON.parse(JSON.stringify(queryParams));
  }

  componentDidMount() {
    this.queryData();
  }

  handleReset = () => {
    this.setState(
      {
        queryParams: JSON.parse(JSON.stringify(this.defaultQueryParams))
      },
      () => {
        this.handleResetCallback();
        this.fetchData();
      }
    );
  };

  handleResetCallback = () => {};

  queryData = () => {
    this.updateStateData(
      [
        {
          key: 'pagination',
          path: 'current',
          value: 1
        },
        {
          key: 'pagination',
          path: 'pageSize',
          value: this.TABLE_CONFIG.PAGINATION_PAGESIZE
        }
      ],
      this.fetchData
    );
  };

  fetchData = () => {
    const { dispatch } = this.props;
    const {
      FETCH_CHECK_HANDLER,
      USE_FRONT_PAGINATION = false
    } = this.TABLE_CONFIG;
    let {
      pagination: { current = 1, pageSize = 20 } = {},
      queryParams,
      tableDataAll = []
    } = this.state;
    if (
      USE_FRONT_PAGINATION &&
      Array.isArray(tableDataAll) &&
      tableDataAll.length
    ) {
      let startIdx = (current - 1) * pageSize;
      let endIdx = current * pageSize;
      let visibleData = tableDataAll.slice(startIdx, endIdx);
      this.updateStateData([
        {
          key: 'tableData',
          value: visibleData
        },
        {
          key: 'pagination',
          path: 'total',
          value: tableDataAll.length
        }
      ]);
    } else {
      if (FETCH_CHECK_HANDLER && !FETCH_CHECK_HANDLER()) {
        this.updateStateData([
          {
            key: 'tableData',
            value: []
          },
          {
            key: 'pagination',
            path: 'total',
            value: 0
          }
        ]);
        return false;
      }
      const {
        REQUEST_URL,
        REQUEST_CALLBACK,
        QUERY_PARAMS_HANDLER
      } = this.TABLE_CONFIG;
      let queryParamsHandled = QUERY_PARAMS_HANDLER(queryParams);
      let params = {
        page: current,
        page_size: pageSize,
        ...queryParamsHandled
      };
      // console.log('fetchData', params);
      if (REQUEST_URL) {
        get(REQUEST_URL, params)
        .then(resp => {
          const { code } = resp;
          if(code === 200) {
            REQUEST_CALLBACK && REQUEST_CALLBACK(resp);
          }
        }).catch(() => {
          this.updateStateData([
            {
              key: 'tableData',
              value: []
            },
            {
              key: 'pagination',
              path: 'total',
              value: 0
            }
          ]);
        });
      }
    }
  };

  getTableColumns = () => {
    return null;
  };

  handleTableChange = pagination => {
    const { current, pageSize } = pagination;
    this.updateStateData(
      [
        {
          key: 'pagination',
          path: 'current',
          value: current
        },
        {
          key: 'pagination',
          path: 'pageSize',
          value: pageSize
        }
      ],
      this.fetchData
    );
  };

  handlePaginationChange = (page, pageSize) => {
    this.updateStateData(
      [
        {
          key: 'pagination',
          path: 'current',
          value: page
        },
        {
          key: 'pagination',
          path: 'pageSize',
          value: pageSize
        }
      ],
      this.fetchData
    );
  };

  tableRowSelection = () => {
    const { selectedRowKeys } = this.state;
    return {
      selectedRowKeys: selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys
        });
      }
    };
  };

  renderHeader = () => {
    return '';
  };

  renderTopContent = () => {
    return '';
  };

  handleModalShow = (mode, modalData = {}, modalProps = {}) => {
    const { width, ...otherOptions } =
      (this.MODAL_CONFIG.MODAL_TYPE_ENUMS || {}).EXTRA[mode] || {};

    this.MODAL_CONFIG.MODAL_PROPS = {
      ...this.MODAL_CONFIG.MODAL_PROPS,
      ...modalProps,
      width: width || 520
    };
    this.updateStateData([
      {
        key: 'modalOption',
        value: {
          visible: true,
          ...otherOptions,
          modalData
        }
      }
    ]);
  };

  renderModalContent = () => {
    return '';
  };

  dynamicModalProps = () => {
    return {};
  };

  handleCloseModal = cb => {
    this.updateStateData(
      [
        {
          key: 'modalOption',
          value: {
            title: '',
            visible: false,
            mode: -1,
            modalData: {}
          }
        }
      ],
      () => {
        cb && typeof cb === 'function' && cb();
      }
    );
  };

  handleModalConfirm = () => {
    console.log('handleModalConfirm', this.state.modalOption.modalData);
  };

  getRowColArr = (fieldsArr = []) => {
    // console.log('getRowColArr before', fieldsArr);
    let sum_span = 0;
    let colArr = fieldsArr.reduce((colArrTemp, item) => {
      const { span = 12 } = item;
      if (colArrTemp.length === 0) {
        colArrTemp.push([]);
      }
      colArrTemp[colArrTemp.length - 1].push(item);
      sum_span += span;
      if (sum_span >= 24) {
        colArrTemp.push([]);
        sum_span = 0;
      }
      return colArrTemp;
    }, []);
    // console.log('colArr', colArr);
    return colArr;
  };

  render() {
    const {
      queryFilterArr = [],
      queryParams,
      pagination,
      tableData,
      modalOption
    } = this.state;
    const { pageSize } = pagination;

    pagination.showTotal = total =>
      `共${Math.ceil(total / pageSize)}页/${total}条数据`;

    let FORM_LAYOUT = this.FORM_LAYOUT || {
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 16
      }
    };

    const visibleQueryFilter = queryFilterArr.filter(
      item => item.visible !== false
    );
    // console.log('visibleQueryFilter length', visibleQueryFilter);
    const {
      SHOW_PAGE_HEADER = true,
      PAGE_HEADER_PROPS = {},
      SHOW_CARD = false,
      HEADER,
      SHOW_ROW_SELECTION = false,
      SHOW_PAGINATION = true,
      ROW_KEY,
      COLUMNS,
      FOOTER,
      TABLE_PROPS = {}
    } = this.TABLE_CONFIG;
    // console.log('COLUMNS', COLUMNS);

    const { RENDER_MODAL = false, MODAL_PROPS = {} } = this.MODAL_CONFIG;

    return (
      <div className={this.COMPONENT_CLASSNAME}>
        {this.renderTopContent()}
        <Spin
          tip='加载中...'
          spinning={this.props.loading == null ? false : this.props.loading}
        >
          <div className={'table-with-query'}>
            {visibleQueryFilter.length > 0 ? (
              <CardWrapper
                showCard={SHOW_CARD}
                cardProps={{
                  title: (
                    <>
                      <Icon type='search' /> 筛选查询
                    </>
                  ),
                  size: 'small',
                  bordered: false
                }}
              >
                <div className={'query-form'}>
                  <Form {...FORM_LAYOUT}>
                    {(this.getRowColArr(visibleQueryFilter) || []).map((rowItem, rowItemIndex) => {
                      return (
                        <Row key={rowItemIndex} gutter={16}>
                          {(rowItem || []).map(fieldItem => {
                            const { label, span = 6, name, ...itemConfig } = fieldItem;
                            return (
                              <Col key={name} span={span}>
                                <Form.Item label={label}>
                                  <QueryItem
                                    value={queryParams[name]}
                                    itemConfig={itemConfig}
                                    onChange={(value, subPath) =>
                                      this.updateStateData([
                                        {
                                          key: 'queryParams',
                                          path: `${name}${subPath || ''}`,
                                          value
                                        }
                                      ])
                                    }
                                  />
                                </Form.Item>
                              </Col>
                            );
                          })}
                        </Row>
                      )
                    })}
                    <div className={'right-btns'}>
                      <Button
                        className={'operate-btn'}
                        type='primary'
                        icon='search'
                        onClick={this.queryData}
                      >
                        查询
                      </Button>
                      <Button
                        className={'operate-btn'}
                        icon='rollback'
                        onClick={this.handleReset}
                      >
                        重置
                      </Button>
                    </div>
                  </Form>
                </div>
              </CardWrapper>
            ) : (
              ''
            )}
            <div className={'table-div'}>
              {!SHOW_CARD ? (HEADER ? HEADER : this.renderHeader()) : ''}
              <CardWrapper
                showCard={SHOW_CARD}
                cardProps={{
                  title: (
                    <>
                      <Icon type='unordered-list' /> 查询结果
                    </>
                  ),
                  size: 'small',
                  bordered: false,
                  extra: HEADER ? HEADER : this.renderHeader()
                }}
              >
                <Table
                  {...TABLE_PROPS}
                  rowSelection={
                    SHOW_ROW_SELECTION ? this.tableRowSelection() : null
                  }
                  rowKey={ROW_KEY}
                  columns={this.getTableColumns() || COLUMNS}
                  pagination={false}
                  dataSource={tableData}
                  onChange={this.handleTableChange}
                />
                {SHOW_PAGINATION && pagination.total ? (
                  <div className={'pagination'}>
                    <Pagination
                      {...pagination}
                      onChange={this.handlePaginationChange}
                    />
                  </div>
                ) : (
                  ''
                )}
                {FOOTER ? FOOTER : ''}
              </CardWrapper>
            </div>
            {RENDER_MODAL ? (
              <Modal
                onCancel={() => this.handleCloseModal()}
                onOk={() => this.handleModalConfirm()}
                {...MODAL_PROPS}
                {...this.dynamicModalProps()}
                title={modalOption.title}
                visible={modalOption.visible}
              >
                {this.renderModalContent()}
              </Modal>
            ) : (
              ''
            )}
          </div>
        </Spin>
      </div>
    );
  }
}

function CardWrapper(props) {
  const { showCard = true, cardProps } = props;
  return showCard ? (
    <Card type='inner' {...cardProps}>
      {props.children}
    </Card>
  ) : (
    <>{props.children}</>
  );
}

export default TableWithQuery;