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

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

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

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



const Template = () => {

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

            {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Add Admin Account</div>        
        <button className={styles.item3}>返回</button>
      </div>
      
      <div className={styles.box1}>
        <div className={styles.box1item1}>Account ID</div>
        <div className={styles.box1item2}><Input/></div>        
      </div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Administrator Name</div>
        <div className={styles.box2item2}><Input/></div> 
        <div className={styles.box2item3}>Contact Details</div>
        <div className={styles.box2item4}><Input/></div>    
      </div>
          
        <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
      
      <div className={styles.box3}>
        <div className={styles.box3item1}>Permission Configuration</div>        
        <div className={styles.box3item2}>
          <div className={styles.box3item2R}><Radio>Secondary Administrator</Radio></div>
          <div className={styles.box3item2R}><Radio>Three Level Administrator</Radio></div>
          <div className={styles.box3item2R}><Radio>Select All</Radio></div>                         
        </div>
        <div className={styles.box3item3}>
            <Input />
        </div>        
      </div>

    </div>
  );
};


export default Template;
