/* eslint-disable eqeqeq */
import React, { Component } from "react"
import { Accordion, Toast } from "antd-mobile"
import { HeaderBar, CallApp } from "src/common"
import { http, getParam } from "src/utils"
import "./index.scss"
import { connect } from "react-redux"
let courseObj = [{
  url:'/getDetail?id=224',
  prise:"99.00",
  name:'人工智能',
  code:"B4C719F1D6"
},
{
  url:'/getDetail?id=328',
  prise:"199.00",
  name:'数据分析',
  code:"7DE0F40CE5"
},
{
  url:'/getDetail?id=280',
  prise:"99.00",
  name:'机器学习',
  code:"8AED2B4DE5"
}]
@connect(
  (state) => ({
    user: state.user,
  })
)
class PythonCourse extends Component {
  constructor(props) {
    super(props)
    this.state = {
      CourseUrl: null,
      modelBool: false,
      courseName: "课程专用",
      prise: "100.00",
      code: null
    }
  }

  componentDidMount() {
    const { user } = this.props
    const uid = user && user.data && user.data.uid
    if (!uid) {
      this.props.history.push("/passport")
    }
  }
  showQuan=(id)=> {
    // this.getUser()
    this.setState({
      CourseUrl:courseObj[id].url,
      courseName:courseObj[id].name,
      prise:courseObj[id].prise,
      modelBool:true,
      code:courseObj[id].code,
    })
  }
  getUser=() => {
    let _this = this;
    http.get(`${API.home}/m/user_info_sample/0`).then((res) => {
      if(res.code === 200){
        
      }else{
        //为登录，去登录
        this.props.history.push("/passport")
      }
    })
  }
  gotoCourse=()=>{
    const _this = this
    const { history } = this.props
    http
        .post(`${API.home}/m/coupon/exchange`, {
          code: _this.state.code,
          type: "order",
        })
        .then((res) => {
          const data = res.data
          if (data.code === 200) {
            Toast.info('领取成功',2)
            
          } else {
            Toast.info(data.msg)
          }
          history.push(_this.CourseUrl)
        })
    
    // this.$Message.success({
    //   content:"领取成功，券码已复制",
    //   top: 50,
    //   duration: 3,
    //   onClose:function(){
    //     location.href = _this.CourseUrl
    //   }
    // })
    
  }
  gotoCourseDetail=(url)=>{
    const { history } = this.props
    history.push(url)
  }
  close=()=>{
    this.setState({
      modelBool:false
    })
  }
  render() {
    const { user } = this.props
    const uid = user && user.data && user.data.uid
    const { CourseUrl, modelBool, courseName, prise,code } = this.state
    return (
      <div id="python-box" className="python-study">
        <div className="content">
          <div className="banner">
            <img src="https://www.julyedu.com/Public/img/banner.3cbdc9ef.png" alt="" />
          </div>
          <div className="course-list">
            <div className="course-list-title">甄选课程</div>
            <div className="course-list-item" onClick={() =>this.gotoCourseDetail('/getDetail?id=224')}>
              <div className="course-list-item-tig">0基础入门Python人工智能</div>
              <div className="flex-row">
                <img
                  className="course-list-item-img"
                  src="https://www.julyedu.com/Public/img/img1@3x.84afbc45.png"
                  alt=""
                />
                <div className="course-list-item-content">
                  <div className="course-list-item-title">Python图文课</div>
                  <div className="course-list-item-des">课时：17节闯关训练+17实操</div>
                  <div>
                    <a
                      className="course-list-item-btn"
                      onClick={(e) =>{e.stopPropagation();this.showQuan(0)}}
                    >领劵0元购</a>
                  </div>
                </div>
              </div>
            </div>
            <div className="course-list-item" onClick={() =>this.gotoCourseDetail('/getDetail?id=328')}>
              <div className="course-list-item-tig">从0学python数据分析</div>
              <div className="flex-row">
                <img
                  className="course-list-item-img"
                  src="https://www.julyedu.com/Public/img/img2@3x.e9395148.png"
                  alt=""
                />
                <div className="course-list-item-content">
                  <div className="course-list-item-title">Python数据分析</div>
                  <div className="course-list-item-des">课时：31节课</div>
                  <div>
                    <a
                      className="course-list-item-btn"
                      onClick={(e) =>{e.stopPropagation();this.showQuan(1)}}
                    >领劵0元购</a>
                  </div>
                </div>
              </div>
            </div>
            <div className="course-list-item" onClick={() => {
                              this.gotoCourseDetail('/getDetail?id=280')
                            }}>
              <div className="course-list-item-tig">0基础入门机器学习</div>
              <div className="flex-row">
                <img
                  className="course-list-item-img"
                  src="https://www.julyedu.com/Public/img/img3@3x.d7a07310.png"
                  alt=""
                />
                <div className="course-list-item-content">
                  <div className="course-list-item-title">机器学习图文课</div>
                  <div className="course-list-item-des">课时：31节闯关课</div>
                  <div>
                    <a
                      className="course-list-item-btn"
                      onClick={(e) =>{e.stopPropagation();this.showQuan(2)}}
                    >领劵0元购</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="course-des">
            <div className="course-des-tilte">上课方式</div>
            <div className="course-des-content">
              <div className="course-des-container">
                <div className="course-des-content-row">
                  <span className="course-des-icon">01</span>
                  <span className="course-des-text">
                    点击上方课程按钮领取优惠券--点“直接购买”即可0元购课
                  </span>
                </div>
                <div className="course-des-content-row">
                  <span className="course-des-icon">02</span>
                  <span className="course-des-text">
                    登陆七月在线官网或七月在线APP一学习，可看到已购买的课程
                  </span>
                </div>
                <div className="course-des-content-row">
                  <span className="course-des-icon">03</span>
                  <span className="course-des-text">
                    课程随到随学，购买后加班主任进群领课件、代码及享受答疑服务
                  </span>
                </div>
              </div>
            </div>
          </div>
        
        </div>
        {modelBool &&
          <div className="python-model">
            <div className="python-course-model-box">
              <img className="quan" src="https://www.julyedu.com/Public/img/tanchuang@3x.8f8490fd.png" onClick={() =>{this.gotoCourse()}} alt="" />
              <div className="course-prise">
                <div className="course-prise-first-child">
                  {this.state.prise}
                </div>
                <div className="course-prise-last-child">
                  {this.state.courseName}
                </div>

              </div>
              <img onClick={() =>this.close()} className="CloseCircle" src="data:image/png;base64, " alt="" />
            </div>
          </div>
        }
      </div>
    )
  }
}

export default connect((state) => ({ user: state.user }), null)(PythonCourse)
