import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Button, Icon, Tooltip } from 'antd';
import Cell from '../../components/Cell';
import Style from './style.less';

const { Meta } = Card;

const lineTextStyle = {
  marginBottom: 0,
  lineHeight: '1.8em'
}

export default (props) => {

  const CardBody = (cbProps) => {
    return (
      <>
        <Cell action={
          cbProps.status ?
            (<Button type="link">开启<Icon type="check-circle" /></Button>) :
            (<Button type="link">关闭<Icon type="delete" /></Button>)
          }>
          <h3>南京楼市</h3>
        </Cell>
        <div>
          <p style={lineTextStyle}>联系人 : 曹建芳</p>
          <p style={lineTextStyle}>手机号 : 187 5565 6565</p>
          <p style={lineTextStyle}>小程序 : 南京楼市</p>
          <p style={lineTextStyle}>服务到期时间 : 2019-09-24</p>
        </div>
      </>
    )
  }

  return (
    <PageHeaderWrapper>
      <div className={Style['flex-box']}>
        <div className={Style['flex-item']}>
          <Card
            style={{width: '560px', boxShadow:'3px 3px 5px #ccc', borderRadius: '12px', overflow: 'hidden'}}
            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
            actions={[
              <Tooltip title="编辑">
                <Icon type="edit" key="edit" />
              </Tooltip>,
              <Tooltip title="权限分配">
                <Icon type="setting" key="rights" />
              </Tooltip>,
              <Tooltip title="重置密码">
                <Icon type="block" key="resetpass" />
              </Tooltip>
            ]}
          >
            <CardBody/>
          </Card>
        </div>
      </div>
    </PageHeaderWrapper>
  )
}
