import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { getMap, formatDate, formatMoney } from '@src/services/Tools';
import Footer from '../../../components/Footer';
import { Contact, AnswerCarousel, Comment } from '../../../components/Other';
import { FaqModal, CommentModal, FinishModal } from '../../../components/OtherModal';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import { User } from '../../../stores/user';
import { Course } from '../../../stores/course';
import { Order } from '../../../stores/order';
import { Main } from '../../../stores/main';

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

  init() {
    Main.dataStruct().then(result => {
      const dataStructSelect = result.map(row => {
        return {
          title: `${row.titleZh}${row.titleEn}`,
          key: row.id,
        };
      });
      const dataStructMap = getMap(dataStructSelect, 'key');
      this.setState({ dataStructSelect, dataStructMap });
    });
    Main.getBase().then(result => {
      this.setState({ base: result });
    });
  }

  initData() {
    const { id } = this.params;
    Course.getData(id).then(result => {
      this.setState({ data: result });
    });
    this.view(id);
    Main.listFaq({ page: 1, size: 100, channel: 'course_data', position: id }).then(result => {
      this.faqs = result.list;
      this.setState({ faqs: result.list });
    });
    Main.listComment({ page: 1, size: 100, channel: 'course_data', position: id }).then(result => {
      this.comments = result.list;
      this.setState({ comments: result.list });
    });
  }

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

  view(id) {
    Course.dataView(id);
  }

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

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

  renderView() {
    const { base = {}, data = {}, dataStructMap = {}, showComment, showFinish, comment = {}, showFaq, faq = {} } = this.state;
    return (
      <div>
        <div className="top content t-8">
          <Link to="/course">千行课堂</Link> > <Link to={'/course/data'}>全部资料</Link> > {data.parentStructId > 0 ? <Link to={`/course/online?tab=single&parentStructId=${(dataStructMap[data.parentStructId] || {}).key}`}>{(dataStructMap[data.parentStructId] || {}).title}</Link> : null}{data.parentStructId > 0 ? '> ' : ''}
          <Link to={`/course/online?tab=single&parentStructId=${(dataStructMap[data.parentStructId] || {}).key}&structId=${(dataStructMap[data.structId] || {}).key}`}>{(dataStructMap[data.structId] || {}).title}</Link> > <Link to={`/course/data/detail/${data.id}`}>{data.title}</Link> > <span className="t-1">资料详情</span>
        </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 { tab, data = {}, add } = this.state;
    return [
      <div className="center">
        <div className="content">
          <div className="item-detail">
            <div className="left">
              <Assets name="" src={data.cover} />
              <div className="tag-list">
                {data.isNovice > 0 && <div className="tag">新手</div>}
                {data.isOriginal > 0 && <div className="tag">原创</div>}
              </div>
            </div>
            <div style={{ width: 760 }} className="right">
              <div className="t-1 t-s-20">{data.title}</div>
              <div className="t-7 m-b-2" dangerouslySetInnerHTML={{ __html: data.content }} />
              <div className="">
                <div className="d-i-b t-1">最近更新：</div>
                <div className="d-i-b t-8">{data.latestTime && formatDate(data.latestTime, 'YYYY-MM-DD HH:mm:ss')}</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">页数：</div>
                <div className="d-i-b t-8">{data.pages}页</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">格式：</div>
                <div className="d-i-b t-8">{data.dataType === 'paper' ? '纸质' : 'PDF'}</div>
              </div>
              <div className="m-b-1">
                <div style={{ marginTop: 12 }} className="d-i-b t-1 t-s-16 v-a-t">
                  价格：
                </div>
                <div className="d-i-b t-7 t-s-28 f-w-b"> ¥ {formatMoney(data.price)}</div>
              </div>
              <div className="action">
                {!data.have && (
                  <Button
                    className="m-r-1"
                    radius
                    size="lager"
                    onClick={() => {
                      if (data.dataType === 'paper') {
                        openLink(data.link);
                      } else {
                        this.buy();
                      }
                    }}
                  >
                    立即购买
                  </Button>
                )}
                {!data.have && (
                  <Button
                    className="m-r-1"
                    theme="default"
                    disabled={data.add || add}
                    radius
                    size="lager"
                    onClick={() => this.add()}
                  >
                    <Assets name="add" />
                  </Button>
                )}
                {!data.have && (
                  <Button theme="default" radius size="lager" onClick={() => openLink(data.resource)}>
                    预览
                  </Button>
                )}
                {data.have && (
                  <Button className="f-r" theme="default" radius size="lager" onClick={() => openLink(data.resource)}>
                    查看资料
                  </Button>
                )}
              </div>
              {data.have && <Assets className="buyed" width={75} height={75} name="Purchased" />}
            </div>
          </div>
        </div>
      </div>,
      <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' },
            ]}
            onChange={key => this.onChangeTab(key)}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    const { data } = this.state;
    return (
      <div className="tab-layout">
        <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }

  renderTab2() {
    const { data } = this.state;
    return (
      <div className="tab-layout">
        <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.authorContent }} />
      </div>
    );
  }

  renderTab3() {
    const { data } = this.state;
    return (
      <div className="tab-layout">
        <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.methodContent }} />
      </div>
    );
  }

  renderTab4() {
    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_data', position: data.id } }))}
        />
      </div>
    );
  }

  renderTab5() {
    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_data', position: data.id } }))}>
            写评论
          </Button>
        </div>}
        {(comments || []).map(item => {
          return <Comment data={item} />;
        })}
      </div>
    );
  }
}