import React, { Component } from 'react';
import './index.less';
import { Popover } from 'antd';
import { Carousel } from 'antd-mobile';
import Assets from '@src/components/Assets';
import { formatDate } from '@src/services/Tools';
import Button from '../Button';
import Tabs from '../Tabs';
import { User } from '../../stores/user';

export class CommentFalls extends Component {
  createLayout() {
    const msnry = new Masonry('.comment-falls', {
      itemSelector: '.grid-item',
    });
    msnry.layout();
  }

  render() {
    const { list = [] } = this.props;
    return (
      <div className="comment-falls">
        {list.map(row => {
          return (
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets src={row.user ? row.user.avatar : row.avatar} />
                  <div className="name">{row.user ? row.user.nickname : row.nickname}</div>
                  <div className="date">{formatDate(row.createTime, 'yyyy年mm月dd日')}</div>
                </div>
                <div className="item-body">{row.content}</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export class AnswerCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = { index: 1 };
  }

  onNext() {
    const index = this.state.index + 1;
    const { list = [] } = this.props;
    if (index >= list.length - 1) return;
    this.setState({ index });
  }

  onPrev() {
    const index = this.state.index - 1;
    if (index < 1) return;
    this.setState({ index });
  }

  render() {
    const { onFaq, tabActive, tabs = [], onTabChange } = this.props;
    const { index } = this.state;
    const { list = [], hideBtn = false } = this.props;
    return (
      <div className="other-answer-carousel">
        <div className="body">
          {tabs.length > 0 && (
            <Tabs
              type="tag"
              theme="white"
              tabs={tabs}
              space={6}
              width={86}
              active={tabActive}
              onChange={key => onTabChange && onTabChange(key)}
            />
          )}
          {list.length > 0 && (
            <Carousel selectedIndex={index} cellSpacing={40} dots={false} slideWidth={'350px'}>
              {list.map(item => {
                return (
                  <div className="item">
                    <div className="item-block">
                      <Assets name="question" />
                      {item.content}
                    </div>
                    <div className="item-block">
                      <Assets name="answer" />
                      {item.answer}
                    </div>
                  </div>
                );
              })}
            </Carousel>
          )}
          {!tabs && <div className="fixed" />}
          <Assets name="footer_next_highlight_1" className="next" onClick={() => this.onNext()} />
          <Assets name="footer_previous_highlight_1" className="prev" onClick={() => this.onPrev()} />
        </div>
        {!hideBtn && (
          <Button size="lager" radius onClick={() => User.needLogin().then(() => onFaq())}>
            <Assets name="kf" className="m-r-5" />
            立即咨询
          </Button>
        )}
      </div>
    );
  }
}

export class Consultation extends Component {
  render() {
    const { data = {} } = this.props;
    return (
      <div className="other-consultation">
        <div className="list">
          <div className="item">
            <Assets name="call" />
          </div>
          <div className="item">
            <Assets name="mail" />
          </div>
          <div className="item">
            <Assets name="wechat_1" />
          </div>
        </div>
        <div className="line" />
        <div className="list">
          <div className="item">
            <div className="t-1 t-s-16 m-b-10">电话咨询</div>
            <div className="t-1 t-s-16 t-w-b">{data.phone}</div>
          </div>
          <div className="item">
            <div className="t-1 t-s-16 m-b-10">邮件咨询</div>
            <div className="t-1 t-s-16 t-w-b">{data.email}</div>
          </div>
          <div className="item">
            <div className="t-1 t-s-16 m-b-10">微信咨询</div>
            <div className="t-1 t-s-16 t-w-b">
              <Popover content={<Assets name="qrcode" />}>
                <span>
                  <Assets src={data.wechatImage} />
                </span>
              </Popover>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export class Contact extends Component {
  render() {
    const { data = {} } = this.props;
    return (
      <div className="other-contact">
        <div className="body">
          <div className="step-list">
            <div className="step">
              <div className="title">工作机会</div>
              <Assets name="logo2" />
            </div>
            <div className="step" style={{ paddingLeft: 80 }}>
              <div className="title">联系我们</div>
              <div className="desc">{data.phone}</div>
              <div className="desc">{data.email}</div>
              <div className="desc">{data.wechat}</div>
            </div>
            <div className="step" style={{ paddingLeft: 140 }}>
              <div className="title">关注我们</div>
              <div className="qrcode">
                <Assets src={data.wechatImage} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export class Comment extends Component {
  render() {
    const { data } = this.props;
    return (
      <div className="comment-item">
        <Assets className="m-r-1" src={data.user ? data.user.avatar : data.avatar} />
        <div className="d-i-b">
          <div className="t-1 t-s-18">{data.user ? data.user.nickname : data.nickname}</div>
          <div className="t-3">{formatDate(data.createTime, 'YYYY-MM-DD')}</div>
        </div>
        <div className="t-1 t-s-18 m-t-1">{data.content}</div>
      </div>
    );
  }
}