import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Footer from '../../../components/Footer';
import { Contact, AnswerCarousel, Comment } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import UserTable from '../../../components/UserTable';
import ProgressText from '../../../components/ProgressText';
import { OpenText } from '../../../components/Open';
import Video from '../../../components/Video';

export default class extends Page {
  initState() {
    this.columns = [
      {
        key: '1',
        title: '学习内容',
      },
      {
        key: '2',
        title: '预习作业',
      },
      {
        key: '3',
        title: '进展',
      },
      {
        key: '4',
        title: '最近学习',
      },
      {
        key: '5',
        title: '笔记',
      },
      {
        key: '6',
        title: '问答',
      },
    ];
    return {
      tab: '1',
      rightTab: '1',
      key: '1',
      add: false,
      list: [{ key: '1' }, { key: '2' }, { key: '3' }],
      progress: 0,
      data: { title: '语法SC系统授课—课时10：逻辑语义解题专题讲解（1）' },
    };
  }

  onChangeRightTab(rightTab) {
    this.setState({ rightTab });
  }

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

  onChangeItem(key) {
    this.setState({ key });
  }

  onVideoAction(key) {
    const { rightTab, showTab, showQuestion, showNote } = this.state;
    switch (key) {
      case 'question':
        return this.setState({ showQuestion: !showQuestion });
      case 'note':
        return this.setState({ showNote: !showNote });
      case 'answer':
        return this.setState({ showTab: rightTab === '1' ? !showTab : true, rightTab: '1' });
      case 'list':
        return this.setState({ showTab: rightTab === '2' ? !showTab : true, rightTab: '2' });
      default:
        return '';
    }
  }

  renderView() {
    const { base = {}, data = {}, add, progress, rightTab, showTab, showQuestion, showNote } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部套餐 > {data.title} > <span className="t-1">课程详情</span>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20">
            {data.title}
            <div className="action f-r">
              <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
                立即购买
              </Button>
              <Button theme="default" radius size="lager" disabled={data.add || add} onClick={() => this.add()}>
                <Assets name="add" />
              </Button>
            </div>
          </div>
          <div className="t-2 m-b-1">授课老师：李奕都</div>
          <div className="detail">
            <div className="left">
              <div hidden={progress === 0} className="left-top">
                <span className="d-i-b m-r-1">预习作业</span>
                <span className="d-i-b m-r-2">
                  <ProgressText width={480} size="small" progress={progress} />
                </span>
                <Button className="f-r" radius>
                  做题
                </Button>
              </div>
              <div className="video-layout">
                <Video
                  src="/01.mp4"
                  btnList={[
                    { title: '提问', key: 'question', active: showQuestion },
                    {
                      key: 'answer',
                      render(active) {
                        return <Assets name={active ? 'question_on' : 'question_off'} />;
                      },
                      full: true,
                      active: showTab && rightTab === '1',
                    },
                    { title: '笔记', key: 'note', active: showNote },
                    { title: '课表', key: 'list', full: true, active: showTab && rightTab === '2' },
                  ]}
                  onAction={key => this.onVideoAction(key)}
                  onFullChange={() => this.setState({ showTab: true, rightTab: '1' })}
                >
                  <div hidden={!showTab} className="video-fixed tab-warpper">
                    <Tabs
                      type="division"
                      theme="gray"
                      space={2.5}
                      active={rightTab}
                      tabs={[{ title: '精选问答', key: '1' }, { title: '课时列表', key: '2' }]}
                      onChange={key => this.onChangeRightTab(key)}
                    />
                    <div className="tab-body">{this[`renderRightTab${rightTab}`]()}</div>
                  </div>
                </Video>
              </div>
            </div>
            <div className={`right ${progress > 0 ? 'progress' : ''}  tab-warpper`}>
              <Tabs
                type="division"
                theme="gray"
                space={2.5}
                active={rightTab}
                tabs={[{ title: '精选问答', key: '1' }, { title: '课时列表', key: '2' }]}
                onChange={key => this.onChangeRightTab(key)}
              />
              <div className="tab-body">{this[`renderRightTab${rightTab}`]()}</div>
            </div>
          </div>
          <UserTable columns={this.columns} />
        </div>
        <div className="bottom">
          <div className="content">{this.renderTab()}</div>
        </div>
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }

