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

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

//导入自组件


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


const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
];

const Template = () => {

  const menuListNormal = ["A","B"]
  const [display, setDisplay] = useState("A");//小组件：线框

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

  const pagination={defaultCurrent:1,total: 16}

  const columns = [
    {
      title: "username",
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: "project",
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: "unit",
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: "status",
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: "submissionTime",
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: "actions",
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <a>详情</a>
        </Space>
      ),
    },
  ];


  return (
    <div className={styles.base}>
      {/* 头部组件 */}
      {
      display=="A"?
      (<div>
            <div className={styles.box1}>
        <div className={styles.box1item1}>
            <Input />
          </div>
        <div className={styles.box1item2}>
            <Input />
        </div>
      </div>
      {/* 差异内容 */}
      <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "BO"].sort()} onSubmit={printContent} />   
      
      <button className={styles.search}>search</button>
          </div>) : (
      <div className={styles.boxs}>
        <input className={styles.items1} placeholder={"nameofowner"} />
        <input className={styles.items2} placeholder={"inputProject"} />
        <button className={styles.items3}>search</button>
      </div>
      )
      }  

        {/* 内容组件 */}
        <div className={styles.box2}>
        {
          menuListNormal.map((item, index) => {                                
            return (<button key={"bt"+ index } className={display==item?styles.buttonChoose:styles.buttonWait} onClick={()=>{setDisplay(item)}}>{item}</button>)
          })
        }
        <Button type="primary" className={styles.buttonAdd} >+ Add Facility</Button>
        </div>


      {/* 列表组件 */}
      <Table style={{ marginTop:16}} dataSource={dataSource} columns={columns} pagination={pagination} />      
 
      

    </div>
  );
};


export default Template;
