import React, { Component } from 'react';
import { Accordion } from 'antd-mobile';
import { HeaderBar } from '@/common';
import { http } from '@/utils';
import './index.scss';

class PythonStudy extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: '10%',
    };
  }

  componentDidMount() {
    this.fetchCourseDetail();
  }

  fetchCourseDetail = () => {
    http.get(`${API['home']}/web/it_detail?id=181`).then(res => {
      console.log(res);
    });
  }

  onChange = (key) => {
    console.log(key);
  }

  render() {
    const { progress } = this.state;
    return (
      <div className="python-study">
        <HeaderBar title='Python基础语法' arrow={true} />
        <div className="python-study__header">
          <div className="python-study__course">
            <h2 className="python-study__course-name">Python人工智能</h2>
            <p className="python-study__course-contact">
              <span>添加助教微信入群：sheng546122</span>
              <span>并备注您的学号：479409</span>
            </p>
          </div>
          <div className="python-study__progress">
            <h2 className="python-study__progress-title">学习进度</h2>
            <div className="python-study__progress-bar">
              <i style={{with: progress}}></i>
              <span className="python-study__progress-tip" style={{left: progress}}>100%</span>
            </div>
          </div>
        </div>
        <Accordion 
          defaultActiveKey="0" 
          className="python-study__stage" 
          onChange={this.onChange}
        >
          <Accordion.Panel header="第一阶段  千里始于足下" className="pad">
            <h2 className="python-study__pass">
              第0关  计算机发展及Python介绍
              <i className="python-study__pass-tag">闯关完成</i>
            </h2>
            <div className="python-study__subject">
              <i className="python-study__subject-icon"></i>
              <i className="python-study__subject-status" data-status="complete"></i>
              <div className="python-study__subject-content">
                <h2 className="python-study__subject-title">基础练习基基础练习基础练习基础练习基础练习</h2>
                <span className="python-study__subject-tag">必做练习</span>
              </div>
            </div>
            <div className="python-study__subject" data-status="lock">
              <i className="python-study__subject-icon"></i>
              <i className="python-study__subject-status" data-status="lock"></i>
              <div className="python-study__subject-content" >
                <h2 className="python-study__subject-title" data-status="lock">基础练习基基础练习基础练习基础练习基础练习</h2>
                <span className="python-study__subject-tag">必做练习</span>
              </div>
            </div>
          </Accordion.Panel>
        </Accordion>
        <button className="python-study__button">开始学习</button>
      </div>
    )
  }
}

export default PythonStudy;