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';
import UserAction from '../../../components/UserAction';
import Tabs from '../../../components/Tabs';

const columns = [{ title: '消息', key: 'content' }, { title: '类型', key: 'type' }, { title: '发送时间', key: 'date' }];

export default class extends Page {
  initState() {
    return {
      tab: '1',
      filterMap: {},
      data: [
        { content: '您的会员即将到期，请及时续费', type: '动态消息', date: '2019-07-12 \n 11:38:51' },
        {
          content: '请尽快完成作业 \n 消息详情消息详情消息详情消息详情 ',
          type: '系统消息',
          date: '2019-07-12 \n 11:38:51',
        },
      ],
    };
  }

  onFilter(filterMap) {
    this.setState({ filterMap });
  }

  onTabChange(tab) {
    this.setState({ tab });
  }

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

  renderTable() {
    const { tab, data, filterMap } = this.state;
    return (
      <div className="table-layout">
        <UserAction
          left={
            <Tabs
              type="tag"
              theme="white"
              size="small"
              space={5}
              width={54}
              active={tab}
              tabs={[{ key: '1', title: '全部' }, { key: '2', title: '未读' }]}
              onChange={key => this.onTabChange(key)}
            />
          }
          right={<span>全部已读</span>}
          selectList={[
            {
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserTable size="small" columns={columns} data={data} />
      </div>
    );
  }
}