import React, { Component } from 'react';
import classnames from 'classnames';
import { http } from '@/utils';
import listFrame from './../listFrame/index';
import CourseItem from './../courseItem/index';
import ListHeader from './../listHeader';
import './index.scss';

class CourseList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      basic: {
        course: [],
        courseList: [],
        isMore: false,
      },
      advanced: {
        course: [],
        courseList: [],
        isMore: false,
      },
      higher: {
        course: [],
        courseList: [],
        isMore: false,
      },
      expand: {
        course: [],
        courseList: [],
        isMore: false,
      },
      group: {
        course: [],
        courseList: [],
        isMore: false,
      },
      training: {
        course: [],
        courseList: [],
        isMore: false,
      }
    };
  }

  componentDidMount() {

    // 精品课程-集训营、就业班/AI特训营
    this.fetchCourseData();

    // AI之路-基础
    this.fetchAICourse('one');

    // AI之路-进阶
    this.fetchAICourse('two');

    // AI之路-高阶
    this.fetchAICourse('three');

    // AI之路-拓展
    this.fetchAICourse('four');
  }

  fetchAICourse = (key) => {
    const { basic, advanced, higher, expand } = this.state;
    http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => {
      const {code, data} = res.data;
      if (code === 200) {
        if (data.length > 4) {
          if (key === 'one') {
            this.setState({
              basic: Object.assign({}, basic, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'two') {
            this.setState({
              advanced: Object.assign({}, advanced, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'three') {
            this.setState({
              higher: Object.assign({}, higher, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'four') {
            this.setState({
              expand: Object.assign({}, expand, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
        } else {
          if (key === 'one') {
            this.setState({
              basic: Object.assign({}, basic, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'two') {
            this.setState({
              advanced: Object.assign({}, advanced, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'three') {
            this.setState({
              higher: Object.assign({}, higher, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'four') {
            this.setState({
              expand: Object.assign({}, expand, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
        }
      }
    });
  }

  fetchCourseData = () => {
    const { group, training } = this.state;
    http.get(`${API.home}/sys/preheat_data`).then(res => {
      const {code, data} = res.data;
      if (code === 200) {
        if (data.excellent_course.length > 2) {
          this.setState({
            group: Object.assign({}, group, {
              isMore: true,
              course: data.excellent_course.filter((item, index) => index < 2),
              courseList: data.excellent_course,
            })
          });
        } else {
          this.setState({
            group: Object.assign({}, group, {
              isMore: false,
              course: data.excellent_course,
              courseList: data.excellent_course,
            })
          });
        }
        if (data.ai_elite_courses.length > 2) {
          this.setState({
            training: Object.assign({}, training, {
              isMore: true,
              course: data.ai_elite_courses.filter((item, index) => index < 2),
              courseList: data.ai_elite_courses,
            })
          });
        } else {
          this.setState({
            training: Object.assign({}, training, {
              isMore: false,
              course: data.ai_elite_courses,
              courseList: data.ai_elite_courses,
            })
          });
        }
      }
    });
  }

  render() {
    const { basic, advanced, higher, expand, group, training } = this.state;
    return (
      <div>
        <ListHeader text="集训营、就业班" size="middle" styles={{margin: '20px 0 15px'}} />
        {/* 集训营、就业班 */}
        {
          (group.course && group.course.length > 0) &&
          <>
            <div data-layout="row">
              {
                group.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    <div className="coupon-course__footer">
                      <a href="" className="course-button">立抢超低团购价</a>
                    </div>
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }

        <ListHeader text="AI特训营" size="middle" styles={{margin: '0 0 15px'}} />
        {/* AI特训营 */}
        {
          (training.course && training.course.length > 0) &&
          <>
            <div data-layout="row">
              {
                training.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    <div className="coupon-course__footer">
                      <a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
                        <span className="coupon-course__button-price">
                          <em>¥200</em>
                          <i>代金券</i>
                        </span>
                        <span className="coupon-course__button-label">立即领券</span>
                      </a>
                    </div>
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }

        {/* AI成长之路--基础 */}
        {
          (basic.course && basic.course.length > 0) &&
          <>
            <h4 className="ai-course__subtitle">基础</h4>
            <div data-layout="row">
              {
                basic.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    {
                      item.type === 0 &&
                      <div className="coupon-course__footer">
                        <a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
                          <span className="coupon-course__button-price">
                            <em>¥200</em>
                            <i>代金券</i>
                          </span>
                          <span className="coupon-course__button-label">立即领券</span>
                        </a>
                      </div>
                    }
                    {
                      item.type === 1 &&
                      <div className="coupon-course__footer">
                        <a href="" className="course-button">1分钱开团</a>
                      </div>
                    }
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }

        {/* AI成长之路--进阶 */}
        {
          (advanced.course && advanced.course.length > 0) &&
          <>
            <h4 className="ai-course__subtitle">进阶</h4>
            <div data-layout="row">
              {
                advanced.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    {
                      item.type === 0 &&
                      <div className="coupon-course__footer">
                        <a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
                          <span className="coupon-course__button-price">
                            <em>¥200</em>
                            <i>代金券</i>
                          </span>
                          <span className="coupon-course__button-label">立即领券</span>
                        </a>
                      </div>
                    }
                    {
                      item.type === 1 &&
                      <div className="coupon-course__footer">
                        <a href="" className="course-button">1分钱开团</a>
                      </div>
                    }
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }

        {/* AI成长之路--高阶 */}
        {
          (higher.course && higher.course.length > 0) &&
          <>
            <h4 className="ai-course__subtitle">高阶</h4>
            <div data-layout="row">
              {
                higher.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    {
                      item.type === 0 &&
                      <div className="coupon-course__footer">
                        <a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
                          <span className="coupon-course__button-price">
                            <em>¥200</em>
                            <i>代金券</i>
                          </span>
                          <span className="coupon-course__button-label">立即领券</span>
                        </a>
                      </div>
                    }
                    {
                      item.type === 1 &&
                      <div className="coupon-course__footer">
                        <a href="" className="course-button">1分钱开团</a>
                      </div>
                    }
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }

        {/* AI成长之路--扩展 */}
        {
          (expand.course && expand.course.length > 0) &&
          <>
            <h4 className="ai-course__subtitle">扩展</h4>
            <div data-layout="row">
              {
                expand.course.map(item => (
                  <CourseItem image={item.image_name} key={item.course_id}>
                    {
                      item.type === 0 &&
                      <div className="coupon-course__footer">
                        <a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
                          <span className="coupon-course__button-price">
                            <em>¥200</em>
                            <i>代金券</i>
                          </span>
                          <span className="coupon-course__button-label">立即领券</span>
                        </a>
                      </div>
                    }
                    {
                      item.type === 1 &&
                      <div className="coupon-course__footer">
                        <a href="" className="course-button">1分钱开团</a>
                      </div>
                    }
                  </CourseItem>
                ))
              }
            </div>
            <button className="more-button">展开更多</button>
          </>
        }
        

        

        


        
      </div>
    )
  }
}

export default listFrame(CourseList);