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';
import TotalSort from '../../../components/TotalSort';
import Modal from '../../../components/Modal';
import UserTable from '../../../components/UserTable';

const updateColumns = [
  { title: '更新时间', key: '1', width: 120 },
  { title: '位置', key: '2', width: 120 },
  { title: '原内容', key: '3', width: 120 },
  { title: '更改为', key: '4', width: 120 },
  { title: '更新至', key: '5', width: 90 },
];

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}`]()}
        <Modal maskClosable close={false} body={false} width={630} onClose={() => {}}>
          <UserTable
            size="small"
            columns={updateColumns}
            data={[
              {
                1: '2019-07-12 11:38:51',
                2: 'P30 第 20 行',
                3: 'the number of wolf population',
                4: '删除',
                5: '版本3',
              },
              {
                1: '2019-07-12 11:38:51',
                2: 'P30 第 20 行',
                3: 'the number of wolf population',
                4: '删除',
                5: '版本3',
              },
              {
                1: '2019-07-12 11:38:51',
                2: 'P30 第 20 行',
                3: 'the number of wolf population',
                4: '删除',
                5: '版本3',
              },
            ]}
          />
        </Modal>
        <Modal title="评价" onConfirm={() => {}} onCancel={() => {}}>
          <textarea className="b-c-1 w-10 p-10" rows={6} placeholder="您的看法对我们来说很重要！" />
          <div className="b-b m-t-2" />
        </Modal>
        <Modal title="提交成功" confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
          <div className="t-2 t-s-18">
            <Icon type="check" className="t-5 m-r-5" />
            您的每一次反馈都是千行进步的动力。
          </div>
        </Modal>
      </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">
        <TotalSort />
      </div>
    );
  }
}