/* eslint-disable jsx-a11y/anchor-is-valid, no-script-url */
import React, { Component } from "react"
import "./give-courses.scss"
import { getParam, http } from "src/utils"
import { Toast } from "antd-mobile"
import { Link } from "react-router-dom"

function showToast(text) {
  Toast.info(text, 2, null, false)
}

class GiveCourses extends Component {
  state = {
    banner: "",
    courses: [],
    rule: "",
    awardstext: "",
    rankList: {},
    isShow: false,
    animate: false,
    marqueeList: [],
  }

  componentDidMount() {
    document.title =
      "充电季，AI好课免费学！折叠键盘、蓝牙耳机、纸质书等包邮送！"

    http.get(`${API["base-api"]}/assistance/detail`).then((res) => {
      const { data, errno, msg } = res.data
      if (errno === 200) {
        this.setState({
          banner: data["active_info"]["m_banner"],
          courses: data.course_info,
          rule: data["active_info"]["rule"],
          awardstext: data["active_info"]["awards_text"].split("\n\n"),
          query: data["active_info"]["activity_name"],
        })

        this.isRouter(data["active_info"]["activity_name"])
      } else {
        showToast(msg)
      }
    })

    this.getRankList()
    this.getMarqueeList()
    setInterval(this.showMarquee, 5000)
    setInterval(this.getMarqueeList, 60000)
  }

  getRankList = () => {
    http.get(`${API["base-api"]}/assistance/ranking_list/50`).then((res) => {
      const { data, errno, msg } = res.data
      if (errno === 200) {
        this.setState({
          rankList: {
            list: data.list,
            first: data.list[0],
            second: data.list[1],
            third: data.list[2],
            other: data.list.slice(3, 50),
            isMyList: data["nickname"],
            myList: data["nickname"] && data,
          },
        })
      } else {
        showToast(msg)
      }
    })
  }

  getMarqueeList = () => {
    http.get(`${API["base-api"]}/assistance/roll_tip`).then((res) => {
      const { errno, msg, data } = res.data
      if (errno === 200) {
        this.setState({
          marqueeList: data,
        })
      } else {
        showToast(msg)
      }
    })
  }

  showMarquee = () => {
    this.setState(
      {
        animate: true,
      },
      () => {
        setTimeout(() => {
          const [first, second] = this.state.marqueeList
          this.setState({
            animate: false,
            marqueeList: [second, first],
          })
        }, 500)
      }
    )
  }

  isRouter = (param) => {
    if (decodeURIComponent(getParam("activename")) !== param) {
      this.props.history.push("/")
    }
  }

  render() {
    const {
      banner,
      courses,
      rule,
      awardstext,
      rankList,
      isShow,
      animate,
      marqueeList,
    } = this.state
    var _czc = window._czc || []
    return (
      <div id={"give-courses"}>
        <div className="banner">
          <img src={banner} alt="" />
        </div>
        <div className="give-box">
          {courses.map((course) => {
            return (
              <div className="give-course" key={course.id}>
                <Link
                  className="give-course-img"
                  to={`/detail?id=${course.course_id}`}
                >
                  <img src={course.image_name} alt="" />
                </Link>
                <ul className="give-course-mess">
                  <li className="course-title">
                    <a href="javascript:">{course.course_title}</a>
                  </li>
                  <li className="course-teacher">
                    <span className="tag">讲师</span>
                    {course["teachers"]}
                  </li>
                  <li className="course-time">
                    <span className="tag">开课时间</span>
                    {course["start_time"]}
                  </li>
                  <li
                    className="toreceive"
                    onClick={() => {
                      _czc &&
                        _czc.push([
                          "_trackEvent",
                          `课程id=${course.course_id}`,
                          "免费领取课程",
                        ])
                      console.log(course.course_id)
                      this.setState({ isShow: true })
                    }}
                  >
                    免费领取课程
                  </li>
                </ul>
              </div>
            )
          })}
          <p className="rule-title">活动规则</p>
          <div
            className="rule-list"
            dangerouslySetInnerHTML={{ __html: rule }}
          />

          <div className="marquee_box">
            <ul className={`marquee_list ${animate ? "marquee_top" : ""}`}>
              {marqueeList.length
                ? marqueeList.map((item, index) => {
                    return (
                      <li key={index}>
                        <img src={item.head_img} alt="" />
                        <span>{item["nickname"]}</span>
                        {item["word"]}
                      </li>
                    )
                  })
                : null}
            </ul>
          </div>
        </div>

        <div className="set-prize">
          <p className="set-prize-title">
            <img
              src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jpsz_icon.png"
              alt=""
            />
            奖品设置
          </p>
          <div className="set-prize-content">
            {awardstext &&
              awardstext.length &&
              awardstext.map((item, index) => <p key={index}>{item}</p>)}
          </div>
        </div>

        <div className="ranking-list">
          <div className="ranking_title">
            <img
              src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jbei_icon.png"
              alt=""
            />
            <span>排行榜</span>
            <p>数据实时更新 只显示Top50</p>
          </div>
          <table border="0" cellPadding="0" cellSpacing="0">
            <thead>
              <tr>
                <td>排名</td>
                <td>用户</td>
                <td>邀请人数</td>
              </tr>
            </thead>
            <tbody>
              {rankList.list && rankList.list.length > 0 ? (
                <tr>
                  <td>
                    <img
                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png"
                      alt=""
                    />
                  </td>
                  <td>
                    <img src={rankList.first.head_img} alt="" />
                    <span>{rankList.first.name}</span>
                  </td>
                  <td>{rankList.first.num}</td>
                </tr>
              ) : null}

              {rankList.list && rankList.list.length > 1 ? (
                <tr>
                  <td>
                    <img
                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png"
                      alt=""
                    />
                  </td>
                  <td>
                    <img src={rankList.second.head_img} alt="" />
                    <span>{rankList.second.name}</span>
                  </td>
                  <td>{rankList.second.num}</td>
                </tr>
              ) : null}

              {rankList.list && rankList.list.length > 2 ? (
                <tr>
                  <td>
                    <img
                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png"
                      alt=""
                    />
                  </td>
                  <td>
                    <img src={rankList.third.head_img} alt="" />
                    <span>{rankList.third.name}</span>
                  </td>
                  <td>{rankList.third.num}</td>
                </tr>
              ) : null}

              {rankList.list && rankList.list.length && rankList.list.length > 3
                ? rankList.other.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{index + 4}</td>
                        <td>
                          <img src={item.head_img} alt="" />
                          <span>{item.name}</span>
                        </td>
                        <td>{item.num}</td>
                      </tr>
                    )
                  })
                : null}

              {rankList.isMyList && (
                <tr className="ismylist">
                  <td>{rankList.myList["ranking"]}</td>
                  <td>
                    <img src={rankList.myList.head_img} alt="" />
                    <span>{rankList.myList["nickname"]}</span>
                  </td>
                  <td>{rankList.myList["inviter_num"]}</td>
                </tr>
              )}
            </tbody>
          </table>
          <p className="btm" />
        </div>

        <p className="julynotice">*本活动最终解释权归七月在线所有*</p>

        {isShow && (
          <div className="code-mbc">
            <div className="code-box">
              <p className="code-title">
                进入服务号回复<i>77</i>免费领取课程
              </p>
              <img
                id="qrCodeWpay"
                src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg"
                alt=""
              />
              <p className="btmmess">长按扫码进入服务号</p>
            </div>
            <i
              className="close iconfont iconiconfront-2"
              onClick={() => {
                this.setState({ isShow: false })
              }}
            />
          </div>
        )}
      </div>
    )
  }
}

export default GiveCourses
