import React, { Component } from 'react';
import './index.scss'
import { Link } from "react-router-dom";
import { browser, getParam, http } from "@/utils"
import { Toast } from "antd-mobile";
import { connect } from "react-redux";
import { WithFullSize } from "@/HOCs"
import { isEmpty } from "lodash";
import { addMessage, addResult, reselect } from './store'

const messageType = {
  SYSTEM_MESSAGE: 1,
  USER_MESSAGE: 2,
  OPTIONS: 3,
}


class IntelligentRecommend extends Component {

  state = {
    showAnalyzing: false,
    systemAvatar: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png',
    options: {
      data: [],
      messageId: 0,
    },
    next: {
      oid: 0,
      rid: 0,
    },
  }

  componentDidMount() {
    const {intelligentRecommend, reselect} = this.props
    if (isEmpty(intelligentRecommend.result)) {
      reselect()
      this.getMessage()
    }
  }


  handleSelect = (item) => {
    this.props.addMessage({type: messageType.USER_MESSAGE, content: item.describe, id: item.id})
    this.setState(state => ({
      options: {data: [], messageId: 0},
      next: {
        ...state.next,
        oid: item.id,
      },
    }), () => {
      this.getMessage()
    })
  }

  getMessage = () => {
    const {oid, rid} = this.state.next
    http.get(`${API.home}/sys/icc/communicate/${oid}/${rid}`)
      .then(res => {
        const {data, code, msg} = res.data
        if (code === 200) {
          if (data.answer_type === 1) {
            this.setState({
              showAnalyzing: true,
            }, () => {
              setTimeout(() => {
                this.setState({showAnalyzing: false})
                this.props.addResult({...data})
              }, Math.random() * 500 + 1000)
            })
          } else {
            const message = {
              type: messageType.SYSTEM_MESSAGE,
              content: data.contents.find(item => item.is_question),
            }
            const optionsData = data.contents.filter(item => !item.is_question)
            this.props.addMessage(message)
            this.setState({
              options: {
                messageId: message.content.id,
                data: optionsData,
              },
              next: {rid: data.rid},
            })
          }
        } else {
          Toast.fail(msg)
        }
      })
  }

  consult = (e) => {
    e.preventDefault()
    let target = e.target
    http.post(`${API.home}/sys/icc/consult`, {
      rid: this.props.intelligentRecommend.result.rid,
    }).finally(() => {
      window.location.href = target.getAttribute('href')
    })
  }

  displayPrice = (price) => {
    let _price = price.toString()
    let decimal = _price.split('.')
    return parseInt(decimal[1]) === 0 ? decimal[0] : price
  }

  goBack = () => {
    const {state} = this.props.location
    if (browser.isWeixin && getParam('code') && getParam('state')) {
      window.history.go(-2)
    }
    if (state.records && state.records.length > 1) {
      window.history.go(-1);
    } else if (state.from && state.from.pathname) {
      location.replace(`${state.from.pathname}${state.from.search}`)
    } else {
      window.location.href = window.location.origin
    }
  }


