import React from 'react';
import Table from '../lib/Table';
import Icon from '../../icon';
import { DemoPanel } from '../../../external/demo/index';
import { mockData } from './util';


export default class TableDemo extends React.PureComponent {

  render() {
    return (
      <div>
        <DemoPanel title="基本">
          <Table
            cols={[
              { display: '角色', width: 8 },
              { display: '描述', width: 40 },
              { display: '成员数', width: 5 },
              {
                display: <span>操作
                  <Icon
                    type="question"
                  />
                </span>, width: 20,
              },
            ]}
            data={[
              ['超级管理员', '机构创始人，拥有所有功能的权限，且可以为其他角色自由配置功能。', 1, <a>管理成员</a>],
              ['教学管理员', '机构创始人从所关联的成员中选取，协助管理机构，主要是教务教学相关工作的管理，默认拥有大部分权限。', 62, <a>管理成员</a>],
              ['老师', '主要负责给学生上课，以及准备课程教案和教学资料。', 230, <a>管理成员</a>],
              ['助教', '主要协助老师上课，工作内容包括在课堂上进行班级纪律管理，以及维护班级交流QQ群等。', 232, <a>管理成员</a>],
              ['销售管理员', '销售模块的管理人员，默认拥有查询学员、分配销售人员并查看机构与销售人员的销售相关数据的权限。', 3, <a>管理成员</a>],
              ['教务', '主要负责除了上课之外的大部分教务教学相关工作。', 5, <a>管理成员</a>],
              ['销售', '销售人员，默认拥有查询被分配课程的学员、查看自己的销售数据并进行销售记录的相关权限。', 12, <a>管理成员</a>],
              ['财务', '主要负责机构营收的查询和管理。', 1, <a>管理成员</a>],
              ['自定义1', '自定义1', 1, <div>
                <a>管理成员</a>
                <br />
                <a>编辑角色</a>
                <br />
                <a>删除</a>
                <br />
              </div>],
            ]}
          />
        </DemoPanel>
        <DemoPanel title="复杂表头">
          <Table
            cols={[
              { display: '角色', width: 8 },
              {
                display: <table style={{ width: '100%' }}>
                  <tbody>
                    <tr>
                      <td>A</td>
                      <td>B</td>
                    </tr>
                    <tr>
                      <td colSpan="2">C</td>
                    </tr>
                  </tbody>
                </table>, width: 40,
              },
              { display: '成员数', width: 5 },
              { display: '操作', width: 20 },
            ]}
            data={[
              ['超级管理员', '机构创始人，拥有所有功能的权限，且可以为其他角色自由配置功能。', 1, <a>管理成员</a>],
              ['教学管理员', '机构创始人从所关联的成员中选取，协助管理机构，主要是教务教学相关工作的管理，默认拥有大部分权限。', 62, <a>管理成员</a>],
              ['老师', '主要负责给学生上课，以及准备课程教案和教学资料。', 230, <a>管理成员</a>],
              ['助教', '主要协助老师上课，工作内容包括在课堂上进行班级纪律管理，以及维护班级交流QQ群等。', 232, <a>管理成员</a>],
            ]}
          />
        </DemoPanel>
        <DemoPanel title="跨列">
          <Table
            cols={[
              { display: '角色', width: 8 },
              { display: '描述', width: 80, colspan: 2 },
              { display: '操作', width: 10 },
            ]}
            data={[
              ['超级管理员', '机构创始人，拥有所有功能的权限，且可以为其他角色自由配置功能。', 1, <a>管理成员</a>],
              ['教学管理员', '机构创始人从所关联的成员中选取，协助管理机构，主要是教务教学相关工作的管理，默认拥有大部分权限。', 62, <a>管理成员</a>],
              ['老师', '主要负责给学生上课，以及准备课程教案和教学资料。', 230, <a>管理成员</a>],
              ['助教', '主要协助老师上课，工作内容包括在课堂上进行班级纪律管理，以及维护班级交流QQ群等。', 232, <a>管理成员</a>],
            ]}
          />
        </DemoPanel>
        <DemoPanel title="空值显示为 -">
          <Table
            cols={[
              { display: '角色', width: 8 },
              { display: '操作', width: 10 },
            ]}
            data={[
              ['超级管理员', null],
              ['教学管理员', undefined],
              ['老师', ''],
              ['助教', 0],
            ]}
          />
        </DemoPanel>
        <DemoPanel title="选中">
          <Table
            cols={[
              { display: 'A', width: 45 },
              { display: 'B', width: 50 },
            ]}
            data={mockData(2, 4)}
            canSelect
            onSelectedChange={window.console.log}
          />
          <p>onSelectedChange监听选中的变化数据</p>
        </DemoPanel>
        <DemoPanel title="展示悬浮在表格的正中间">
          <Table
            cols={[
              { display: 'A', width: 50 },
              { display: 'B', width: 50 },
            ]}
            data={mockData(2, 4)}
            overlap={<h1>Hello IMUI</h1>}
          />
        </DemoPanel>
        <DemoPanel title="没有数据">
          <Table
            cols={[
              { display: 'A', width: 50 },
              { display: 'B', width: 50 },
            ]}
            data={[]}
          />
        </DemoPanel>
      </div>
    );
  }
}