import React, { useState, useEffect } from 'react';
import { Space, Button, Form, message } 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';
const module = 'CellList';

import './celllist.less';

const CellList = (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={goToDetail.bind(this, record)}>Edit</a>
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    ],
  ]);

  const { dispatch, Data, loading, curString } = props;
  console.log(curString);
  useEffect(() => {
    RA(24, { communityName: '' }, module, dispatch);
  }, []);
  useEffect(() => {
    if (Data != null) {
      //console.log(columnsVal)
    }
  }, [Data]);
  const CallbackSearch = (values: any) => {
    RA(24, { communityName: values }, module, dispatch);
  };
  const goToAdd = () => {
    SA('', 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) => {
    if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
      let tmp: any = new Object();
      tmp.adminName = comment.label;
      tmp.communityName = comment.communityName;
      tmp.curPage = 1;
      // QA(tmp);
      console.log(tmp);
      // CallbackSearch()
      //中断
      // RA(9, {
      //   userToken: token,
      //   pageNum: '1',
      //   subscribeDate: tmp.subscribeDate,
      //   status: tmp.status,
      //   communityNameList: comment.communityName,
      // }, module, dispatch);
    } else {
      message.error('请输入管理员姓名或选择小区进行搜索！');
    }
  };
  return (
    <div>
      {Data != null ? (
        <>
          {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
          <div className="contop">
            <TitleSearch
              username={['label', '请输入管理员姓名']}
              community={'communityName'}
              checklist={curString.communityNameList != null ? curString.communityNameList : null}
              onSubmit={CallBackTitleSearch}
            />
          </div>
          <ProTable
            // request={requestHeadl}
            pagination={false} // 隐藏默认分页
            rowKey={'id'}
            dataSource={Data.rows}
            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 }}
          />
          {/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
            dataSource={Data.rows}
            columns={columns}
            pagination={{ defaultCurrent: 1, total: Data.total}} />   */}
        </>
      ) : null}
    </div>
  );
};

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