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

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

const { TextArea } = Input;



const Template = () => {

  const [editorFlag, setEditorFlag] = useState(true);

  const [Approval, setApproval] = useState(0);

  const ApprovalChoose = (value:number) => {
    if (Approval != 0) {
      if (Approval==value) {
        setApproval(0)
      }else {
        setApproval(value)
      }      
    } else {
      setApproval(value)
    }
  
  }

  return (
    <div className={styles.base}>
      
              {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Payment Settings</div>
        <div className={styles.item2}>Status: To Be Reviewed</div>
        <div className={styles.item4}>Complaint Time:26-03-2020</div>
        <button className={styles.item3}>返回</button>
      </div>

      
            {/* 内容组件 */}
      <div  className={styles.box1}>
        <div className={styles.box1item1}>Sunshine Stanford </div>
        <div className={styles.box1item2}>03#06-2050</div>
      </div>
      <div  className={styles.box2}>
        <div className={styles.box2item1}>Albert Street,175,Singapore,Albert,Bugis,Victoria Street,Rochor,Central Singapore 189969</div>
      </div>
      <div  className={styles.box3}>
        <div className={styles.box3item1}>User Name</div>
        <div className={styles.box3item2}>Josephine </div>
        <div className={styles.box3item3}>Contact Details</div>
        <div className={styles.box3item4}>13657724536</div>
        <div className={styles.box3item5}>371712650@qq.com</div>
      </div>
      <div  className={styles.box3}>
        <div className={styles.box3item1}>User Name</div>
        <div className={styles.box3item2}>Josephine </div>
        <div className={styles.box3item3}>Contact Details</div>
        <div className={styles.box3item4}>13657724536</div>
        <div className={styles.box3item5}>371712650@qq.com</div>
      </div>

      {/* 差异内容 */}
      <div className={styles.box4}>
        <div className={styles.box4item1}>Application For Decoration Time</div>
        <div className={styles.box4item2}>26-03-2020</div>
        <div className={styles.box4item3}>26-04-2020</div>
      </div>

      <div>Complaint Description</div>
      <div className={styles.box5}>
        <div className={styles.box5item1}>
          whole house decoraion,the newly purchased rough house needs whole house decoration
        </div>        
      </div>

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

      <div className={styles.box6}>
        <div className={styles.box6item1}>response</div>
        <div className={styles.box6item2}><Input style={{ width: 200 }} placeholder="Please enter a Name" disabled={!editorFlag} /></div>

        <div className={styles.box6item3}>Contract Detail</div>
        <div className={styles.box6item4}><Input style={{ width: 300 }} placeholder="Please enter contrat number" disabled={!editorFlag} /></div>
      </div>

      <div className={styles.box8}>
        <div className={styles.box8item1}>Applcation Approval</div>
        <div className={styles.box8item2}><div onClick={ApprovalChoose.bind(null, 1)} className={Approval == 1 ? styles.round : styles.roundnone}>
          {
              Approval == 1?(<div className={styles.triangleTopright}></div>):(<div/>)
          }
          <div>Agree</div></div></div>   
        <div className={styles.box8item3}><div onClick={ApprovalChoose.bind(null, 2)} className={Approval == 2 ? styles.round : styles.roundnone}>
          {
              Approval == 2?(<div className={styles.triangleTopright}></div>):(<div/>)
          }
          <div>Reject</div></div></div>   
      </div>

      <div className={styles.box7}>
        <div className={styles.box7item1}>Comment</div>
        <div className={styles.box7item2}><TextArea style={{ width: 394, height: 80 }} autoSize={false} disabled={!editorFlag}/></div>        
      </div>

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

    </div>

 
  );
};


export default Template;