  render() {
    const {showAnalyzing, systemAvatar, options} = this.state
    const {user, intelligentRecommend: {result, processing}, reselect} = this.props
    const recommends = result.contents
    return (
      <div id={'intelligent-recommend'}>
        <div className="head">
          <div>
            <div className="go-back">
              <i className='iconfont iconiconfront-68' onClick={this.goBack}></i>
            </div>
            <div className={'title'}>七月在线智能选课</div>
          </div>
          <button onClick={() => {
            this.setState({
              next: {oid: 0, rid: 0},
              options: {messageId: 0, data: []},
            }, () => {
              reselect()
              this.getMessage()
            });
          }}>重新选课
          </button>
        </div>
        <div className="dialog-box">
          {
            !!processing.length && processing.map((item, index) => {
              switch (item.type) {
                case messageType.SYSTEM_MESSAGE:
                  return (
                    <React.Fragment key={index}>
                      <Message text={item.content.describe} identity={'system'} avatar={systemAvatar}/>
                      {
                        options.messageId === item.content.id &&
                        <Options options={options.data} handleSelect={this.handleSelect}/>
                      }
                    </React.Fragment>
                  )
                case messageType.USER_MESSAGE:
                  return <Message text={item.content} identity={'user'} avatar={user.data.avatar} key={index + 2}/>
              }
            })
          }
          {
            showAnalyzing && <div className="analyzing">努力分析中...</div>
          }
        </div>


        {
          !isEmpty(recommends) && <div className="result">
            <div className="title">根据您目前的情况，推荐结果如下</div>
            <div className="obtained">
              <div className={'subtitle'} dangerouslySetInnerHTML={{__html: recommends.skill_title}}></div>
              <div className={'skill'} dangerouslySetInnerHTML={{__html: recommends.skill_desc}}></div>
            </div>
            <div className="obtained">
              <div className={'subtitle'} dangerouslySetInnerHTML={{__html: recommends.project_title}}></div>
              <div className={'skill project'} dangerouslySetInnerHTML={{__html: recommends.project_desc}}></div>
              {/*<ul>
                <li className={'skill project'}>·技能描述、技能描述</li>
                <li className={'skill project'}>·工作及项目描述、工作及项目描述、项目描述</li>
              </ul>*/}
            </div>
            <div className={'salary-section'}>
              <div className={'subtitle'} dangerouslySetInnerHTML={{__html: recommends.salary_title}}></div>
              <div className={'salary'} dangerouslySetInnerHTML={{__html: recommends.salary_desc}}></div>
            </div>
            <div className="recommends">
              <div>想获得以上技能，向您推荐：</div>
              <ul className={'courses'}>
                {
                  !!recommends.courses.length && recommends.courses.map(item => {
                    return <li className={'course'} key={item.course_id} onClick={(e) => {
                      if (e.target.nodeName.toLowerCase() !== 'a') {
                        if (item.course_id) {
                          this.props.history.push(`/detail?id=${item.course_id}`)
                        } else {
                          this.props.history.push(`/play?id=${item.v_course_id}`)
                        }
                      }
                    }}>
                      <div className="cover">
                        <img src={item.img_url}
                             alt=""/>
                      </div>
                      <div className="info">
                        <div className={'title'}>{item.recmd_title}</div>
                        <div className={'des'}>{item.recmd_desc}</div>
                        <div className="bar">
                          {
                            item.c_type === 1 && <React.Fragment key={item.course_id}>
                              <div className="prices">
                                <span className={'price'}>￥{this.displayPrice(item.price_sale)}</span>
                                <span className={'old-price'}>￥{this.displayPrice(item.price_original)}</span>
                              </div>
                              <Link className={'register'} to={`/detail?id=${item.course_id}`}>{item.second_btn}</Link>
                            </React.Fragment>
                          }
                          {
                            item.c_type === 2 && <React.Fragment key={item.course_id}>
                              <a href="http://q.url.cn/s/Vbkup6m?_type=wpa" className={'contact'}
                                 onClick={this.consult}>{item.consult}</a>
                              <Link className={'register'} to={`/detail?id=${item.course_id}`}>{item.second_btn}</Link>
                            </React.Fragment>
                          }
                          {
                            item.c_type === 0 &&
                            <Link className={'study'} to={`/play?id=${item.v_course_id}`}>{item.second_btn}</Link>
                          }
                        </div>
                      </div>
                    </li>
                  })
                }
              </ul>
            </div>
          </div>
        }
      </div>
    );
  }

}

function Message({text, avatar, identity}) {
  return <div className={`message clearfix ${identity}`}>
    <div className="avatar">
      <img src={avatar} alt=""/>
    </div>
    <div className={`text`}>{text}</div>
  </div>
}

function Options({options, handleSelect}) {
  return <ul className={'options'}>
    {
      !!options.length && options.map(item => {
        return <li onClick={() => handleSelect(item)} key={item.id}>
          <button>{item.describe}</button>
        </li>
      })
    }
  </ul>
}


export default connect(
  ({user, intelligentRecommend}) => ({user, intelligentRecommend}),
  {addMessage, addResult, reselect},
)(WithFullSize(IntelligentRecommend));