import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Button, Radio } 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}>View Facilty Bookings</div>
        <button className={styles.item3}>返回</button>
      </div>
      
      {/* 内容组件 */}

      <div className={styles.box1}>
        <div className={styles.box1item1}>Appointment Status</div>
        <div className={styles.box1item2}>Reservation Successful</div>
        <div className={styles.box1item3}>OrderTime</div>
        <div className={styles.box1item4}>02-12 10:20</div>
        <div className={styles.box1item5}><Button style={{width:152}}>取消</Button></div>
      </div>
          
      <div className={styles.line}></div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Service Community</div>
        <div className={styles.box2item2}>Constant company</div>
        <div className={styles.box2item3}>Faciity Bookings</div>
        <div className={styles.box2item4}>Swimming pool A</div>
        <div className={styles.box2item5}>Booking Schedule</div>
        <div className={styles.box2item6}>02-22 10:30</div>
        <div className={styles.box2item7}>——</div>
        <div className={styles.box2item8}>02-22 10:30</div>
      </div>  

      <div className={styles.box3}>
        <div className={styles.box3item1}>User Name</div>
        <div className={styles.box3item2}>Josephine</div>
        <div className={styles.box3item3}>Contract Details</div>
        <div className={styles.box3item4}>13466573211</div>
        <div className={styles.box3item5}>Unit</div>
        <div className={styles.box3item6}>03#15-2020</div>
      </div>

      <div className={styles.line}></div>
      <div className={styles.box4}>
        <div className={styles.box4item1}>Management fee required</div>
        <div className={styles.box4item2}>$ 100.00</div>
      </div>

      <div className={styles.box4}>
        <div className={styles.box4item1}>Deposit is Required</div>
        <div className={styles.box4item2}>$ 100.00</div>
      </div>
          
      {/* <Button style={{ width: 80, marginTop: 28 }}>支付</Button> */}
      <div style={{marginBottom:19}}><Radio>Full Refund of Deposit</Radio></div>
      
      <div className={styles.box5}>
        <div className={styles.box5item1}><Radio>Partial Refund Of Deposit </Radio></div>
        <div className={styles.box5item2}>$ <Input style={{width:80}}/></div>
      </div>

      <div className={styles.box6}>
        <div className={styles.box6item1}><TextArea autoSize={false} style={{ width: 300,height:80}}/></div>        
      </div>     

      <button className={styles.search}>Return The Deposit Money</button>
    </div>
  );
};


export default Template;
