import React, { Component } from 'react'
import './index.scss'
import Description from './Description/index.js';
import NoWorry from './NoWorry/index.js';

export default class PythonDes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      defineList: [
        {
          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
          title: '排名第1的编程语言',
          subTitle: '2018世界编程语言排行榜中，Python排名第1',
          subWidth: '180px',
          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
          desInfo: {
            width: '240px',
            height: '170px',
          }
        },
        {
          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
          title: '开发快速、简单易掌握',
          subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
          subWidth: '260px',
          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
          desInfo: {
            width: '212px',
            height: '106px',
          }
        },
        {
          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
          title: '适用领域广',
          subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
          subWidth: '230px',
          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
          desInfo: {
            width: '234px',
            height: '106px',
          }
        }
      ],
      desList: [
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xingshi.png', title: '全新课程形式', subTitle: '对话式交互教学，轻松、生动、不无聊'},
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/huanjing.png', title: '在线编程环境', subTitle: '无需安装任何编程软件'},
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/rumen.png', title: '20天零基础入门', subTitle: '降低学习门槛，20天入门人工智能'},
      ],
      worryList: [
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png', title: '初次接触，担心学不会', subTitle: '本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。'},
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xuexi.png', title: '想学习，没有坚持下来', subTitle: '以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越向学。'},
        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png', title: '知识点掌握了，不知如何运用', subTitle: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'},
      ],
    }
  }

  render() {
    const {defineList, desList, worryList} = this.state;
    return (
      <div className={'python__des'}>
        <div className={'des__start'}></div>
        <div className={'python__define'}>
          <img className={'left__decorate'} src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
          <img className={'right__decorate'} src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png'}></img>
          <p className={'define__title'}>什 / 么 / 是 / Python</p>
          {
            defineList.map((item,index) => {
              return <DefineItem item={item} key={index}></DefineItem>
            })
          }
        </div>
        <div className={'course__introduce'}></div>
        <div className={'bottom__btn_group'}>
          <div className={'course__price'}>
            <div className={'money'}>199<span style={{fontSize: '18px'}}>元</span></div>
            <div className={'discount'}>
              限时特惠
              <div className={'triangle'}></div>
            </div>
          </div>
          
          <div className={'btn__group'}>
            <div className={'try__study'}>免费试学</div>
            <div className={'sign__now'}>立即报名</div>
          </div>
        </div>
        <Description list={desList}></Description>
        <NoWorry list={worryList}></NoWorry>
      </div>
    )
  }
}

function DefineItem(props) {
  const {item, item: {desInfo}} = props;
  return (
    <div className={'number_one'}>
      <img className={'trophy'} src={item.titleUrl}></img>
      <p className={'item__title'}>{item.title}</p>
      <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
      <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
    </div>
  )
}


