import React, { useState, useEffect } from 'react';
import { Input ,Table,Space,Form,Button,message} from 'antd';
import { Link, useIntl, connect, Dispatch, history, Loading } from 'umi';

import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';


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

import moment from 'moment';

import styles from './index.less';
import './ContractContent.less';

const Contract = (props:any) => {

  const { formatMessage } = useIntl();

  const { dispatch,location,Data,Result ,loading } = props;
  const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
  const SA = (values: any) => { dispatch({ type: 'Contract/SA', playload: values }) };

  // 把请求装在一个地方
  function requst(){RA(19, {pageNum:"1",contractNumber:"",contractTitle:"",communityName:""})}

  useEffect(() => {
    console.log("合同页面")
    requst()
  }, [])

  useEffect(() => {
    if (Data != null) {
      console.log(Data)
    }
  },[Data])

  const goToDetail = (record: any, e: any) => {
    SA(record)
    history.push(location.pathname+'/Detail')
  }
  const goToEdit = (record: any, e: any) => {
    SA(record)
    history.push(location.pathname+'/Edit')
  }
  const goToAdd = (record: any) => {
    SA(record)
    history.push(location.pathname+'/Add')
  }

  

  // 日期处理
  function CountDown(record: any) {
    return record.contractValidEndDate
  };

  // 表头
  const columns = [
    {
      title: "Contract Number",
      render:function(record) {
        let mom = moment(record.contractValidEndDate).diff(moment(), 'day');
        return <span className={mom < 30? '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={goToEdit.bind(this, record)}>Edit</a>
          <a onClick={goToDetail.bind(this,record)}>Detail</a>
        </Space>
      ),
    },// 操作
  ];
  // 表单标识
  const [form] = Form.useForm()

  // 重置
  const onReset = () => {
    form.resetFields();
    requst()
  };

  // 表单提交
  const onFinishContract = (value:any)=>{
    // console.log(value)
    if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
      message.error('Please enter one of them!')
    }else{
      RA(19, {
        pageNum:"1",
        contractNumber:value.contractNumber,
        contractTitle:value.contractTitle,
        communityName:value.communityName
      })
    }
  }


  return (
    <div className={styles.base}>
        {/* 头部组件 */}
        {/* <div className={styles.box}>
          <Form
              autoComplete= "off"
              layout="inline"
              form={form}
              name="contract"
              onFinish={onFinishContract}
            >
              <Form.Item name="communityName">
                <Input allowClear  placeholder='Community name' />
              </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"> Search </Button>
                <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}>Reset</Button>
              </Form.Item>
            </Form>
        </div> */}

        {/* 内容组件 */}
      <div className={styles.box2}>

        <button className={styles.buttonAdd} onClick={goToAdd}> + Add To</button>
      </div>

      {/* 列表组件 */}
      {
        <ProTable 
        request={requestHeadl}
        rowKey={"id"} 
        style={{ marginTop: 16 }} 
        columns={columns} 
        pagination={{ defaultCurrent: 1, total: Data.totalRow }} 
        loading={ loading }
        />
      }



    </div>
  );
};

function mapStateToProps(state) {
  const { Data,curString,Result } = state.Contract;
  const loading = state.loading.models.user;
  return {
    Data,
    curString,
    Result,
    loading
  };
}
export default connect(mapStateToProps)(Contract);
