import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import UserLayout from '../../../layouts/User';
import UserAction from '../../../components/UserAction';
import menu from '../index';
import Tabs from '../../../components/Tabs';
import More from '../../../components/More';
import Button from '../../../components/Button';
import Switch from '../../../components/Switch';

export default class extends Page {
  initState() {
    return {
      tab: '1',
      sortMap: {},
      filterMap: {},
      data: [
        { num: '30', version: '7', title: 'OG16/17/18/19语法千行', date: '2019-08-31  09:26:13' },
        { num: '30', version: '7', title: 'OG16/17/18/19语法千行', date: '2019-08-31  09:26:13' },
        { num: '30', version: '7', title: 'OG16/17/18/19语法千行', date: '2019-08-31  09:26:13' },
      ],
    };
  }

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

  onSort(value) {
    this.setState({ sortMap: value });
  }

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

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

  renderDetail() {
    const { tab } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          border
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab}
          tabs={[
            { key: '1', title: '资料' },
            { key: '2', title: '机经' },
            { key: '3', title: '模考' },
            { key: '4', title: 'VIP' },
            { key: '5', title: '考分计算器' },
          ]}
          onChange={key => this.onTabChange(key)}
        />
        {this[`renderTab${tab}`]()}
      </div>
    );
  }

  renderTab1() {
    const { data = [], filterMap = {}, sortMap = {} } = this.state;
    return (
      <div className="tab-1-layout">
        <UserAction
          selectList={[
            {
              label: '学科',
              key: '1',
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
            {
              label: '资料形式',
              key: '2',
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
          ]}
          sortList={[{ right: true, label: '销量', key: '1' }, { right: true, label: '更新时间', key: '2' }]}
          sortMap={sortMap}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onSort={value => this.onSort(value)}
          right={
            <div className="email">
              邮箱订阅 <Switch />
            </div>
          }
        />
        <div className="data-layout">
          {data.map(item => {
            return (
              <div className="data-item">
                <Assets name="sun_blue" />
                <div className="fixed">
                  <div className="btns">
                    <Button size="small" radius>
                      阅读
                    </Button>
                    <div className="white">下载</div>
                  </div>
                </div>
                <div className="title">
                  <span>版本{item.version}</span>
                  {item.title}
                </div>
                <div className="date">{item.date}</div>
                <More menu={[{ label: '纠错', key: '1' }, { label: '评价', key: '2' }, { label: '更新', key: '3' }]} />
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  renderTab2() {
    const { data = [] } = this.state;
    return (
      <div className="tab-2-layout">
        <UserAction
          left={
            <div className="total-log">
              <span>最新换库</span>
              <span>2019-07-22</span>
              <span>
                已换库<b>10</b>天
              </span>
            </div>
          }
        />
        <div className="data-layout">
          {data.map(item => {
            return (
              <div className="data-item">
                <Assets name="sun_blue" />
                <div className="title">
                  已更新至<b>{item.num}</b>题
                </div>
                <div className="date">{item.date}</div>
                <More menu={[{ label: '更新', key: '1' }, { label: '反馈', key: '2' }, { label: '评价', key: '3' }]} />
              </div>
            );
          })}
        </div>
        <div className="tip-layout">
          <div className="t1">还未购买本月机经</div>
          <div className="desc">¥ 888 / 月</div>
          <Button radius size="lager" width={150}>
            立即购买
          </Button>
        </div>
        <div className="tip-layout">
          <div className="t2">请于2019-11-20前开通</div>
          <Button radius size="lager" width={150}>
            立即开通
          </Button>
        </div>
      </div>
    );
  }

  renderTab3() {
    return (
      <div className="tab-3-layout">
        <UserAction right={<div className="email">待开通</div>} />
        <div className="tip-layout">
          <div className="t1">未购买</div>
          <div className="desc">¥ 888 / 月</div>
          <Button radius size="lager" width={150}>
            立即购买
          </Button>
        </div>
        <div className="tip-layout">
          <div className="t2">请于2019-11-20前开通</div>
          <Button radius size="lager" width={150}>
            立即开通
          </Button>
        </div>
        <div className="tip-layout">
          <div className="t1">使用中</div>
          <div className="t2">距离到期还有 10 天</div>
        </div>
        <div className="tip-layout">
          <div className="t3">已过期</div>
          <div className="date">2019-05-11 ~ 2019-09-11</div>
          <div className="desc">¥ 800/3个月</div>
          <Button radius size="lager" width={150}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }

  renderTab4() {
    return (
      <div className="tab-4-layout">
        <div className="tip-layout">
          <div className="t2">未购买</div>
          <Button radius size="lager" width={150}>
            立即购买
          </Button>
        </div>
        <div className="tip-layout">
          <div className="t1">使用中</div>
          <div className="desc">2019-05-20 到期</div>
          <Button radius size="lager" width={150}>
            续费
          </Button>
        </div>
        <div className="tip-layout">
          <div className="t1">已过期</div>
          <div className="desc">2019-05-11 ~ 2019-09-11</div>
          <Button radius size="lager" width={150}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }

  renderTab5() {
    return (
      <div className="tab-5-layout">
        <div className="total-sort-num">
          <Icon className="plus" type="plus" />
          <input />
          <Icon className="minus" type="minus" />
        </div>
        <div className="t1">
          预计全球排名<b>94th</b>
        </div>
        <div className="list">
          <div className="item">
            <div className="sort-num">
              <div className="sort-text">Quant :</div>
              <input />
              <Icon className="up" type="caret-up" />
              <Icon className="down" type="caret-down" />
            </div>
            <div className="t2">
              排名<b>94th</b>
            </div>
          </div>
          <div className="item">
            <div className="sort-num">
              <div className="sort-text">Quant :</div>
              <input />
              <Icon className="up" type="caret-up" />
              <Icon className="down" type="caret-down" />
            </div>
            <div className="t2">
              排名<b>94th</b>
            </div>
          </div>
        </div>
      </div>
    );
  }
}