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

import { Link, useIntl, connect, Dispatch } from 'umi';



const Template = () => {

  const [radioGroupValue,setRadioGroupValue]=useState(0)
  const changeRadio = () => {
    
  }
  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}>Project</div>
        <div className={styles.box1item2}>
          <Input.Search style={{width:200,height:32}} />
        </div>
      </div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Facility Bookings</div>
        <div className={styles.box2item2}>
        <Radio.Group onChange={changeRadio} defaultValue={1}>
          <Radio value={1}>A</Radio>
          <Radio value={2}>B</Radio>
          <Radio value={3}>C</Radio>
          <Radio value={4}>D</Radio>
      </Radio.Group>
        </div>
      </div>
      <div className={styles.line}></div>
      
      <div className={styles.box3}>
        <div className={styles.box3item1}>User Name</div>
        <div className={styles.box3item2}><Input style={{width:200}} /></div>
        <div className={styles.box3item3}>Contact Details</div>
        <div className={styles.box3item4}><Input style={{width:200}} /></div>
      </div>
      
      <div className={styles.box4}>
        <div className={styles.box4item1}>Unit</div>
        <div className={styles.box4item2}><Input style={{width:80}} /></div>
        <div className={styles.box4item3}>#</div>
        <div className={styles.box4item4}><Input style={{width:80}} /></div>  
      </div>

      <div className={styles.line}></div>
      
      <div className={styles.box5}>
          <div className={styles.box5item1}>Booking Schedule</div>
          <div className={styles.box5item2}><DatePicker /></div>
      </div>

      <div className={styles.box6}>
          <div className={styles.box6item1}>Management fee required</div>
          <div className={styles.box6item2}>$100.00</div>
      </div>

      <div className={styles.box6}>
          <div className={styles.box6item1}>Deposit is required</div>
          <div className={styles.box6item2}>$100.00</div>
      </div>

      <div className={styles.line}></div><Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
    </div>
  );
};


export default Template;
