/* eslint-disable */
import React, { Component } from "react"
import { Accordion, Toast } from "antd-mobile"
import { HeaderBar, CallApp } from "src/common"
import { http, getParam, browser } from "src/utils"
import "./index.scss"
import { connect } from "react-redux"
import Mask from "./../poup/index.js"
import ShareRank from "src/components/detail/shareRank"

class PythonStudy extends Component {
  constructor(props) {
    super(props)
    this.state = {
      toApp: false,
      courseInfo: "",
      orderId: "",
      syllabus: "",
      learning: "",
      isShowChannel: window.sessionStorage.getItem("isShowSiteWindowByChannel"),
    }
  }

  componentDidMount() {
    this.fetchCourseDetail()
  }

  fetchCourseDetail = () => {
    const { buyTry } = this.props

    http
      .get(
        `${API["home"]}/web/it_detail?course_id=${getParam(
          "id"
        )}&is_pay=1&buy_try=${buyTry}`
      )
      .then((res) => {
        const { data, code, msg } = res.data
        if (code === 200) {
          this.setState({
            courseInfo: data.course_info,
            syllabus: data.syllabus,
            learning: data.learning,
          })
        } else {
          Toast.info(msg, 2)
        }
      })
  }

  Change = (data) => {
    let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]
    let newStr = ""
    let str = data.toString()
    let ci = Number(str) % 10
    let cs = Math.floor(Number(str) / 10)
    let cv = ""
    if (str.length > 1) {
      if (cs == 1) {
        cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
      } else {
        cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
      }
    } else {
      cv = cn[ci - 1]
    }
    newStr = str.replace(str, cv)
    return newStr
  }

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

  toPythonHome = (isUnlock) => {
    if (Number(isUnlock) === 1) {
      this.setState({
        toApp: true,
      })
    }
  }

  toLearn = () => {
    this.setState({
      toApp: true,
    })
  }
  closePop = () => {
    this.setState({
      toApp: false,
    })
  }

  creatOid = () => {
    http
      .post(`${API["base-api"]}/sys/it_baoming/create`, {
        course_id: getParam("id"),
      })
      .then((res) => {
        const { errno, data, msg } = res.data
        if (errno === 200) {
          this.setState({
            orderId: data.oid,
          })
          this.weixinPay(data.oid)
        } else {
          Toast.info(msg, 2)
        }
      })
  }
  // 微信支付
  weixinPay = (orderId) => {
    // 微信内部-支付
    if (browser.isWeixin) {
      let url =
        window.location.origin +
        window.location.pathname +
        "?id=" +
        getParam("id")
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" +
        encodeURIComponent(url + "&aa=bb&oid=" + orderId).toLowerCase() +
        "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
    } else {
      // 微信外部-支付
      http
        .get(`${API["base-api"]}/pay/wxpay/wap_charge/oid/${orderId}`)
        .then((res) => {
          if (res.data.errno === 0) {
            window.location.href =
              res.data.data.url +
              "&redirect_url=" +
              encodeURIComponent(
                window.location.href + "&weixinpay=1&oid=" + orderId
              ).toLowerCase()
          } else {
            Toast.info(res.data.msg, 2)
          }
        })
    }
  }

  render() {
    const { user } = this.props
    const uid = user && user.data && user.data.uid
    const { courseInfo, syllabus, learning, toApp } = this.state
    return (
      <div className="python-study">
        <HeaderBar title="机器学习小课" arrow={true} />
        <div className="python-study__header">
          <div className="python-study__course">
            <h2 className="python-study__course-name">机器学习小课</h2>
            {courseInfo.buy_try == 0 && (
              <p className="python-study__course-contact">
                <span>
                  {courseInfo.contact_type == 1
                    ? "上课请加QQ学习群"
                    : "添加助教微信入群"}
                  ：{courseInfo.course_qq}
                </span>
                <span>并备注您的学号：{uid}</span>
              </p>
            )}
          </div>
          {learning.schedule > 0 && (
            <div className="python-study__progress">
              <h2 className="python-study__progress-title">
                学习进度
                {!!learning.day && (
                  <span>
                    （已连续学习<span>{learning.day}</span>天）
                  </span>
                )}
              </h2>
              <div className="python-study__progress-bar">
                <i style={{ width: learning.schedule + "%" }} />
                <span
                  className="python-study__progress-tip"
                  style={{ left: learning.schedule + "%" }}
                >
                  {learning.schedule + "%"}
                </span>
              </div>
            </div>
          )}

          {this.state.isShowChannel == 1 && <CallApp className="toapp" />}
        </div>
        {!!courseInfo.is_dist && (
          <div className={"dist-wrapper"}>
            <ShareRank courseInfo={courseInfo} />
          </div>
        )}
        <Accordion
          defaultActiveKey="0"
          className="python-study__stage"
          onChange={this.onChange}
        >
          {syllabus &&
            syllabus.length > 0 &&
            syllabus.map((syllabusItem, index) => {
              let header = `第${this.Change(syllabusItem.stage)}阶段：${
                syllabusItem.name
              }`
              return (
                <Accordion.Panel header={header} className="pad" key={index}>
                  {syllabusItem.lessons &&
                    syllabusItem.lessons.length > 0 &&
                    syllabusItem.lessons.map((lessonsItem, index) => {
                      return (
                        <div key={index}>
                          <h2 className="python-study__pass">
                            第{lessonsItem.shut}关 {lessonsItem.name}
                            {lessonsItem.complete == 1 && (
                              <i className="python-study__pass-tag">闯关完成</i>
                            )}
                          </h2>

                          <div
                            className="python-study__subject"
                            style={{
                              opacity:
                                lessonsItem.info.is_unlock == 0 ? ".6" : "1",
                            }}
                            onClick={() => {
                              this.toPythonHome(lessonsItem.info.is_unlock)
                            }}
                            key={index}
                          >
                            <img
                              className="python-study__subject-icon"
                              src={lessonsItem.info.img_url}
                              alt=""
                            />
                            {lessonsItem.info.is_unlock == 1 &&
                              lessonsItem.info.complete == 1 && (
                                <i
                                  className="python-study__subject-status"
                                  data-status="complete"
                                />
                              )}
                            {lessonsItem.info.is_unlock == 0 && (
                              <i
                                className="python-study__subject-status"
                                data-status="lock"
                              />
                            )}
                            <div className="python-study__subject-content">
                              <h2 className="python-study__subject-title text-overflow-1">
                                {lessonsItem.info.name}
                              </h2>
                            </div>
                          </div>

                          {lessonsItem.project && (
                            <div
                              className="python-study__subject"
                              style={{
                                opacity:
                                  lessonsItem.project.is_unlock == 0
                                    ? ".6"
                                    : "1",
                              }}
                              onClick={() => {
                                this.toPythonHome(lessonsItem.project.is_unlock)
                              }}
                            >
                              <img
                                className="python-study__subject-icon"
                                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project-icon.png"
                                alt=""
                              />
                              {lessonsItem.project.is_unlock == 1 &&
                                lessonsItem.project.complete == 1 && (
                                  <i
                                    className="python-study__subject-status"
                                    data-status="complete"
                                  />
                                )}
                              {lessonsItem.project.is_unlock == 1 &&
                                lessonsItem.project.complete == 0 && (
                                  <i
                                    className="python-study__subject-status"
                                    data-status="lock"
                                  />
                                )}
                              <div className="python-study__subject-content">
                                <h2 className="python-study__subject-title text-overflow-1">
                                  {lessonsItem.project.name}
                                </h2>
                                {lessonsItem.project.is_must == 1 && (
                                  <span className="python-study__subject-tag">
                                    必做练习
                                  </span>
                                )}
                              </div>
                            </div>
                          )}
                        </div>
                      )
                    })}
                  {index === 0 &&
                    syllabus[0].lessons[2].info.complete == 1 &&
                    courseInfo.buy_try == 1 && (
                      <div className="study-end">
                        试学结束，<span>{courseInfo.price1}元</span>学习全部课时
                        <a
                          className="tobuy"
                          onClick={() => {
                            this.creatOid()
                          }}
                        >
                          立即报名
                        </a>
                      </div>
                    )}
                </Accordion.Panel>
              )
            })}
        </Accordion>
        {learning.schedule == 0 && (
          <span onClick={this.toLearn} className="python-study__button">
            开始学习
          </span>
        )}
        {learning.schedule != 0 && learning.schedule != 100 && (
          <span onClick={this.toLearn} className="python-study__button">
            继续学习
          </span>
        )}
        {learning.schedule == 100 && (
          <button className="python-study__button python-study__over">
            已学完全部课时
          </button>
        )}

        {toApp && <Mask closePop={this.closePop} type={2} />}
      </div>
    )
  }
}

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