import React, { Component } from 'react';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card } from 'antd';
import CampusTableList from './table';
import CampusModalForm from './modal';
import Search from './search';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Codes } from '../../utils/config';

@connect(state => ({
  campus: state.campus,
}))
export default class CampusList extends Component {
  render() {
    const { location, dispatch, campus } = this.props;
    const {
      list,
      listLoading,
      pagination,
      currentItem,
      modalVisible,
      modalType,
    } = campus;

    location.query = queryString.parse(location.search);
    const { query, pathname } = location;
    const { field, keyword, ...filters } = query;

    // 把携带的参数中空值项删除
    Object.keys(filters).map((key) => { filters[key] ? null : delete filters[key]; });
    // 如果搜索内容不为空则添加进filters中
    if (field && keyword) {
      filters.field = field;
      filters.keyword = keyword;
    }

    const modalProps = {
      item: modalType === 'create' ? {} : currentItem,
      visible: modalVisible,
      maskClosable: false,
      title: `${modalType === 'create' ? '添加校区' : '编辑校区'}`,
      wrapClassName: 'vertical-center-modal',
      onOk(data) {
        dispatch({
          type: `campus/${modalType}`,
          payload: data,
          callback: () => {
            dispatch(routerRedux.push({
              pathname: '/terminal/campus',
              search: queryString.stringify(filters),
            }));
          },
        });
      },
      onCancel() {
        dispatch({
          type: 'campus/hideModal',
        });
      },
    };

    const searchProps = {
      field,
      keyword,
      onSearch: (payload) => {
        if (!payload.keyword.length) {
          delete payload.field;
          delete payload.keyword;
        }
        dispatch(routerRedux.push({
          pathname,
          search: queryString.stringify({
            ...payload,
          }),
        }));
      },
      onAdd: () => {
        dispatch({
          type: 'campus/showModal',
          payload: { modalType: 'create' },
        });
      },
    };

    const listProps = {
      dataSource: list,
      loading: listLoading,
      pagination,
      location,
      onChange: (pagination, filterArgs) => {
        const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
        const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
          const newObj = { ...obj };
          newObj[key] = getValue(filterArgs[key]);
          return newObj;
        }, {});
        const data = { ...filters, ...tableFilters };
        Object.keys(data).map(key => (data[key] ? null : delete data[key]));
        dispatch(routerRedux.push({
          pathname,
          search: queryString.stringify({
            ...data,
            pageNo: pagination.current,
            pageSize: pagination.pageSize,
          }),
        }));
      },
      onEditItem: (item) => {
        dispatch({
          type: 'campus/showModal',
          payload: {
            modalType: 'update',
            currentItem: item,
          },
        });
      },
      onDeleteItem: () => {
        // TODO: 暂不提供删除校区功能
      },
    };
    return (
      <PageHeaderLayout>
        <Card>
          <Search {...searchProps} />
          <CampusTableList {...listProps} />
          {modalVisible && <CampusModalForm {...modalProps} />}
        </Card>
      </PageHeaderLayout>
    );
  }
}