import React, { useState, useEffect } from 'react';
import { Space, Button, 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 { getCookie } from '@/utils/method';

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',
      (text: any, record: any) => (
        <span>
          {record.residentialAddress}
          {', SINGAPORE '}
          {record.residentialZipCode.substring(
            record.residentialZipCode.length - 6,
            record.residentialZipCode.length,
          )}
          {/* <Tag color="#2db7f5">
          </Tag> */}
        </span>
      ),
    ],
    [
      '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;

  const [term, setTerm] = useState({} as any); // 拉取数据的条件存储

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

  // 监听是否有小区列表
  useEffect(() => {
    if (Data != null) {
      let obj = {
        residentialManagerUserName: '',
        communityNameList: Data.communityList,
        pageNum: 1,
      };
      setTerm(obj); // 存进搜索条件
    } else {
      const userInfo = localStorage.getItem('userInfo') || '';
      const id = JSON.parse(userInfo).userModel.id;
      RA(55, { id: id }, module, dispatch);
    }
  }, [Data]);

  // 监听是否有数据
  useEffect(() => {
    if (village == null) {
      RA(48, term, module, dispatch);
    }
  }, [village]);

  const goToAdd = () => {
    SA(null as any, module, dispatch); // 清空之前传递的数据
    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
    history.push('/CommunityManagement/CellList/Add');
  };
  const goToEdit = (values: any, e: any) => {
    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
    SA(values, module, dispatch);
    history.push('/CommunityManagement/CellList/Add');
  };
  const goToDetail = (values: any, e: any) => {
    dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
    SA(values, module, dispatch);
    history.push('/CommunityManagement/CellList/Detail');
  };

  // 点击搜索

  const CallBackTitleSearch = (comment: any) => {
    if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
      let obj = {
        residentialManagerUserName: comment.label,
        communityNameList: comment.communityName.length > 0 ? comment.communityName : null, // 如果为空就返回null  否则后台不好判断
        pageNum: 1,
      };
      setTerm(obj); // 存进搜索条件

      RA(48, obj, module, dispatch);
    } else {
      message.error('Please Enter And Select A Content To Search!');
    }
  };

  // 点击页面属性传参数
  const paginationHandler = (page: number, pageSize?: number) => {
    let p = {
      pageNum: page,
    };
    let t = { ...term, ...p };
    setTerm(t);
    RA(48, t, module, dispatch);
  };

  // 刷新
  const resetHandler = () => {
    RA(48, term, module, dispatch);
  };

  return (
    <div>
      {village != null ? (
        <>
          {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
          <div className="contop">
            <TitleSearch
              username={['label', 'Please Enter Administrator']}
              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: false,
              fullScreen: false,
              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}
                showSizeChanger={false}
              />
            </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);
