import React from 'react';
import CollapseTable from '../lib/CollapseTable';
import { DemoPanel } from '../../../external/demo/index';


export default class CollapseTableDemo extends React.PureComponent {

  render() {
    return (
      <div>
        <DemoPanel title="可折叠行表格">
          <CollapseTable
            cols={[
              { display: '结算课程/服务', width: 20 },
              { display: '结算订单数', width: 10 },
              { display: '结算金额', width: 10 },
              { display: '操作', width: 10 },
            ]}
            data={[
              {
                row: ['2016-06-29结算查看明细', 2, '0.04元', <a>详情</a>],
                collapseRows: [
                  ['测试角标的课程', 1, '0.02元', <a>查看明细</a>],
                  ['雅思写作题', 1, '0.02元', <a>查看明细</a>],
                ],
              },
              {
                row: ['2016-05-29结算查看明细', 2, '3.09元', <a>详情</a>],
                collapseRows: [
                  ['支付43王萌勿删', 1, '1.02元', <a>查看明细</a>],
                  ['支付优惠卷测试啊', 1, '0.02元', <a>查看明细</a>],
                  ['课中包退啊', 1, '2.07元', <a>查看明细</a>],
                ],
              },
            ]}
          />
        </DemoPanel>
      </div>
    );
  }
}