import React, { useState, useEffect } from 'react';
import { Input ,Tabs,Table,Space, Button ,Form ,message} from 'antd';
const { TabPane } = Tabs;

import {connect,history} from 'umi';

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


import TitleSearch from '@/components/TitleSearch/TitleSearch'
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity'
import { RA, SA } from '@/utils/method';
import { objectColumns } from '@/utils/string'; 
import { timestampToTime } from '@/utils/time';
import CommunitySearch from "@/components/CommunitySearch/CommunitySearch";
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></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 } = props;

  const onChange = e => {
    e.persist();
    console.log("表单输入的值", e.target.value);
  };

  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 = () => {
    history.push("./CellList/Add");
  }
  const goToDetail = (values: any, e: any) => {
    SA(values,module,dispatch)
    history.push("./CellList/Detail");
  }

  
  // 表单标识
  const [form] = Form.useForm()
  // 表单提交
  const onFinishContract = (value:any)=>{
    // console.log(value)
    if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
      message.error('Please enter one of them!')
    }else{
      console.log(value)
      let payload = {
        index: 19,
        page:{
          pageNum:1,
          contractNumber:value.contractNumber,
          contractTitle:value.contractTitle,
          communityName:value.communityName
        }
      }
      // requst(payload);
    }
  }

  // 选择小区名字并赋值
  const opname = (value:any)=>{
    form.setFieldsValue({
      'communityName' : value
    })
  }
  // 重置
  const onReset = () => {
    form.resetFields();
    let payload = {
      index: 19,
      page:{
        pageNum:1
      }
    }
  };
  
  return (
    <div > 
    {
        Data != null ? <>
          {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
          <div className='contop'>
            <Form
                autoComplete= "off"
                layout="inline"
                form={form}
                name="contract"
                onFinish={onFinishContract}
              >
                <Form.Item name="communityName">
                  <SearchOptionsCommnity 
                      // ubmit={extendName} 
                      opname={opname} />
                </Form.Item>
                <Form.Item name="contractNumber">
                  <Input allowClear  placeholder='Contract No'  />
                </Form.Item>
                <Form.Item name="contractTitle">
                  <Input allowClear  placeholder='Contract Title' />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={false}>Search </Button>
                  <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={false}> Reset</Button>
                </Form.Item>
              </Form>
          </div>
          <ProTable 
            // request={requestHeadl}
            pagination={false}      // 隐藏默认分页
            rowKey={"id"} 
            dataSource={Data.rows}
            columns={columns} 
            search={false}
            loading={false}
            toolBarRender={() => [
              <Button key="3" type="primary" onClick={()=>{}}>
                <PlusOutlined />Add Contract
              </Button>,
            ]}
            options={{
              density: true,
              fullScreen: true,
              reload: () => {
                // resetHandler();
              },
              setting: false,
            }}
            headerTitle="Create new Community"
            // 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) {
  const { Data} = state[module]
  return { Data}
}
export default connect(map)(CellList);