/**
 * title: "带Tab卡片"
 * description: "可承载更多内容，标题区可选"
 */
import React from 'react';
import { Card, Tab } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  color: '#aaaaaa',
  position: 'relative',
  height: '100%',
  lineHeight: '100%',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

const itemStyle = {
  height: '200px',
  margin: 16,
};

const CardContent = () => (
  <div style={cardContent}>
    <div style={contentext}>Card Content</div>
  </div>
);

export default () => {
  return (
    <Card style={{ width: 500 }} free>
      <Tab size="small">
        <Tab.Item title="当前选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item title="可选选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item title="悬浮选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item disabled title="禁用选项">
          <CardContent />
        </Tab.Item>
      </Tab>
    </Card>
  );
};