import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Upload,Select,Button } from 'antd';

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



import { UploadOutlined } from '@ant-design/icons';



const uploadProp = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  }
};

const { Option } = Select;

const Others = () => {
  
  const [list] = useState(['小区', '小区22222222222222222222222222222222222222222222222222','小区3','4','5','6','7','8','9','0','小0区','小06区','小67区']);
  
  return (
    <div className={styles.base}>

        {/* 组件 */}
        <div className={styles.box}>
          <div className={styles.item1}>Payment Settings</div>
          <button className={styles.item3}>退出</button>
        </div>

            {/* 内容组件 */}
        <div  className={styles.box1}>
          <div className={styles.box1item1}>select</div>
          <div className={styles.box1item2}>
       
          <Select defaultValue={list[0]} style={{ width: 200 }}>
            {
              list.map((item, index) => {
                return (                  
                  <Option key={'op_'+index} value={item}>{item}</Option>
                )
              })
            }

            </Select>         
       
          </div>
        </div>
        <div  className={styles.box2}>
          <div className={styles.box2item1}>upload</div>
          <div className={styles.box2item2}>
              <Upload {...uploadProp}>
                <Button>
                  <UploadOutlined /> Click to Upload
                </Button>
              </Upload>
          </div>
        </div>


      {/* 操作组件 */}
      <div  className={styles.line}></div>
      <Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>

    </div>
  );
};


export default Others;
