import React, { Component } from 'react';
import AdminTable from '../../src/components/table/AdminTable';
// ant-design UI组件 引入
import ReactDOM from 'react-dom';
import Admin from '../../src/components/admin/Admin';
// 导航
import {Menu,Icon,Row,Col,Badge, Avatar,Collapse} from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Panel = Collapse.Panel;
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}
      >
              <h1>Table 表格</h1>
              <p style={{ lineHeight: '40px' }}>展示行列数据</p>
              <h1>功能支持</h1>
              <ol>
              <li>大量数据分段获取及分页展示</li>
              <li>支持数据添加、删除、编辑操作</li>
              <li>支持行级别自定义操作扩展</li>
              </ol>
              <Collapse>
              <Panel header="可展开">
              <p>这是一个基础表格的相关描述</p>
              <p>表格特性,适用场景</p>
              <p>表格数据格式,后台交互描述</p>
              <p>表格功能详细描述</p>
              </Panel>
              </Collapse>
              <Row>
              <AdminTable
              // 数据地址
              fetch={{
                url: './demos/json/table.json',
                method: 'GET',
                catchData: value => value.returnMapList,
                catchTotal: value => value.total,
                defineKeyValue: {
                  key: { value: 'ID', editable: false },
                  name: { value: '姓名', editable: false },
                  age: { value: '年龄', editable: true },
                  address: { value: '地址', editable: true },
                  img: { value: '图片地址', editable: true },
                },
                param:{start:{name:'start',value: 0}, pageSize:{name:'limit',value: 6}}
              }}
              // 列属性
              column={[
                { dataIndex: 'name', title: '姓名',
                  sorter:(a,b)=>a.name.charCodeAt() - b.name.charCodeAt()
                },
                { dataIndex: 'age', title: '年龄',
                  shape: {
                    model: <span />,
                    conversion: (value) => { return { value: value - 50, props: { className: 'red' } }; },
                  }
                },
                { dataIndex: 'address', title: '地址' },
                { dataIndex: 'img',
                  title: '图片类型',
                  shape: {
                    model: <span />
                  }
                }
              ]}
              // 表格最后一列添加编辑功能
              action={{
                title:"操作",
                // 默认方法 编辑/删除
                default: ['edit', 'delete'],
                // 用户自定义方法
                custom: { name: '自定义', func: (line) => { alert(`您将对该行自定义操作: ${line}`); console.log(this.refs.table1.search({a:"b"},"GET","a/b"))}}
              }}
              // 表格id
              showAdd={false}
              showDel={false}
              showSelect={false}
              /*     collapse={{
                     shape: {
                       model: <span />,
                       conversion: (recode) =>
                       {
                         return { value: recode.age + 50, props: { className: 'red' } };
                       },
                     }
                   }}*/
              ref="table1"
              />
              </Row>
      </Admin>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));