import React, { Component } from 'react';
import { Redirect, Route, Switch, routerRedux } from 'dva/router';
import { connect } from 'dva';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import { getRoutes } from '../../../utils/utils';
@connect()
export default class AccountsPage extends Component {
  handleTabChange = (key) => {
    const { dispatch, match } = this.props;
    switch (key) {
      // 终端课程包
      case 'terminals':
        dispatch(routerRedux.push(`${match.url}/terminals`));
        break;
      // 校区列表
      case 'campus':
        dispatch(routerRedux.push(`${match.url}/campus`));
        break;
      // 即将逾期
      case 'overdue':
        dispatch(routerRedux.push(`${match.url}/overdue`));
        break;
      // 总统计表
      case 'totalList':
        dispatch(routerRedux.push(`${match.url}/totalList`));
        break;
      // 已配置标签终端信息表
      case 'didLabelList':
        dispatch(routerRedux.push(`${match.url}/didLabelList`));
        break;
      default:
        break;
    }
  };
  render() {
    const tabList = [
      {
        key: 'terminals',
        tab: '已开通账号',
      },
      {
        key: 'campus',
        tab: '已开通校区',
      },
      {
        key: 'overdue',
        tab: '即将到期(30天)',
      },
      {
        key: 'didLabelList',
        tab: '已配置标签终端信息表',
      },
      {
        key: 'totalList',
        tab: '总统计表',
      },
    ];

    const { match, routerData, location } = this.props;
    const routes = getRoutes(match.path, routerData);

    return (
      <PageHeaderLayout
        tabList={tabList}
        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
        onTabChange={this.handleTabChange}
      >
        <Switch>
          {routes.map(item => (
            <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
          ))}
          <Redirect exact from="/dashboard/accounts" to="/dashboard/accounts/terminals" />
        </Switch>
      </PageHeaderLayout>
    );
  }
}