import React, { Component } from 'react';
import { http } from '@/utils';
import { HeaderBar } from "@/common";
import CollegeBanner from './banner';
import './courseList.scss';

class CollegeCourse extends Component {

  constructor(props) {
    super(props);
    this.state = {
      courseList: []
    };
  }

  componentDidMount() {
    this.fetchCourseList();
  }

  fetchCourseList = () => {
    const { match } = this.props;
    const id = match.params.id || 0;
    http.get(`${API['home']}/sys/school/${id}`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.setState({
          courseList: data
        });
      }
    });
  }

  render() {
    const { courseList = [] } = this.state;
    return (
      <>
        <HeaderBar title={'助学计划'} arrow={true}/>
        <CollegeBanner />
        <div className="college-course__body">
          {
            courseList.map(item => (
              <div className="college-course__item" key={item.course_id}>
                <i className="college-course__cover" style={{'backgroundImage': `url(${item.image_name})`}}></i>
                <p className="college-course__title">{item.course_title}</p>
              </div>
            ))
          }
        </div>
      </>
    )
  }
}

export default CollegeCourse;