import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Admin from '../../src/components/admin/Admin';
// 导航
import {Menu,Icon,Row,Col,Badge, Avatar} from 'antd';
import AdminChart from '../../src/components/chart/AdminChart';
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() {
    return (
      <Admin
        logo="./pubic/base/imgs/ezviz.png"
        name="萤石"
        menu={{
          url: './demos/navdata.json',
          method: 'GET'
        }}
        // 头部的内容
        headerContent={headerContent}
      >
        {/* 用户内容区域 */}
          <Row>
            <h1>Line 折线图</h1>
            <p>1.直线图是用直线将一系列的数据点连接的图表，直线图经常用来展现随着时间变化的数据。</p>
            <p>2.为适应不同使用场景,折线图可根据需求选择两个模块,AdminChart以及AdminStockChart</p>
          </Row>
          <Row>
            <h2>1. 基本折线图</h2>
            <AdminChart
              id="chart1"
              fetch={{
                url: './demos/json/chart/line1.json',
                method: 'GET',
                catchData: value => value.source,
                param:{"start": 0}
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'line'}}
              }}
              title={{text: "1.基本折线图",style:{fontWeight:'bold'}}}
              subtitle={{text: "多维折线图"}}
              yAxis={{title:{text: 'Y轴坐标2'}}}
              legend={{enabled: true, align: 'center', verticalAlign: 'bottom', layout: "horizontal"}}
            />
          </Row>
          <Row>
            <h2>2. 基本折线图(密集数据)</h2>
            <AdminChart
              id="chart2"
              fetch={{
                url: './demos/json/chart/line2.json',
                method: 'GET',
                catchData: value => value,
                param:{"start": 0}
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'line'}}
              }}
              title={{text: "2.基本折线图(密集数据)",style:{fontWeight:'bold'}}}
              subtitle={{text: "单条数据,数据量2000"}}
              xAxis={{title: {text: 'X轴坐标'} }}
              yAxis={{title:{text: 'Y轴坐标2'}}}
            />
          </Row>
          <Row>
            <h2>3. 曲线图及时间作为坐标轴</h2>
            <p>时间为x轴</p>
            <p>自定义开始时间,时间间隔</p>
            <AdminChart
              id="chart3"
              fetch={{
                url: './demos/json/chart/line3.json',
                method: 'GET',
                catchData: value => value,
                param:{"start": 0}
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'spline'}}
              }}
              title={{text: "1.曲线图",style:{fontWeight:'bold'}}}
              subtitle={{text: '时间坐标轴'}}
              xAxis={{title: {text: 'X轴坐标'},type:'datetime' }}
              yAxis={{title:{text: 'Y轴坐标2'}}}
              plotOptions={{spline: {marker: {enabled: false},
                pointInterval: 1000*3600,
                pointStart: Date.UTC(2015, 4, 31, 2, 20, 0,0)
              }
              }}
            />
          </Row>
          <Row>
            <h2>4. 标记数据范围</h2>
            <p>标记指定范围数据带</p>
            <p>自定义配置数据带颜色,标题等相关参数</p>
            <AdminChart
              id="chart4"
              fetch={{
                url: './demos/json/chart/line3.json',
                method: 'GET',
                catchData: value => value,
                param:{"start": 0}
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'spline'}}
              }}
              title={{text: "1.标记特定数据带",style:{fontWeight:'bold'}}}
              subtitle={{text: "单条数据,数据量2000"}}
              xAxis={{title: {text: 'X轴坐标'},type:'datetime' }}
              yAxis={{title:{text: 'Y轴坐标2'},plotBands:[{ // Light air
                from: 5,
                to: 7.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                  text: '大于5小于7.5数据范围范围',
                  style: {
                    color: '#606060'
                  }
                }
              }]}}
              plotOptions={{spline: {marker: {enabled: false},
                pointInterval: 1000*3600,
                pointStart: Date.UTC(2015, 4, 31, 2, 20, 0,0)
              }
              }}
            />
          </Row>
          <Row>
            <h2>5. 数据列分区</h2>
            <p>为指定范围数据进行区别展示</p>
            <p>自定义配置数据分区颜色,线属性等相关参数</p>
            <AdminChart
              id="chart5"
              fetch={{
                url: './demos/json/chart/line4.json',
                method: 'GET',
                catchData: value => value.data,
                param:{"start": 0}
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'spline'}},
                zones: [{
                  value: 0,
                  color: '#f7a35c',
                  dashStyle: 'dot'
                }, {
                  value: 10,
                  color: '#7cb5ec'
                },{
                  color: '#90ed7d'
                },
                ]
              }}
              title={{text: "1.数据列分区",style:{fontWeight:'bold'}}}
              subtitle={{text: "区分不同范围数据"}}
              xAxis={{title: {text: 'X轴坐标'}}}
              yAxis={{title:{text: 'Y轴坐标2'}}}
            />
          </Row>
          <Row>
            <h2>6. Stock折线图</h2>
            <p>更多交互，数据展现</p>
            <p>大数据量的时间轴图表</p>
            <AdminChart
              category={"highStock"}
              id="chart6"
              fetch={{
                url: './demos/json/chart/stock/stock1.json',
                method: 'GET',
                catchData: value => value.source,
                param:{"start": 0}
              }}
              rangeSelector={{
                buttons: [{
                  type: 'month',
                  count: 1,
                  text: '1个月'
                }, {
                  type: 'month',
                  count: 3,
                  text: '3个月'
                }, {
                  type: 'month',
                  count: 6,
                  text: '半年'
                }, {
                  type: 'ytd',
                  text: '季度'
                }, {
                  type: 'year',
                  count: 1,
                  text: '1年'
                }, {
                  type: 'all',
                  text: '全部'
                }],
                inputDateFormat: "%Y %b %e,"
              }}
              series={{
                convert: (obj)=> {return {name: obj.name, data: obj.data, type:'spline'}},
              }}
              title={{text: "1.数据列分区",style:{fontWeight:'bold'}}}
              subtitle={{text: "区分不同范围数据"}}
              xAxis={{title: {text: 'X轴坐标'},type:'datetime'}}
              yAxis={{title:{text: 'Y轴坐标2'}}}
            />
          </Row>
      </Admin>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));