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 AdminMap from '../../src/components/chart/AdminMap';
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="./src/base/imgs/ezviz.png"
        name="萤石"
        menu={{
          url: './demos/json/navdata.json',
          method: 'GET'
        }}
        // 头部的内容
        headerContent={headerContent}
      >
        {/* 用户内容区域 */}
        <Row>
          <Col>
            <h1>中国地图</h1>
            <AdminMap
              category="highMap"
              map="world"
              id="chart1"
              tooltip={{
                pointFormat: '{point.code}: {point.value}/km²'
              }}
              series={{
                dataLabels: {
                  enabled: true,
                  color: 'white',
                  format: '{point.code}'
                },
              }}
              mapNavigation={{
                enabled: true
              }}
              colorAxis={{
                min: 1,
                type: 'logarithmic',
                minColor: '#EEEEFF',
                maxColor: '#000022',
                stops: [
                  [0, '#EFEFFF'],
                  [0.67, '#4444FF'],
                  [1, '#000022']
                ]
              }}
              fetch={{
                url: './demos/json/chart/map/map2.json',
                method: 'GET',
                catchData: value => value,
                param: {"start": 0}
              }}
            />
          </Col>
        </Row>
      </Admin>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));