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


class Recommends extends Component {
  state = {
    recommends: [],
  }

  componentDidMount() {
    this.props.typeId && this.getRecommends(this.props.typeId)
  }

  getRecommends = (typeId) => {
    http.post(`${API.home}/sys/get_commend_course`, {
      type_id: typeId,
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
        this.setState({
          recommends: data,
        })
      } else {
        Toast.fail(msg, 2, null, msg)
      }
    })
  }

  render() {
    const {recommends} = this.state
    return (
      <div className="recommends">
        <div>相关课程</div>
        <ul>
          {
            !!recommends.length && recommends.map(item => {
              return <li key={item.course_id}>
                <Link to={`/detail?id=${item.course_id}`}><img src={item.image_name} alt=""/></Link>
              </li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default Recommends;