import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Button,Table,Space,Pagination,Tooltip } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';



const Template = () => {

  return (
    <div className={styles.base}>

            {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Payment Settings</div>
        <button className={styles.item3}>返回</button>
      </div>
      
      <div className={styles.box1}>
        <div className={styles.box1item1}>Contract Details</div>
        <div className={styles.box1item2}><Input.Search style={{width:200}} /></div>
        <div className={styles.box1item3}><Input style={{width:94}}/></div>
        <div className={styles.box1item4}>#</div>
        <div className={styles.box1item5}><Input style={{width:80}}/></div>
        <div className={styles.box1item6}>—</div>
        <div className={styles.box1item7}><Input style={{width:112}}/></div>
      </div>

      <div className={styles.box2}>
      <div className={styles.box2item1}><Input style={{width:680}}/></div>
      </div>

 
      <div className={styles.box3}>
        <div className={styles.box3item1}>Owner</div>
        <div className={styles.box3item2}><Input style={{ width: 200 }} /></div>
        <div className={styles.box3item3}>Contract Details</div>
        <div className={styles.box3item4}><Input style={{ width: 200 }} /></div>
        <div className={styles.box3item5}><Input style={{width:200}}/></div>
      </div>

      <div className={styles.line}></div>

      <div className={styles.box3}>
        <div className={styles.box3item1}>Applicant</div>
        <div className={styles.box3item2}><Input style={{ width: 200 }} /></div>
        <div className={styles.box3item3}>Contract Details</div>
        <div className={styles.box3item4}><Input style={{ width: 200 }} /></div>
        <div className={styles.box3item5}><Input style={{width:200}}/></div>
      </div>

      <div className={styles.box4}>
        <div className={styles.box4item1}>Relationship With The Owner</div>
        <div className={styles.box4item2}><Input style={{ width: 120 }} /></div>
      </div>

      <div className={styles.box5}>
        <div className={styles.box5item1}>Relationship With The Owner</div>
        <div className={styles.box5item2}><TextArea autoSize={false} style={{ width: 520,height: 120}} /></div>
      </div>

      <div><div className={styles.line}></div><Button type="primary">summit</Button></div>
    </div>
  );
};


export default Template;
