import React, { useState, useEffect } from 'react';
import { Space, Button, Form, message, Pagination } from 'antd';
import { connect, history } from 'umi';

// 图标
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';

import TitleSearch from '@/components/TitleSearch/TitleSearch';
import { RA, SA } from '@/utils/method';
import { objectColumns } from '@/utils/string';
import { Prompt } from 'react-router';

const module = 'CellList';
import './celllist.less';

const CellLists = (props: any) => {
  const columns = objectColumns([
    ['Community', 'residentialName'],
    ['Administrator', 'residentialManagerUserName'],
    [
      'Operation Hours',
      null,
      (text: any, record: any) => (
        <div>
          <span>{record.residentialStartWorking}</span>
          <span>-</span>
          <span>{record.residentialEndWorking}</span>
        </div>
      ),
    ],
    ['Office Tel', 'residentialPhone'],
    ['Address', 'residentialAddress'],
    [
      'Actions',
      null,
      (text: any, record: any) => (
        <Space size="middle">
          <a onClick={goToEdit.bind(this, record)}>Edit</a>
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    ],
  ]);

  const { dispatch, Data, loading, curString, village } = props;
  
  // 翻页数据
  function pagesList( name:string , list: any , num: number){
    let msg = {
      residentialManagerUserName: name ? name : '', 
      communityNameList: list,
      pageNum: num,
    }
    return msg
  }

  console.log(village.page)

  // 先请求一次 拿到所有小区列表
  useEffect(() => {
    RA(24, { communityName: '' }, module, dispatch);
  }, [1]);

  // 监听data请求完毕再请求一次
  useEffect(() => {
    if (Data != null) {
      RA(48, pagesList('',Data.communityList , 1), module, dispatch);
    }
  }, [Data]);

  const CallbackSearch = (values: any) => {
    RA(24, { communityName: values }, module, dispatch);
  };
  const goToAdd = () => {
    SA('', module, dispatch); // 清空之前传递的数据
    history.push('./CellList/Add');
  };
  const goToEdit = (values: any, e: any) => {
    // console.log(values);
    SA(values, module, dispatch);
    history.push('./CellList/Add');
  };
  const goToDetail = (values: any, e: any) => {
    // console.log(values);
    SA(values, module, dispatch);
    history.push('./CellList/Detail');
  };

  // 点击搜索

  const CallBackTitleSearch = (comment: any) => {
    console.log(comment)
    if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
      RA(48, pagesList(comment.label,comment.communityName , 1), module, dispatch);
    }
    else {
      message.error('Please Enter And Select A Content To Search!');
    }
  };

  // 点击页面属性传参数
  const paginationHandler = (page: number, pageSize?: number) => {
    RA(48, pagesList('',Data.communityList , page), module, dispatch);
  };

  // 刷新
  const resetHandler = () => {
    RA(48, pagesList('',Data.communityList , 1), module, dispatch);
  };

  return (
    <div>
      {village != null ? (
        <>
          {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
          <div className="contop">
            <TitleSearch
              username={['label', 'Please enter Administrator name']}
              community={'communityName'}
              checklist={curString.communityNameList != null ? curString.communityNameList : null}
              onSubmit={CallBackTitleSearch}
            />
          </div>
          <ProTable
            // request={requestHeadl}
            pagination={false} // 隐藏默认分页
            rowKey={'id'}
            dataSource={village.list}
            columns={columns}
            search={false}
            loading={loading}
            toolBarRender={() => [
              <Button key="3" type="primary" onClick={goToAdd}>
                <PlusOutlined />
                Create new Community
              </Button>,
            ]}
            options={{
              density: true,
              fullScreen: true,
              reload: () => {
                resetHandler();
              },
              setting: false,
            }}
            headerTitle="Community List"
          // pagination={{ defaultCurrent: 1, total: Data.totalRow }}
          />
          {village.page ? (
             <div className="pages">
            
             <Pagination
               current={village.page.currentPage}
               total={village.page.totalRow}
               pageSize={village.page.curPageSize}
               onChange={paginationHandler}
             />
           </div>
          ) : ''}
         
        </>
      ) : (
          '暂无数据'
        )}
    </div>
  );
};

function map(state: any) {
  const loading = state.loading.models.CellList;
  const { Data, curString, village } = state[module];
  return { Data, loading, curString, village };
}
export default connect(map)(CellLists);
