import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatMoney } from '@src/services/Tools';
import Footer from '../../../components/Footer';
import { FaqModal, CommentModal, FinishModal } from '../../../components/OtherModal';
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 = null;
    this.commentMap = {};
    this.comments = null;
    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;
        this.setState({ teachers: result });
      });
    }
    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;
    const days = data.expirePreDays / 10 * 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, days });
  }

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

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

  renderView() {
    const { number } = this.props.order;
    const { promote = {}, base = {}, showComment, comment = {}, showFaq, faq = {}, showFinish } = 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 />
        <CommentModal
          show={showComment}
          defaultData={comment}
          onConfirm={() => this.setState({ showComment: false, comment: {}, showFinish: true })}
          onCancel={() => this.setState({ showComment: false, comment: {} })}
          onClose={() => this.setState({ showComment: false, comment: {} })}
        />
        <FaqModal show={showFaq} defaultData={faq} onCancel={() => this.setState({ showFaq: false, faq: {} })} onConfirm={() => this.setState({ showFaq: false, faq: {}, showFinish: true })} />
        <FinishModal
          show={showFinish}
          onConfirm={() => this.setState({ showFinish: false })}
        />
      </div>
    );
  }

  renderDetail() {
    const { info, key, data, number, price, days } = 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">
              <div className="img c-p" style={{ backgroundImage: `url(${data.cover})`, backgroundSize: '100% 100%', width: '100%', height: '100%' }} />
            </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">{days}天</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.changeNumber(number + 1)}
                  />
                  <Icon
                    className="down"
                    type="caret-down"
                    onClick={() => number !== 1 && number > data.minNumber && this.changeNumber(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"> ¥ {formatMoney(price)}</div>
              </div>
              <div className="action">
                {data.have && <Button className="m-r-1" radius size="lager" onClick={() => linkTo('/my/course')}>
                  我的课程
                </Button>}
                {!data.have && <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
                  立即购买
                </Button>}
                {!data.have && <Button theme="default" disabled={this.state.add || data.add} radius size="lager" onClick={() => this.add()}>
                  <Assets name={data.add || this.state.add ? 'add_disabled' : '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() {
    const { teachers = [] } = this.state;
    const [teacher] = teachers;
    if (!teacher) return null;
    return (
      <div className="tab-layout">
        <div className="teach-item">
          <div className="left t-c">
            <Assets className="m-b-1" src={teacher.avatar} />
            <div className="t-1 t-s-20">{teacher.realname}</div>
          </div>
          <div className="right t-1 t-s-16 ws-p">{teacher.description}</div>
        </div>
      </div>
    );
  }

  renderTab2() {
    const { base } = this.state;
    return (
      <div className="tab-layout">
        <Consultation data={base.contact} />
      </div>
    );
  }

  renderTab3() {
    const { faqs, data = {} } = this.state;
    return (
      <div className="tab-layout">
        <AnswerCarousel
          hideBtn
          list={faqs || []}
          onFaq={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'course-vs', position: data.id } }))}
        />
      </div>
    );
  }

  renderTab4() {
    const { data, comments } = this.state;
    return (
      <div className="tab-layout">
        {data.have && <div className="m-b-1 t-r">
          <Button width={100} radius onClick={() => User.needLogin().then(() => this.setState({ showComment: true, comment: { channel: 'course-vs', position: data.id } }))}>
            写评论
          </Button>
        </div>}
        {(comments || []).map(item => {
          return <Comment data={item} />;
        })}
      </div>
    );
  }
}