import React , { useState, useEffect } from 'react';
import { Space, Button, message , Pagination ,Form ,Input } from 'antd';
import { connect, history , Loading  } from 'umi';
import { PlusOutlined,SearchOutlined,ClearOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import styles from './ContractContent.less';

import { RA } from '@/services/tos';

import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';

const Contract = (props:any) => {

  const {location,dispatch,ContractModel,userListLoading } = props;
  const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
  
  console.log(userListLoading)

  // 把请求装在一个地方
  function requst(payload:any){
    dispatch({type:'ContractModel/getList', payload:payload})
  }

  // 数据
  useEffect(()=>{
    let payload = {
      index: 19,
      page:{
        pageNum:ContractModel.page
      }
    }
    requst(payload);
  },[1])  //页面进来执行一次

  
  // 跳转
  const Jump = (record:any,Jump:String)=>{
    console.log(record)
    console.log(Jump)
    dispatch({
      type: 'ContractModel/getMove',
      payload: {
        type:Jump,
        record:record,
      },
    });
    // if(record == 0){
    //   history.push(location.pathname + '/' + Jump)
    // }
    // console.log(location.pathname + '/' + Jump)
    history.push(location.pathname + '/' + Jump)
  }
  // 表头
  const columns = [
    {
      title: "Contract Number",
      render:function(record:any) {
        let mom = moment(record.contractValidEndDate).diff(moment(), 'day');
        return <span className={mom < 30? styles.red : ''}>{record.contractNumber}</span>
      }
    },  // 合同编号
    {
      title: "Company",
      render: (text:any, record:any) => (
        <>
          <div>
            <span>Party A : {record.contractPartyA}</span>
          </div>
          <div>
            <span>Party B : {record.contractPartyB}</span>
          </div>
        </>
      )
    },   //合同方
    {title: "Contract Title",dataIndex: 'contractTitle'},   // 合同标题
    {title: "Community Name",dataIndex: 'communityName'},   // 小区名
    {title: "Contacts",dataIndex: 'communityAccount'},   // 联系人
    {title: "Phone",dataIndex: 'communityPhone'},   // 联系电话
    {title: "Valid Start Date",dataIndex: 'contractValidStartDate'}, // 生效时间
    {title: "Valid End Date",dataIndex: 'contractValidEndDate'},// 到期时间
    // { title: "Contract File", dataIndex: 'contractFileName' },  // 附件
    {
      title: "Actions",
      render: (text: any, record: any) => (
        <Space size="middle">
          <a onClick={()=>{Jump(record,'Edit')}}>Edit</a>
          <a onClick={()=>{Jump(record,'Detail')}}>Detail</a>
        </Space>
      ),
    },// 操作
  ];


  // 页面切换
  const paginationHandler = (page: number, pageSize?: number)=>{
    dispatch({
      type: 'ContractModel/getList',
      payload: {
        index:19,
        page:{
          pageNum:page,
        }
      },
    });
  }

  // 刷新
  const resetHandler = () => {
    dispatch({
      type: 'ContractModel/getList',
      payload: {
        index:19,
        page:{
          pageNum:ContractModel.page,
        }
      },
    });
  };


  // 表单标识
  const [form] = Form.useForm()

  // 重置
  const onReset = () => {
    form.resetFields();
    let payload = {
      index: 19,
      page:{
        pageNum:1
      }
    }
    requst(payload);
  };

   // 表单提交
   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
    })
  }
  return (

    <>
      <div className={styles.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 Number'  />
              </Form.Item>
              <Form.Item name="contractTitle">
                <Input allowClear  placeholder='Contract Title' />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={userListLoading}>Search </Button>
                <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={userListLoading}> Reset</Button>
              </Form.Item>
            </Form>
      </div>
      
      <div className={styles.listbox}>
        <ProTable 
          // request={requestHeadl}
          rowKey={"id"} 
          dataSource={ContractModel.list}
          columns={columns} 
          pagination={false}      // 隐藏默认分页
          search={false}
          loading={userListLoading}
          toolBarRender={() => [
            <Button key="3" type="primary" onClick={()=>{Jump(0,'Add')}}>
              <PlusOutlined />Add Contract
            </Button>,
          ]}
          options={{
            density: true,
            fullScreen: true,
            reload: () => {
              resetHandler();
            },
            setting: false,
          }}
          headerTitle="Contract list"
          // pagination={{ defaultCurrent: 1, total: Data.totalRow }} 
          />
        
        <div className={styles.pages}>
          <Pagination
            current={ContractModel.page}
            total={ContractModel.totalRow}
              onChange={paginationHandler}
              // onShowSizeChange={pageSizeHandler}
              // current={users.meta.page}
              // pageSize={users.meta.per_page}
            />
        </div>
      </div>
    </>
  );
};

const mapStateToProps = ({
  ContractModel,
  loading,
}: {
  ContractModel: any;
  loading: Loading;
}) => {
  console.log(loading)
  return {
    ContractModel,
    userListLoading: loading.models.ContractModel,
  };
};

export default connect(mapStateToProps)(Contract);