import React 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 TableList from './table';
import ModalForm from './modal';
import Search from './search';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

function Terminal({ location, dispatch, terminal }) {
  location.query = queryString.parse(location.search);
  const { query, pathname } = location;
  const { field, keyword } = query;
  const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = terminal;

  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    title: `${modalType === 'create' ? '添加终端' : '编辑终端'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `terminal/${modalType}`,
        payload: data,
      });
    },
    onCancel () {
      dispatch({
        type: 'terminal/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: 'terminal/showModal',
        payload: {
          modalType: 'create',
        },
      });
    }
  };
  const listProps = {
    dataSource: list,
    loading: listLoading,
    pagination,
    location,
    onChange: (page) => {
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          pageNo: page.current,
          pageSize: page.pageSize,
        }),
      }));
    },
    onEditItem: (item) => {
      dispatch({
        type: 'terminal/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
    onDeleteItem: (id) => {
      dispatch({
        type: 'terminal/delete',
        payload: id,
      });
    }
  };
  return (
    <PageHeaderLayout>
      <Card>
        <Search { ...searchProps } />
        <TableList { ...listProps } />
        {modalVisible && <ModalForm { ...modalProps } />}
      </Card>
    </PageHeaderLayout>
  );
}

Terminal.propTypes = {
  Terminal: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({ terminal }) => ({ terminal }))(Terminal);