import React, { Component } from 'react';
import './index.scss'
import { Link } from "react-router-dom";
import { http } from "@/utils"
import { Toast } from "antd-mobile";


class IntelligentRecommend extends Component {

  state = {
    showAnalyzing: false,
    systemAvatar: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png',
    options: [
      {
        id: 1,
        text: '数据分析',
      },
      {
        id: 2,
        text: '人工智能',
      },
      {
        id: 3,
        text: '无人驾驶',
      },
    ],
    processing: [],
  }

  componentDidMount() {
    this.getMessage()
  }


  handleSelect = () => {

  }

  next = () => {

  }

  getMessage = (oid = 0, rid = 0) => {
    http.get(`${API.home}/sys/icc/communicate/${oid}/${rid}`)
      .then(res => {
        const {data, code, msg} = res.data
        if (code === 200) {

        } else {
          Toast.fail(msg)
        }
      })
  }

  render() {
    const {showAnalyzing, systemAvatar, processing, options} = this.state
    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>重新选课</button>
        </div>
        <div className="dialog-box">
          <Message text={'请问你学习的目的是？'} avatar={systemAvatar} identity={'system'}/>
          <Options options={options} handleSelect={this.handleSelect}/>
          <Message text={'请问你学习的目的是？'} avatar={systemAvatar} identity={'user'}/>
          {
            showAnalyzing && <div className="analyzing">努力分析中...</div>
          }
        </div>

        <div className="result">
          <div className="title">根据您目前的情况，推荐结果如下</div>
          <div className="obtained">
            <div className={'subtitle'}>您将掌握的技能：</div>
            <div className={'skill'}>技能描述、技能描述</div>
          </div>
          <div className="obtained">
            <div className={'subtitle'}>掌握后可以胜任以下工作及项目：</div>

            <ul>
              <li className={'skill'} style={{fontSize: '14px'}}>·技能描述、技能描述</li>
              <li className={'skill'} style={{fontSize: '14px'}}>·工作及项目描述、工作及项目描述、项目描述</li>
            </ul>
          </div>
          <div className={'salary-section'}>
            <div className={'subtitle'}>薪资范围：</div>
            <div className={'salary'}>¥15k～25K</div>
          </div>
          <div className="recommends">
            <div>想获得以上技能，向您推荐：</div>
            <ul className={'courses'}>
              <li className={'course'}>
                <div className="cover">
                  <img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg" alt=""/>
                </div>
                <div className="info">
                  <div className={'title'}>课程名称</div>
                  <div className={'des'}>课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</div>
                  <div className="bar">
                    {/*<div className="prices">
                      <span className={'price'}>￥3980</span>
                      <span className={'old-price'}>￥5680</span>
                    </div>*/}
                    {/*<a href="http://q.url.cn/s/Vbkup6m?_type=wpa" className={'contact'}>获取课程大纲</a>
                    <Link className={'register'}>立即报名</Link>*/}
                    <Link className={'study'}>开始学习</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} key={item.id}>
          {item.text}
        </li>
      })
    }
  </ul>
}


export default IntelligentRecommend;