import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Footer from '../../../components/Footer';
import { Contact, Comment, Consultation, AnswerCarousel } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import { Main } from '../../../stores/main';
import { Order } from '../../../stores/order';
import { User } from '../../../stores/user';
import { Course } from '../../../stores/course';
import { CourseVsType } from '../../../../Constant';

export default class extends Page {
  initState() {
    return {
      info: '1',
      number: 0,
    };
  }

  init() {
    this.courseVsMap = {};
    this.faqMap = {};
    this.faqs = [];
    this.commentMap = {};
    this.comments = [];
    this.promote = [];
    this.teacherMap = {};
    Main.getPromote().then(result => {
      this.promote = result.vs_list || [];
      this.setState({ promote: result });
    });
    Main.getBase().then(result => {
      this.setState({ base: result });
    });
  }

  initData() {
    Course.allVs().then(result => {
      result.forEach(row => {
        this.courseVsMap[row.vsType] = row;
      });
      this.onChangeItem(CourseVsType[0].value);
    });
  }

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

  onChangeItem(key) {
    const item = this.courseVsMap[key];
    if (!this.faqs) {
      Main.listFaq({ page: 1, size: 100, channel: 'course-vs_index' }).then(result => {
        this.faqs = result.list;
        this.setState({ faqs: result.list });
      });
    }
    if (!this.commentMap[key]) {
      Main.listComment({ page: 1, size: 100, channel: 'course-vs', position: item.id }).then(result => {
        this.commentMap[key] = result.list;
        this.setState({ comments: result.list });
      });
    }
    if (!this.teacherMap[key]) {
      Course.allTeacher(item.id).then(result => {
        this.teacherMap[key] = result.list;
        this.setState({ teachers: result.list });
      });
    }
    this.setState({ key, data: item, faqs: this.faqs, comments: this.commentMap[key], teachers: this.teacherMap[key] });
    this.changeNumber(item.minNumber || 1);
  }

  changeNumber(number) {
    const { data } = this.state;
    let price = data.price * number;
    let max = 0;
    let maxIndex = -1;
    this.promote.forEach((row, i) => {
      if (row.number <= number) {
        if (row.number > max) {
          max = number;
          maxIndex = i;
        }
      }
    });
    if (maxIndex >= 0) {
      price *= this.promote[maxIndex].percent / 100;
    }
    this.setState({ number, price });
  }

  buy() {
    const { data } = this.props;
    Order.speedPay({ productType: 'course', productId: data.id }).then(result => {
      User.needPay(result).then(() => {
        linkTo('/my/course');
      });
    });
  }

  add() {
    const { data } = this.props;
    Order.addCheckout({ productType: 'course', productId: data.id }).then(() => {
      this.setState({ add: true });
    });
  }

  renderView() {
    const { number } = this.props.order;
    const { promote = {}, base = {} } = this.state;
    return (
      <div>
        <div className="top content">
          <Tabs
            type="text"
            active={'vs'}
            tabs={[
              { title: '在线课程', key: 'online', path: '/course/online' },
              { title: '1v1私教', key: 'vs', path: '/course/vs' },
            ]}
          />
          <div className="f-r">
            <span className="t-2 m-r-1">{(promote.vs || {}).text ? `优惠活动：${promote.vs.text}` : ''}</span>
            <Assets name="cart" onClick={() => linkTo('/cart')} />
            <span className="t-2">（ {number || 0} ）</span>
          </div>
        </div>
        {this.renderDetail()}
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }

  renderDetail() {
    const { info, key, data, number, price } = this.state;
    return [
      <div className="center">
        <div className="content">
          <Assets className="m-b-2" width={1140} name="s" />
          <div className="item-list">
            {CourseVsType.map(t => {
              const course = this.courseVsMap[t.value] || {};
              return (
                <div className={`item ${key === t.value ? 'active' : ''}`} onClick={() => this.onChangeItem(t.value)}>
                  <Assets name={t.icon} />
                  <div className="t-1 t-s-20 f-w-b">{course.title}</div>
                  <div className="t-2">{course.comment}</div>
                </div>
              );
            })}
          </div>
          <div className="item-detail">
            <div className="left">
              <Assets name={data.cover} />
            </div>
            <div className="right">
              <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: data.serviceContent }} />
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  适合人群
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.crowdContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课时数
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.courseNoContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  授课流程
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.processContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程有效期
                </div>
                <div className="d-i-b t-1">{data.expirePreDays}天/10课时</div>
              </div>
              <div className="m-b-5 input">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  购买课时
                </div>
                <div className="d-i-b t-1">
                  <input value={number} style={{ width: 32 }} className="m-l-5 t-c" />
                  <Icon
                    className="up"
                    type="caret-up"
                    onClick={() => number < data.maxNumber && this.setState({ number: number + 1 })}
                  />
                  <Icon
                    className="down"
                    type="caret-down"
                    onClick={() => number !== 1 && number > data.minNumber && this.setState({ number: number - 1 })}
                  />
                </div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程总价
                </div>
                <div className="d-i-b t-7 t-s-20 f-w-b"> ¥ {price}</div>
              </div>
              <div className="action">
                <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
                  立即购买
                </Button>
                <Button theme="default" radius size="lager" onClick={() => this.add()}>
                  <Assets name="add" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>,
      <div className="bottom">
        <div className="content">
          <Tabs
            type="full"
            border
            active={info}
            tabs={[
              { title: '老师资料', key: '1' },
              { title: '咨询方式', key: '2' },
              { title: 'FAQs', key: '3' },
              { title: '学员评价', key: '4' },
            ]}
            onChange={tab => this.onChangeTab(tab)}
          />
          {this[`renderTab${info}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    return (
      <div className="tab-layout">
        <div className="teach-item">
          <div className="left t-c">
            <Assets className="m-b-1" />
            <div className="t-1 t-s-20">李奕都(DUKB24)</div>
          </div>
          <div className="right t-1 t-s-16">
            针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练。针对 0G20 的集中训练针对
            0G20 的集中训练针对 0G20 的集，中训练针对 0G20 的集中训练针对 0G20 的集中训练针对。 针对 0G20
            的集中训。练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练。 针对 0G20 的集中训练针对 0G20
            的集中训练针对 0G。
          </div>
        </div>
      </div>
    );
  }

  renderTab2() {
    return (
      <div className="tab-layout">
        <Consultation />
      </div>
    );
  }

  renderTab3() {
    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>
    );
  }

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