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

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

import SelectOptions from '../../components/SelectOptions/index';

const Template = () => {

  
const printContent = (comment: any)=>{
  console.log(comment)
  }
  
  return (
    <div className={styles.base}>

            {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Edit Service Provider</div>
        <button className={styles.item3}>返回</button>
      </div>
      
     

      <div className={styles.box1}>
        <div className={styles.box1item1}>Company Name</div>
        <div className={styles.box1item2}><Input style={{width:260}} placeholder="Please enter company name"/></div>
        <div className={styles.box1item3}>Office Address</div>
        <div className={styles.box1item4}><Input style={{width:200}} placeholder="Single Line Input"/></div>
      </div>

      <div className={styles.line}></div>
      
      <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />

      <div className={styles.box2}>
        <div className={styles.box2item1}>Services Available</div>
        <div className={styles.box2item2}><Checkbox.Group options={ ["Cleaning", "Security Guard", "Maintenance",]} /></div>
      </div>

      <div className={styles.box3}>
        <div className={styles.box3item1}>Person In Charge</div>
        <div className={styles.box3item2}><Input style={{width:200}} placeholder="Please enter a name"/></div>
      </div>

      <div className={styles.box4}>
        <div className={styles.box4item1}>Contact Details</div>
        <div className={styles.box4item2}><Input style={{width:200}} placeholder="Telephone"/></div>
        <div className={styles.box4item3}><Input style={{width:200}} placeholder="E-mail"/></div>
      </div>

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


export default Template;


 