import React from 'react';
import './index.less';
import { Switch } from 'antd';
import Page from '@src/containers/Page';
import UserAction from '../../../components/UserAction';
import Tabs from '../../../components/Tabs';
import Filter from '../../../components/Filter';
import Icon from '../../../components/Icon';
import { DataItem } from '../../../components/Item';
import UserTable from '../../../components/UserTable';

const columns = [
  {
    key: '',
    title: '更新时间',
  },
  {
    key: '',
    title: '位置',
  },
  {
    key: '',
    title: '原内容',
  },
  {
    key: '',
    title: '更改为',
  },
  {
    key: '',
    title: '更新至',
  },
];

export default class extends Page {
  initState() {
    return {
      tab: '2',
      filterMap: { one: '1', two: '1' },
      sortMap: {},
      list: [],
      type: [
        { title: '长难句', key: '1', open: true, children: [{ key: '1', title: 'OG19 语法千行' }] },
        { title: '语文 Verbal', key: '2', open: true, children: [{ key: '1', title: 'OG19 语法千行' }] },
        { title: '数学 Quant', key: '3', open: true, children: [{ key: '1', title: 'OG19 语法千行' }] },
      ],
    };
  }

  initData() {}

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

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  onOpen(index) {
    const { type } = this.state;
    type[index].open = !type[index].open;
    this.setState({ type });
  }

  renderView() {
    const { tab } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">资料列表</span>
          <div className="f-r">我的资料</div>
        </div>
        <div className="center content">
          <Tabs
            type="division"
            theme="theme"
            size="small"
            space={2.5}
            width={100}
            border
            active={tab}
            tabs={[{ title: '全部资料', key: '1' }, { title: '更新日志', key: '2' }]}
            onChange={key => this.onChangeTab(key)}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </div>
    );
  }

  renderTab1() {
    const { list = [], sortMap, filterMap } = this.state;
    return [
      <Filter
        filter={filterMap}
        list={[
          {
            key: 'one',
            children: [
              { key: '1', title: '全部' },
              { key: '2', title: '长难句' },
              { key: '3', title: '语文Verbal' },
              { key: '4', title: '数学Quant' },
            ],
          },
          {
            key: 'two',
            children: [
              { key: '1', title: '全部' },
              { key: '2', title: '语法SC' },
              { key: '3', title: '阅读RC' },
              { key: '4', title: '逻辑RC' },
            ],
          },
        ]}
        onFilter={(key, value) => this.onFilter(key, value)}
      />,
      <UserAction
        search
        defaultSearch={filterMap.keyword}
        sortList={[
          { label: '更新时间', key: 'ask_time', fixed: true },
          { label: '销量', key: 'create_time', fixed: true },
        ]}
        sortMap={sortMap}
        onSort={value => this.onSort(value)}
      />,
      <div className="data-list">
        {list.map(item => {
          return <DataItem data={item} />;
        })}
      </div>,
    ];
  }

  renderTab2() {
    const { type = [], list = [], filterMap } = this.state;
    return [
      <div className="update-search">
        <UserAction search defaultSearch={filterMap.keyword} />
      </div>,
      <div className="update-log">
        <div className="left">
          {type.map((item, index) => {
            return (
              <div className="block">
                <div className="title" onClick={() => this.onOpen(index)}>
                  {item.title}
                  <div className="f-r">
                    {item.open ? <Icon name="arrow-up" noHover /> : <Icon name="arrow-down" noHover />}
                  </div>
                </div>
                <div className={`list ${item.open ? 'open' : ''}`}>
                  {item.children.map(child => {
                    return <div className="item">{child.title}</div>;
                  })}
                </div>
              </div>
            );
          })}
        </div>
        <div className="right">
          {list.map(item => {
            return (
              <div className="item">
                <div className="m-b-5">
                  <span className="t-1 t-s-18 f-w-b">{item.title}</span>
                  <div className="f-r">
                    <span className="m-r-5">邮箱订阅</span>
                    <Switch />
                    <span className="m-l-5 t-4">纠错</span>
                  </div>
                </div>
                <UserTable size="small" columns={columns} />
              </div>
            );
          })}
        </div>
      </div>,
    ];
  }
}