import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import UserLayout from '../../../layouts/User';
import menu from '../index';
import UserTable from '../../../components/UserTable';

const columns = [
  { title: '订单编号', key: 'no' },
  { title: '服务', key: 'title' },
  { title: '购买时间', key: 'date' },
  { title: '付款方式', key: 'method' },
  { title: '付款金额', key: 'money' },
];

export default class extends Page {
  initState() {
    return {
      data: [
        { no: '-', title: 'VIP会员', date: '2019-07-12 \n 11:38:51', method: '实名认证赠送', money: 0 },
        { no: '12930219321321321', title: '教学资料-01', date: '2019-07-12 \n 11:38:51', method: '支付宝', money: 200 },
        { no: '12930219321321321', title: '千行课程', date: '2019-07-12 \n 11:38:51', method: '银行付款', money: 0 },
      ],
    };
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { data } = this.state;
    return (
      <div className="table-layout">
        <UserTable size="small" columns={columns} data={data} />
      </div>
    );
  }
}