import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Menu, Icon ,Row, Col,Input,Badge,Avatar,Button, InputNumber} from 'antd';
//代码高亮
import SyntaxHighlighter from 'react-syntax-highlighter';
import { github} from 'react-syntax-highlighter/dist/styles';
import { FormArea, Item } from '../../src/components/form';
import Admin from '../../src/components/admin/Admin';
// 导航
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

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() {
    const inputCode =[
      `import {Input} from 'antd';\nReactDOM.render(\n  <Input placeholder="basic input"/>,\n  document.getElementById('app')\n);`,
      `import {Input} from 'antd';\nReactDOM.render(\n  <div>\n    <Input size="large" placeholder="large size"/>\n    <Input size="default" placeholder="default size"/>\n    <Input size="small" placeholder="small size"/>\n  </div>,\n  document.getElementById('app')\n);`,
      `import {Input} from 'antd';\nReactDOM.render(\n  <Input.Group>\n    <Col span={12}>\n      <Input placeholder="input group"/>\n    </Col>\n    <Col span={12}>\n      <Input placeholder="input group"/>\n    </Col>\n  </Input.Group>,\n  document.getElementById('app')\n);`,
      `import {Input} from 'antd';\nReactDOM.render(\n  <Col>\n    <Input \n      placeholder="input your name"\n      prefix={<Icon type="user"}/>\n    <Input \n      placeholder="input your mail"\n      prefix={<Icon type="mail"}/>\n    <Input \n      type="password"\n      placeholder="input your password"\n      prefix={<Icon type="lock"}/>\n  </Col>\n    />,\n  document.getElementById('app')\n);`,
      `import {Input} from 'antd';\nReactDOM.render(\n  <Input.Search \n    placeholder="input the search value" \n    onSearch=(value)=>console.log(value)/>,\n  document.getElementById('app')\n);`,
      `import {Input} from 'antd';\nReactDOM.render(\n  <Input.TextArea \n    placeholder="input the text" \n    autosize={{minRows: 2, maxRows: 6}}/>,\n  document.getElementById('app')\n);`,
    ];
    const dateCode =[
      `import {TimePicker} from 'antd';\nReactDOM.render(\n  <TimePicker \n    placeholder="select time"/>,\n  document.getElementById('app')\n);`,
      `import {DatePicker} from 'antd';\nReactDOM.render(\n  <div>\n    <DatePicker  placeholder="日期选择"/>\n    <DatePicker.MonthPicker  placeholder="月份选择"/>\n    <DatePicker.RangePicker />\n  </div>,\n  document.getElementById('app')\n);`,
    ];
    const validCode =[
      `import FormArea from '../../../components/common/form/FormArea';\nimport Item from '../../../components/common/form/Item';\n ...\n<FormArea>\n  <Item\n    id="email"\n    name="邮箱"\n    validator={[{required:true,message:"请输入邮箱"},{type:'email',message:"邮箱格式有误"}]}\n    shape={<Input placeholder="输入任何字符测试"/>}>\n  </Item>\n  <Item\n    id="string"\n    name="字符串长度验证"\n    validator={[{required:true,message:"不能为空"},{max:20,message:"长度不足10"},{max:20,message:"长度超过20"}]}\n    shape={<Input placeholder="输入任何字符测试"/>}>\n  </Item>\n  <Item\n    id="url"\n    name="url验证"\n    validator={[{required:true,message:"请输入url"},{type:'url',message:"请输入正确格式url"}]}\n    shape={<Input placeholder="输入任何字符测试"/>}>\n  </Item>\n  <Item\n    id="number"\n    name="数值验证"\n    validator={[{required:true,message:"请输入数值"}]}\n    shape={<NumberInput min={1} max={10}/>}>\n  </Item>\n  <Item\n    id="phone"\n    name="自定义正则校验"\n    validator={[{required:true,message:"请输入"},{pattern:/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,message:"手机号格式有误"}]}\n    shape={<Input placeholder="输入任何字符测试"/>}>\n  </Item>\n</FormArea>`
    ];
    return (
      <Admin
        logo="./src/base/imgs/ezviz.png"
        name="萤石"
        menu={{
          url: './demos/json/navdata.json',
          method: 'GET'
        }}
        // 头部的内容
        headerContent={headerContent}
      >
          <h1>表单元素</h1>
          <p style={{lineHeight:'40px'}}>数据收集、校验和提交功能，包含复选框、单选框、输入框、下拉选择框等元素。</p>
          <h1>功能支持</h1>
          <ol>
            <li>极简易元素创建.</li>
            <li>简约多样的视觉效果.</li>
            <li>轻松配置数据校验.</li>
          </ol>
          <h1>快速上手</h1>
          <h2>输入框</h2>
          <p>包含基本输入框,大、中、小尺寸输入框,组合输入框,图标输入框基本使用</p>
          <Row className="example-flex" style={{maxHeight: 1200}}>
            <Col span={10} className="example-container">
              <Row >
                <Col>
                  <span>基本输入框:</span>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Input placeholder="basic input"/>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {inputCode[0]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
            <Col span={10} className="example-container">
              <Row>
                <Col>
                  <span>多规格输入框:</span>
                </Col>
              </Row>
              <Row>
                <Col>
                  <div className="example-input">
                    <Input size="large" placeholder="large size" />
                    <Input placeholder="default size" />
                    <Input size="small" placeholder="small size" />
                  </div>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {inputCode[1]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
            <Col span={10} className="example-container">
              <Row>
                <Col>
                  <span>组合输入框:</span>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Input.Group>
                    <Col span={12}>
                      <Input placeholder="input group"/>
                    </Col>
                    <Col span={12}>
                      <Input />
                    </Col>
                  </Input.Group>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {inputCode[2]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
            <Col span={10} className="example-container">
              <Row>
                <Col>
                  <span>输入框前缀后缀:</span>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Input
                    placeholder="Enter your userName"
                    prefix={<Icon type="user" />}/>
                  <Input
                    placeholder="Enter your email"
                    prefix={<Icon type="mail"/>} />
                  <Input
                    type="password"
                    placeholder="Enter your password"
                    prefix={<Icon type="lock"/>} />
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    { inputCode[3] }
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
          </Row>
          {/*其他输入框*/}
          <h2>搜索、文本输入框</h2>
          <p>包含搜索框,文本输入基本使用</p>
          <Row className="example-flex" style={{maxHeight: 600}}>
            <Col span={10} className="example-container">
              <Row >
                <Col>
                  <span>搜索框:</span>
                </Col>
              </Row>
              <Row >
                <Col>
                  <Input.Search
                    placeholder="input Search value"
                    onSearch={value => console.log(value)}/>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {inputCode[4]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
            <Col span={10} className="example-container">
              <Row >
                <Col>
                  <span>文本输入:</span>
                </Col>
              </Row>
              <Row >
                <Col>
                  <Input.TextArea
                    placeholder="input Search value"
                    autosize={{ minRows: 2, maxRows: 6 }}
                  />
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {inputCode[5]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
          </Row>
          {/*输入验证-start*/}
          <h2>输入验证</h2>
          <p>用户输入实时监听.</p>
          <p>自定义校验规则及提示内容.</p>
          <p>美观、优雅、简便.</p>
          <Row className="example-flex" style={{maxHeight: 1200}}>
            <Col span={10} className="example-container">
              <Row >
                <Col>
                  <span>验证输入框:</span>
                </Col>
              </Row>
              <Row >
                <Col>
                  <FormArea>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="email"
                      name="邮箱"
                      validator={[{required:true,message:"请输入邮箱"},{type:'email',message:"邮箱格式有误"}]}
                      shape={<Input placeholder="输入任何字符测试"/>}/>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="string"
                      name="字符串长度验证"
                      validator={[{required:true,message:"不能为空,请输入10~12位字符串"},{min:10,message:"字符串长度不足"},{max:20,message:"字符串超过限制"}]}
                      shape={<Input placeholder="输入任何字符测试"/>}/>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="url"
                      name="url格式验证"
                      validator={[{required:true,message:"不能为空"},{type:"url",message:"请输入合法url"}]}
                      shape={<Input placeholder="输入任何字符测试"/>}/>
                    <Item
                      hasFeedback={true}
                      id="number"
                      name="数值限制,格式验证"
                      validator={[{required:true,message:"请输入数字"},{type:'number',message:"数字格式有误"}]}
                      shape={<InputNumber min={1} max={10}/>}
                    />
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="userdefine"
                      name="自定义正则校验"
                      validator={[{required:true,message:"不能为空"},{pattern:/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,message:"手机号格式有误"}]}
                      shape={<Input placeholder="须符合: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/"/>}/>
                  </FormArea>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {validCode[0]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
            <Col span={10} className="example-container">
              <Row >
                <Col>
                  <span>验证输入框:</span>
                </Col>
              </Row>
              <Row >
                <Col>
                  <FormArea
                    submit={<Button type="primary">验证通过?</Button>}>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="email"
                      name="邮箱"
                      validator={[{required:true,message:"请输入邮箱"},{type:'email',message:"邮箱格式有误"}]}
                      shape={<Input prefix={<Icon type="user"/>} placeholder="输入邮箱"/>}/>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="password0"
                      name="密码"
                      validator={[{required:true,message:"不能为空"},{min:10,message:"密码长度不足"}]}
                      shape={<Input type="password" prefix={<Icon type="lock"/>} placeholder="请输入密码"/>}/>
                  </FormArea>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {dateCode[0]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
          </Row>
          <Row className="example-flex" style={{maxHeight: 1200}}>
            <Col span={24} className="example-container">
              <Row >
                <Col>
                  <span>验证输入框:</span>
                </Col>
              </Row>
              <Row >
                <Col>
                  {/*获取表单内值*/}
                  <Button onClick={()=>console.log(this.formRef.props.form.getFieldsValue())}>获取表单值</Button>
                  <FormArea
                    func = {(value) => console.log(value)}
                    submit={<Button type="primary">验证通过?</Button>}
                    layout="inline"
                    wrappedComponentRef={(inst) => this.formRef = inst}
                  >
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="email"
                      name="邮箱"
                      validator={[{required:true,message:"请输入邮箱"},{type:'email',message:"邮箱格式有误"}]}
                      shape={<Input prefix={<Icon type="user"/>} placeholder="输入邮箱"/>}/>
                    <Item
                      hasFeedback={true}
                      placeholder="placeholder"
                      id="password1"
                      name="密码"
                      validator={[{required:true,message:"不能为空"},{min:10,message:"密码长度不足"}]}
                      shape={<Input type="password" prefix={<Icon type="lock"/>} placeholder="请输入密码"/>}/>
                  </FormArea>
                </Col>
              </Row>
              <Row>
                <Col>
                  <h3 className="demo-area">使用示例:</h3>
                  <SyntaxHighlighter
                    style={github}>
                    {dateCode[0]}
                  </SyntaxHighlighter>
                </Col>
              </Row>
            </Col>
          </Row>
          <h1>无验证输入</h1>
          {/*
            <Button onClick={()=>console.log(this.formRef.props.form.getFieldsValue())}>获取表单值</Button>
                    <FormArea
                      func = {(value) => console.log(value)}
                      submit={<Button type="primary">验证通过?</Button>}
                      layout="inline"
                      wrappedComponentRef={(inst) => this.formRef = inst}
                    >
            */}
          <Row >
            <Col>
              <Button onClick={()=>this.getFieldValue(this.normalForm.props.form.getFieldsValue())}>获取表单值</Button>
              <FormArea
                wrappedComponentRef={(inst) => this.normalForm = inst}
              >
                <Item
                  id="email"

                  shape={<Input  placeholder="输入邮箱"/>}
                />
                <Item
                  id="password3"
                  shape={<Input  placeholder="请输入密码"/>}
                />
              </FormArea>
            </Col>
          </Row>
      </Admin>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));