import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Menu, Icon ,Row, Col,Input,Avatar,Collapse,Badge} from 'antd';
//代码高亮
import SyntaxHighlighter from 'react-syntax-highlighter';
import { github} from 'react-syntax-highlighter/dist/styles';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Panel = Collapse.Panel;
//布局演示元素
const DemoBox = props => <p style={{background:props.color,height:props.value,color:'white',textAlign:'center'}}>{props.children}</p>

import Admin from '../../src/components/admin/Admin';

const headerContent =(
  <Row>
    <Col span={8} offset={11}>
      <Menu
        onClick={()=>console.log("click")}
        selectedKeys={['alipay']}
        mode="horizontal"
      >
        <Menu.Item key="item1">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">主导航2</a>
        </Menu.Item>
        <Menu.Item key="item2">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">主导航2</a>
        </Menu.Item>
        <Menu.Item key="item3">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">主导航3</a>
        </Menu.Item>
      </Menu>
    </Col>
    <Col span={2}>
      <Badge count={9}>
        <a href="#" className="head-example">
          <Icon type="notification" style={{fontSize:24,width:30,height:30}}/>
        </a>
      </Badge>
    </Col>
    <Col span={3}>
      <Menu
        onClick={()=>console.log("click")}
        selectedKeys={['alipay']}
        mode="horizontal"
      >
        <SubMenu title={<span><Avatar shape="square" icon="user" /></span>}>
          <MenuItemGroup title="用户中心">
            <Menu.Item key="setting:1">登录</Menu.Item>
            <Menu.Item key="setting:2">注销</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="设置中心">
            <Menu.Item key="setting:3">个人信息</Menu.Item>
            <Menu.Item key="setting:4">个人设置</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
      </Menu>
    </Col>
  </Row>
)

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Admin
        logo="./src/base/imgs/ezviz.png"
        name="萤石"
        menu={{
          url: './demos/json/navdata.json',
          method: 'GET'
        }}
        // 头部的内容
        headerContent={headerContent}
      >
        <Row>
          <h1>布局方案</h1>
          <ul>
            <li><p>为您提供一套布局方案,通过最简易的方式,完成页面的布局,减少不必要的css定位操作.</p></li>
            <li><p>区域按照 24 等分的原则进行划分,可以根据比例自由调整元素占宽比,元素位置偏移量等</p></li>
            <li><p>通过<code>Row</code>标签在水平方向上建立一行,该行平均划分为24*1<code>Col</code>列组合</p></li>
            <li><p> Col 可通过属性的方式定义位置、跨列数目,从而实现定位及元素宽度规格定义</p></li>
            <li><p>你的内容应当放置于 Col 内，作为规范，保持 Col 可以作为row的直接元素</p></li>
            <li><p>保持一个Row内Col总和在24以内,如超过该值,将另起一行,破坏布局规则</p></li>
          </ul>
        </Row>
        <Row>
          <h1>快速上手</h1>
          <h2>简单结构布局</h2>
        </Row>
        <Collapse>
          <Panel header="1.弹性布局居中">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="center">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="center"  style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="2.弹性布局环绕--起止无间隔">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-between">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="space-between"  style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="3.弹性布局环绕--起止间隔自适应">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-between">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="space-around"  style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
          <Col span={6} >
            <DemoBox value={200} color="powderblue"></DemoBox>
          </Col>
          <Col span={2} >
            <DemoBox value={200} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="4.弹性布局--顶部对齐">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-around" align="top">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="space-around" align="top" style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="5.弹性布局--垂直居中">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-around" align="middle">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="space-around" align="middle" style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="6.弹性布局--底部对齐">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-around" align="bottom">\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n  <Col span={4}>容器内容</Col>\n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row type="flex" justify="space-around" align="bottom" style={{marginTop:20,border:"1px solid skyblue"}}>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={50} color="powderblue"></DemoBox>
          </Col>
          <Col span={4} >
            <DemoBox value={100} color="skyblue"></DemoBox>
          </Col>
        </Row>
        <Collapse>
          <Panel header="7.弹性布局--高级应用">
            <SyntaxHighlighter
              style={github}>
              {`<Row type="flex" justify="space-around" justify="start" align="middle">\n  <Col span={1}>容器内容</Col>\n  <Col span={1}>容器内容</Col>\n  <Col span={1}>容器内容</Col>\n  <Col span={1}>容器内容</Col>\n ...  \n</Row>`}
            </SyntaxHighlighter>
          </Panel>
        </Collapse>
        <Row  style={{marginTop:20,border:"1px solid skyblue"}} type="flex" justify="start" align="middle">
          <Col span={1}>
            <DemoBox value={30} color="powderblue">1</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">2</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="powderblue">3</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">4</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="powderblue">5</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">6</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="powderblue">7</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">8</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="powderblue">9</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">10</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="powderblue">11</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">12</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="powderblue">13</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">14</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="powderblue">15</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">16</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="powderblue">17</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">18</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="powderblue">19</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">20</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="powderblue">21</DemoBox>
          </Col>
          <Col span={1} >
            <DemoBox value={30} color="skyblue">22</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="skyblue">23</DemoBox>
          </Col>
          <Col span={1}>
            <DemoBox value={30} color="skyblue">24</DemoBox>
          </Col>
        </Row>
      </Admin>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));