import React, { useState, useEffect } from 'react';
import { Space, Button, message, Pagination, Form, Input, Tooltip } from 'antd';
import { connect, history } 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 SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';

const Contract = (props: any) => {
  const { location, dispatch, Contract, loading } = props;

  const { Data } = Contract;
  // 把请求装在一个地方
  const RA = (index: any, values: any) => {
    dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
  };

  // 数据
  useEffect(() => {
    if (Data == null) {
      //如果没数据请求一次
      let obj = {
        pageNum: 1,
      };
      RA(19, obj);
    }
  }, [Data]);

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

  // 跳转
  const Jump = (record: any, Jump: String) => {
    // RA();

    dispatch({ type: 'Contract/DataSaveDetail', playload: { record } });
    // 清掉图片列表
    dispatch({ type: 'Contract/FileImgs' });
    // 跳转
    history.push(location.pathname + '/' + Jump);
  };
  // 表头
  const columns = [
    {
      title: 'Contract Number',
      render: function (record: any) {
        let mom = moment(record.contractValidEndDate).diff(moment(), 'months');
        // console.log(mom);
        if (mom < 2) {
          return (
            <Tooltip title="Due Soon" placement="right" color={'red'} key={record.id}>
              <span className={styles.red}>{record.contractNumber}</span>
            </Tooltip>
          );
        } else {
          return <span>{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: 'Start Date', dataIndex: 'contractValidStartDate' }, // 生效时间
    { title: '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) => {
    let p = {
      pageNum: page,
    };
    let t = { ...term, ...p };
    setTerm(t);
    RA(19, t);
  };

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

  // 重置
  const onReset = () => {
    form.resetFields();
    let obj = {
      pageNum: 1,
    };
    setTerm(obj);
    RA(19, obj);
  };

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

  // 选择小区名字并赋值
  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={loading}>
              Search{' '}
            </Button>
            <Button
              htmlType="button"
              onClick={onReset}
              style={{ marginLeft: '15px' }}
              icon={<ClearOutlined />}
              loading={loading}
            >
              {' '}
              Reset
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div className={styles.listbox}>
        <ProTable
          // request={requestHeadl}
          rowKey={'id'}
          dataSource={Data ? Data.list : ''}
          columns={columns}
          pagination={false} // 隐藏默认分页
          search={false}
          loading={loading}
          toolBarRender={() => [
            <Button
              key="3"
              type="primary"
              onClick={() => {
                Jump(null, 'Add');
              }}
              loading={loading}
              icon={<PlusOutlined />}
            >
              Add Contract
            </Button>,
          ]}
          options={{
            density: false,
            fullScreen: false,
            reload: () => {
              onReset();
            },
            setting: false,
          }}
          headerTitle="Contract list"
          // pagination={{ defaultCurrent: 1, total: Data.totalRow }}
        />

        <div className={styles.pages}>
          <Pagination
            current={Data ? Data.page.currentPage : 0}
            total={Data ? Data.page.totalRow : 0}
            onChange={paginationHandler}
            defaultPageSize={Data ? Data.page.pageSize : 15}
          />
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state: any) => {
  console.log(state);
  return {
    Contract: state.Contract,
    loading: state.loading.models.Contract || false,
  };
};

export default connect(mapStateToProps)(Contract);
