import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPLayout } from '../../src/index';

export default {
  title: '组件/布局/OPLayout',
  component: OPLayout,
  parameters: {
    docs: {
      description: {
        component: `
        设计思路(by雷茂)：
        top、left、right、bottom 可以决定其父容器的布局但是容器的布局优先级 props ver > top、left、right、bottom计算 > 默认（hoz）
        容器的子项 除了在布局方向有一定的分割逻辑，其在另一个方向都是自动铺满的
        分割逻辑是 prop size 固定大小 > 默认逻辑 【 top、left、right、bottom默认是自动随内容撑开content或者随意写的div 都是自动获取剩余空间 】
        interval={5}子元素之间就会有间隔`,
      },
    },
  },
} as ComponentMeta<typeof OPLayout>;

const { Top, Bottom, Left, Right, Content } = OPLayout;

export const 布局: ComponentStory<typeof OPLayout> = (): JSX.Element => {
  return (
    <div>
      <div style={{ height: 600, backgroundColor: 'red' }}>
        <OPLayout>
          <Top size={40} middle center>
            我是顶部
          </Top>
          <Content size={12}>我是中间1</Content>
          <Content interval={5}>
            <Left
              style={{ backgroundColor: 'yellow' }}
              size={150}
              middle
              center
            >
              2 content left
            </Left>
            <Content style={{ backgroundColor: 'yellow' }} center middle>
              2 content content
            </Content>
            <Content style={{ backgroundColor: 'yellow' }} center middle>
              2 content content
            </Content>
            <Right style={{ backgroundColor: 'yellow' }} size={150} middle>
              2 content right
            </Right>
          </Content>
          <Bottom size={100} middle center>
            <div>我是底部</div>
          </Bottom>
        </OPLayout>
      </div>
      <div>
        <OPLayout style={{ height: 600, backgroundColor: '#532389' }}>
          <Top style={{ color: '#fff' }} middle center size={88}>
            间隔使用的案例
          </Top>
          <Content interval={10} hoz>
            <Content
              interval={2}
              arrange={4}
              arrangeInterval={3}
              style={{ background: 'yellow' }}
            >
              <Content style={{ background: 'green' }}>1</Content>
              <Content style={{ background: 'green' }}>2</Content>
              <Content style={{ background: 'green' }}>3</Content>
              <Content style={{ background: 'green' }}>4</Content>
              <Content style={{ background: 'green' }}>5</Content>
              <Content style={{ background: 'green' }}>6</Content>
            </Content>
            <Content interval={10} style={{ background: 'yellow' }}>
              <Top style={{ background: 'red' }} center middle>
                右头
              </Top>
              <Content style={{ background: 'red' }} center middle>
                右身子
              </Content>
              <Bottom style={{ background: 'red' }} center middle>
                右底
              </Bottom>
            </Content>
          </Content>
          <Content interval={10} hoz>
            <Content interval={2} arrange={4} style={{ background: 'yellow' }}>
              <div style={{ background: 'green', marginBottom: 2 }}>1</div>
              <div style={{ background: 'green', marginBottom: 2 }}>2</div>
              <div style={{ background: 'green', marginBottom: 2 }}>3</div>
              <div style={{ background: 'green', marginBottom: 2 }}>4</div>
              <div style={{ background: 'green', marginBottom: 2 }}>5</div>
              <div style={{ background: 'green', marginBottom: 2 }}>6</div>
            </Content>
            <Content interval={10} style={{ background: 'yellow' }}>
              <Top style={{ background: 'red' }} center middle>
                右头
              </Top>
              <Content style={{ background: 'red' }} center middle>
                右身子
              </Content>
              <Bottom style={{ background: 'red' }} center middle>
                右底
              </Bottom>
            </Content>
          </Content>
        </OPLayout>
      </div>
    </div>
  );
};