import React, { Component } from 'react';
import './index.scss'

class InAction extends Component {
  state = {
    projects: [
      {
        image: '',
        title: ' 基于KNN的电影推荐系统',
        detail: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。'
      },
      {
        image: '',
        title: ' 使用线性回归预测股票走势',
        detail: '10多年开发经验，先后任职国内知名互联网企业，从事人工智能方向的实施，擅长全栈开发。'
      },
      {
        image: '',
        title: ' 基于LR的广告点击率预估',
        detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
      },
      {
        image: '',
        title: ' 基于LR的广告点击率预估',
        detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
      },
      {
        image: '',
        title: ' 基于LR的广告点击率预估',
        detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
      },
    ],
    showAll: false,
    initialShowCount: 3
  }

  render() {
    const {showAll, initialShowCount} = this.state

    return (
      <div id={'in-action'}>
        <h2>项 / 目 / 实 / 战</h2>
        <ul>
          {
            this.state.projects.map((item, i) => {
              if (i >= initialShowCount && !showAll) {
                return null
              }
              return <li key={i}>
                <div className={'project-image'}></div>
                <div className={'des'}>
                  <div className="title">
                    <span>{i + 1}</span>
                    <span>{item.title}</span>
                  </div>
                  <p className={'detail'}>{item.detail}</p>
                </div>
              </li>
            })
          }
          <li>
            {
              !showAll
                ? <button onClick={() => {
                  this.setState({
                    showAll: true
                  })
                }}>
                  展开更多
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
                </button>
                : <button onClick={() => {
                  this.setState({
                    showAll: false
                  })
                }}>
                  收起
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
                </button>
            }
          </li>
        </ul>
      </div>
    );
  }
}

export default InAction;