  renderRightTab1() {
    const { list = [] } = this.state;
    return [
      <div className="all-answer">
        <span className="d-i-b b m-r-5" />
        <span className="d-i-b t-6">35:00 ~ 40:00</span>
        <span className="f-r d-i-b t-4 c-p">全部问答 ></span>
      </div>,
      <div className="answer-layout">
        {list.map(item => {
          return (
            <div className="answer-item">
              <div>
                <div className="small-tag">提问</div>
              </div>
              <div className="desc">
                <OpenText>{item.content}</OpenText>
              </div>
              {item.answerStatus > 0 && (
                <div>
                  <div className="small-tag">回答</div>
                </div>
              )}
              {item.answerStatus > 0 && (
                <div className="desc">
                  <OpenText>{item.answer}</OpenText>
                </div>
              )}
            </div>
          );
        })}
      </div>,
    ];
  }

  renderRightTab2() {
    const { list = [], key } = this.state;
    return (
      <div className="item-layout">
        {list.map(item => {
          return (
            <div className={`item ${item.key === key ? 'active' : ''}`} onClick={() => this.onChangeItem(item.key)}>
              <span className="t-1">课时1</span>
              <span className="t-2">解读句子结构</span>
            </div>
          );
        })}
      </div>
    );
  }

  renderTab() {
    const { tab } = this.state;
    return [
      <div className="bottom">
        <div className="content">
          <Tabs
            type="full"
            border
            active={tab}
            tabs={[
              { title: '课程介绍', key: '1' },
              { title: '授课大纲', key: '2' },
              { title: '小助手', key: '3' },
              { title: 'FAQs', key: '4' },
              { title: '优惠信息', key: '5' },
              { title: '学员评价', key: '6' },
            ]}
            onChange={key => this.onChangeTab(key)}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    return (
      <div className="tab-layout">
        <div className="tab-title">老师资历</div>
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
        <div className="tab-title">基本参数</div>
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
        <div className="tab-title">授课重点</div>
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
        <div className="tab-title">适合人群</div>
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
      </div>
    );
  }

  renderTab2() {
    return (
      <div className="tab-layout">
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
      </div>
    );
  }

  renderTab3() {
    return (
      <div className="tab-layout">
        <div className="qr-layout">
          <Assets name="qrcode" className="m-r-2 v-a-t" />
          <div className="p-l-1 d-i-b t-l">
            <div className="t-1">千行小助手:</div>
            <div className="t-1 m-b-2">1232104-310431</div>
            <div className="t-2 t-s-12">微信扫码添加千行小助手为好友，</div>
            <div className="t-2 t-s-12">咨询课程，了解更多信息</div>
          </div>
        </div>
      </div>
    );
  }

  renderTab4() {
    return (
      <div className="tab-layout">
        <AnswerCarousel
          hideBtn
          list={[
            { answer: '123123', content: '12312312' },
            { answer: '123123', content: '12312312' },
            { answer: '123123', content: '12312312' },
            { answer: '123123', content: '12312312' },
          ]}
        />
      </div>
    );
  }

  renderTab5() {
    return (
      <div className="tab-layout">
        <div className="tab-desc">
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
          已经参加过GMAT基础班，对GMAT考试内容已经有全面认识，已经掌握了GMAT考试所需要的所有语言能力，希望学习具体的做题方法和应试技巧，提高实战做题能力的学员；
          住宿管理， 让学生高效利用时间在最短的时间内攻破GMAT考试。
        </div>
      </div>
    );
  }

  renderTab6() {
    return (
      <div className="tab-layout">
        <div className="m-b-1 t-r">
          <Button width={100} radius>
            写评论
          </Button>
        </div>
        <Comment />
        <Comment />
        <Comment />
        <Comment />
        <Comment />
      </div>
    );
  }
}