import React, { Component } from 'react';
import { http } from "@/utils";
import './index.scss';

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

  componentDidMount() {
    this.fetchCourseData();
  }
  
  fetchCourseData = () => {
    Promise.all([
      http.get(`${API.home}/sys/browse/blessing/courses`),
      http.get(`${API.home}/sys/user/blessing`)
    ]).then(res => {
      const { code, data } = res[0].data;
      const doneCourse = res[1].data.data.today_browsed_courses || [];
      if(code === 200) {
        this.setState({
          courseList: data.map(item => {
            if(doneCourse.some(id => id == item.course_id)) {
              return Object.assign({}, item, {
                blessing: 2
              });
            }
            return item;
          })
        });
      }
    });
  }

  render() {
    const { courseList } = this.state;
    const { handleToHide } = this.props;
    return (
      <div className="course-popup__container">
        <div className="course-popup">
          <h2 className="course-popup__title">指定课程</h2>
          <div className="course-popup__list">
            {
              courseList.map(item => (
                <a href="" className="course-popup__item" key={item.course_id}>
                  <span className="course-popup__name">{item.course_title}</span>
                  {
                    item.blessing && 
                    <span>+2点</span>
                  }
                </a>
              ))
            }
          </div>
        </div>
        <i className="iconfont iconiconfront-2" onClick={handleToHide}></i>
      </div>
    );
  }
}

export default CoursePopup;