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

class CollegePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sectionInfo: [
        {
          title: '系统赞助',
          desc: '免费提供在线直播系统，支持电脑屏幕实时演示，以及视频回放、互动答疑。',
          icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/system.png',
        },
        {
          title: '课程赞助 ',
          desc: '免费开放相关课程的视频、课件、作业、考试、代码、项目、云平台(在线编译、在线批改)。',
          icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/content.png',
        },
      ],
      schoolList: [],
    };
  }

  componentDidMount() {
    this.fetchSchoolList();
    document.title = `免费提供在线教学系统 助力全国高校在线教学 - 七月在线`
  }

  fetchSchoolList = () => {
    const { schoolList } = this.state;
    http.get(`${API['home']}/sys/school/list`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.setState({
          schoolList: data.concat(schoolList),
        });
      }
    });
  }

  toCollegeCourse = (id) => {
    const { history } = this.props;
    if(id) {
      history.push(`/college/${id}`);
    }
  }

  render() {
    const { sectionInfo = [], schoolList = [] } = this.state;
    return (
      <>
        <HeaderBar title={'助学计划'} arrow={true}/>
        <CollegeBanner />
        <div className="college-page__banner"></div>
        <CollegeHeader
          headerStyle={{
            marginTop: '20px'
          }}
          title="助力高校在线教学计划"
        />
        <p className="college-page__contact">免费入驻联系周先生：18910848502(微信同)</p>
        {
          sectionInfo.map(({title, desc, icon}, index) => (
            <div className="college-page__section" key={index}>
              <i className="section__icon" style={{'backgroundImage': `url(${icon})`}}></i>
              <div className="section__body">
                <h2 className="section__title">{title}</h2>
                <p className="section__desc">{desc}</p>
              </div>
            </div>
          ))
        }
        <CollegeHeader
          headerStyle={{
            marginTop: '20px'
          }}
          isDecorate={false} 
          title="入驻院校" 
        />
        <div className="college-page__college">
          {
            schoolList.map(({id, name, logo}) => (
              <div
                className="college__item"
                onClick={() => this.toCollegeCourse(id)}
                key={id}
              >
                <i className="college__iamge" style={{'backgroundImage': `url(${logo})`}}></i>
                <p className="college__name">{name}</p>
              </div>
            ))
          }
        </div>
      </>
    )
  }
}

export default CollegePage;