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

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

import Line from '../../components/Line/Line';
import SelectOptions from '../../components/SelectOptions/index';
import { indexOf } from 'lodash';


const AccoutingContent = (props: { location: any; }) => {

  const { location } = props;

  const goToReturn = () => {
    history.back()
  };

  const [editFlag, setEditFlag] = useState(false);
  useEffect(() => {
    if ((location.pathname).indexOf("/AccoutingDetail") > -1) {
      setEditFlag(true)
    } else {
      setEditFlag(false)
    }
  }, [location.pathname]);


  const printContent = (comment: any) => {
    console.log(comment)
  }

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

      {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Add Accounting</div>
        <button className={styles.item3} onClick={goToReturn}>Return</button>
      </div>

      <div className={styles.box1}>
        <div className={styles.box1item1}>Company Name</div>
        <div className={styles.box1item2}>{editFlag ? (<Input style={{ width: 260 }} placeholder="Please enter company name" />) : ("123")}</div>
        <div className={styles.box1item3}>Office Address</div>
        <div className={styles.box1item4}>{editFlag ? (<Input style={{ width: 200 }} placeholder="Single Line Input" />) : ("123")}</div>
      </div>
      <Line />
      <div style={{ marginBottom: 28 }}>Service Community</div>
      <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />

      <div className={styles.box2}>
        <div className={styles.box2item1}>Services Available</div>
        <div className={styles.box2item2}>Accounting</div>
      </div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Person In Charge</div>
        <div className={styles.box2item2}>{editFlag ? (<Input placeholder="Please enter a name" style={{ width: 200 }} />) : ("123")}</div>
      </div>

      <div className={styles.box3}>
        <div className={styles.box3item1}>Contact Details</div>
        <div className={styles.box3item2}>{editFlag ? (<Input placeholder="Telephone" style={{ width: 200 }} />) : ("123")}</div>
        <div className={styles.box3item3}>{editFlag ? (<Input placeholder="E-mail" style={{ width: 200 }} />) : ("123")}</div>
      </div>
      {
        editFlag ? (
          <div>
            <Line />
            <Button type="primary" size="large">submit</Button>
          </div>
        ) : (<div />)
      }

    </div>
  );
};


export default AccoutingContent;
