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';

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

const Template = () => {


  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}>

            {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Service Provider Details</div>
        <button className={styles.item3}>返回</button>
      </div>
      
     
      <div className={styles.box1}>
        <div className={styles.box1item1}>Company Name</div>
        <div className={styles.box1item2}>Free Limited</div>
      </div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Office Address</div>
        <div className={styles.box2item2}>Albert Street, 175, Singapore, Albert, Bugis, Victoria Street, </div>
      </div>

      <div className={styles.box3}>
        <div className={styles.box3item1}>Person In Charge</div>
        <div className={styles.box3item2}>Bellamy</div>
      </div>
      <div className={styles.box4}>
        <div className={styles.box4item1}>Contact Details</div>
        <div className={styles.box4item2}>18205462231 371712650@qq.com</div>
      </div>

      <div className={styles.box5}>
        <div className={styles.box5item1}>Services Available</div>
        <div className={styles.box5item2}>Cleaning，Security Guard</div>
      </div>

      <div className={styles.box6}>
        <div className={styles.box1item1}>Service Community</div>
      </div>

      <div className={styles.box7}>
        <div className={styles.box1item1}>Security Guard Account</div>
      </div>

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

    </div>
  );
};


export default Template;