/* 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"
import cookie from "js-cookie"
import tanchuang from "src/assets/image/tanchuang.png"

let courseObj = [{
  // url:'/getDetail?id=224&distcode=0&ccode=62d62d586cdd8',
  url: 'https://www.julyedu.com/course/getDetail/224?ccode=62d62d586cdd8',
  prise: "99.00",
  name: '人工智能',
  code: "B4C719F1D6"
},
{
  // url:'/getDetail?id=461&distcode=0&ccode=62d62d586cdd8',
  url: 'https://www.julyedu.com/course/getDetail/461?ccode=62d62d586cdd8',
  prise: "199.00",
  name: '数据分析',
  code: "7DE0F40CE5"
},
{
  // url:'/getDetail?id=280&distcode=0&ccode=62d62d586cdd8',
  url: 'https://www.julyedu.com/course/getDetail/280?ccode=62d62d586cdd8',
  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,
      getBool: false,
      quanArr:[]
    }
  }

  componentDidMount() {
    const { user } = this.props
    const uid = user && user.data && user.data.uid
    console.log(cookie.get("token"));
    //领取过券
    if (cookie.get("getBool")) {
      this.setState({
        getBool: true
      })
    }
    let codeArr = cookie.get("quanArr")
    if (codeArr) {
      this.setState({
        quanArr:JSON.parse(codeArr)
      })
    }
    // if (cookie.get("token") && cookie.get("uid")) {
    //   console.log("已经登录")
    // }else{
    //   console.log('未登录');
    //   this.props.history.push("/passport")
    // }
    // if (!uid) {
    //   console.log('未登录');
    //   this.props.history.push("/passport")
    // }else{
    //   console.log('登了');
    // }
  }
  quanBool=(code) =>  this.state.quanArr.indexOf(code)>-1
  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) {
        console.log('已经登录');
      } else {
        //为登录，去登录
        console.log('去登录');
        this.props.history.push("/passport")
      }
    })
  }
  gotoCourse = (code) => {
    const _this = this
    let codeArr = cookie.get("quanArr")?cookie.get("quanArr"):"[]"
    
    let newQuanArr = [...new Set([...JSON.parse(codeArr),code])]
    cookie.set("quanArr", JSON.stringify(newQuanArr))
    if (cookie.get("token") && cookie.get("uid")) {
      console.log("已经登录")
      http
        .post(`${API.home}/m/coupon/exchange`, {
          code: code,
          type: "order",
        })
        .then((res) => {
          const data = res.data
          if (data.code === 200) {
            if (!cookie.get("getBool")) {
              Toast.info('领取成功', 2)
            }
            console.log('领取成功');
          } else {
            console.log('领取过了');
            Toast.info("您已成功领券，请勿重复领取")
          }
          console.log('进入详情页');
          if (_this.state.CourseUrl) {
            window.location.href = _this.state.CourseUrl
          } else {
            let url = courseObj.find(it=>it.code == code)?.url
            window.location.href = url
          }
          
          // history.push(_this.state.CourseUrl)
        })
    } else {
      console.log('未登录');
      Toast.info('领取成功', 2)
      cookie.set("getBool", true)
      
      setTimeout(function () {
        _this.props.history.push("/passport")
      }, 1000)
    }

  }
  gotoCourseDetail = (url) => {
    // const { history } = this.props
    // history.push(url)
    window.location.href = 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, getBool } = 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('https://www.julyedu.com/course/getDetail?id=224&distcode=0&ccode=62d62d586cdd8')}>
              <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>
                    {this.quanBool('B4C719F1D6') ?
                      <a
                        className="course-list-item-btn2"
                        onClick={(e) => { e.stopPropagation(); this.gotoCourse('B4C719F1D6') }}
                      >立即使用</a>
                      :
                      <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('https://www.julyedu.com/course/getDetail?id=461&distcode=0&ccode=62d62d586cdd8')}>
              <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>
                  {this.quanBool('7DE0F40CE5') ?
                      <a
                        className="course-list-item-btn2"
                        onClick={(e) => { e.stopPropagation(); this.gotoCourse('7DE0F40CE5') }}
                      >立即使用</a>
                      :
                      <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('https://www.julyedu.com/course/getDetail?id=280&distcode=0&ccode=62d62d586cdd8')
            }}>
              <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>
                  {this.quanBool('8AED2B4DE5') ?
                      <a
                        className="course-list-item-btn2"
                        onClick={(e) => { e.stopPropagation(); this.gotoCourse('8AED2B4DE5') }}
                      >立即使用</a>
                      :
                      <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(code) }} 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)
