/* eslint-disable eqeqeq, jsx-a11y/anchor-is-valid */
import React, { Component } from "react"
import "./index.scss"
import { http, SendMessageToApp, getParam } from "src/utils"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
import { Toast } from "antd-mobile"
import cookie from "js-cookie"
import { setCurrentUser, startFetchUser } from "src/store/userAction"
import { addDays } from "date-fns"

@connect(
  (state) => ({
    user: state.user,
  }),
  { setCurrentUser, startFetchUser }
)
class NewVip extends Component {
  state = {
    userInfoList: [],
    isSetmeal: [],
    isshowPrice: false,
    notice_content: "", // 提示
    countdown: "", // 倒计时
    cutindex: 0,
    lowPrice: "",
    tobuyID: "",
    list1: [
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/39376e2038.png",
        src: "/getDetail?id=280",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/e61f810c30.png",
        src: "/getDetail?id=293",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1b56e21e68.png",
        src: "/getDetail?id=196",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/07dafc3480.png",
        src: "/getDetail?id=216",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/d9ca2ad5e8.png",
        src: "/getDetail?id=262",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/a7e5ab0af6.png",
        src: "/getDetail?id=232",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/c9a6779b75.png",
        src: "/getDetail?id=181",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/more2.png",
        src: "",
      },
    ], // 特权1
    list2: [
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/3665c01210.png",
        src: "/getDetail?id=136",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/c7b0eeff40.png",
        src: "/getDetail?id=123",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/bfaddc5039.png ",
        src: "/getDetail?id=140",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/ab8bb774c3.png",
        src: "/getDetail?id=133",
      },
      {
        img:
          "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/efa0cad9a5.jpg",
        src: "/getDetail?id=146",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/more1.png",
        src: "",
      },
    ], // 特权2
    teaList: [
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/chen.png",
        name: "陈博士",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/seven.png",
        name: "Seven",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/zhu.png",
        name: "褚博士",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/yang.png",
        name: "杨老师",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/guan.png",
        name: "管博士",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/li.png",
        name: "李弘杨",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/sun.png",
        name: "孙老师",
      },
      {
        img:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/shi.png",
        name: "史老师",
      },
    ], // 讲师
    tip: [
      "365*24小时不间断使用",
      "超高性能GPU硬件环境",
      "预装主流DL框架和数据集",
      "可自由上传私人数据集",
    ],
  }

  componentDidMount() {
    this.fetchNotice()
    this.fetchVipBag()

    // 获取App登录信息
    window["loginInfo"] = (result) => {
      this.loginInfo(result)
    }
    document.title =
      "VIP会员限时特惠，全平台在线课程免费学，GPU云实验平台免费用！——七月在线"
  }

  // 获取app登录数据
  loginInfo = (result) => {
    this.setState(
      {
        userInfoList: result,
      },
      () => {
        if (this.state.userInfoList.length) {
          this.props.startFetchUser()
          this.appLogin()
        }
      }
    )
  }

  // 保存cookie
  appLogin = () => {
    let expires = addDays(new Date(), 90)
    this.state.userInfoList.forEach((item, index) => {
      cookie.set("token", item.token, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("plat", item.plat, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("uid", item.uid, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("uname", item.uname, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
      cookie.set("avatar_file", item.avatar_file, {
        expires,
        path: "/",
        domain: ".julyedu.com",
      })
    })

    if (cookie.get("token") && cookie.get("uid")) {
      this.fetchNotice()
      this.fetchVipBag()
    }

    this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
  }
  transformUser = (res) => {
    let payload
    res.forEach((item, index) => {
      payload = {
        hasError: false,
        data: {
          username: item.uname,
          avatar: item.avatar_file,
          token: item.token,
          uid: item.uid,
        },
        isFetching: false,
      }
    })
    return payload
  }

  fetchVipBag = () => {
    const _this = this
    http.get(`${API.home}/sys/vip_bag`).then((res) => {
      const { code, data, msg } = res.data
      if (code === 200) {
        _this.setState({
          isSetmeal: data,
        })

        let lowPrice = Math.min.apply(
          Math,
          _this.state.isSetmeal.map((item) => {
            return item.price1
          })
        )
        _this.setState({
          lowPrice: lowPrice,
        })

        _this.setState({
          cutindex: _this.state.isSetmeal.findIndex(
            (item) => item.price1 == lowPrice
          ),
        })
        _this.setState({
          tobuyID: _this.state.isSetmeal[_this.state.cutindex].course_id,
        })
      } else {
        Toast.info(msg, 2, null, false)
      }
    })
  }

  fetchNotice = () => {
    const _this = this
    http.get(`${API.home}/sys/notice`).then((res) => {
      const { code, data, msg } = res.data
      if (code === 200) {
        _this.setState({
          notice_content: data.notice_content,
          date: data.date,
        })

        let date = data.date * 1000,
          day = 0,
          hours = 0,
          minutes = 0,
          seconds = 0
        setInterval(function () {
          date -= 1000
          day = `${parseInt(date / (60 * 60 * 24 * 1000))}`
          hours = `${parseInt(
            (date - day * 86400000) / (60 * 60 * 1000)
          )}`.padStart(2, 0)
          minutes = `${parseInt(
            (date - day * 86400000 - hours * 3600000) / 60000
          )}`.padStart(2, 0)
          seconds = `${parseInt(
            (date - day * 86400000 - hours * 3600000 - minutes * 60000) / 1000
          )}`.padStart(2, 0)
          _this.setState({
            countdown: `剩余${day}天${hours}时${minutes}分${seconds}秒`,
          })
        }, 1000)
      } else {
        Toast.info(msg, 2, null, false)
      }
    })
  }

  // 立即购买显示弹窗
  showPrice = () => {
    const isLogin = !this.props.user.hasError
    if (!isLogin) {
      this.toLogin()
    } else {
      this.setState({
        isshowPrice: true,
      })
    }
  }

  toLogin = () => {
    if (!getParam("version")) {
      this.props.history.push("/passport")
    } else {
      SendMessageToApp("toLogin")
    }
  }

  // 关闭弹窗
  close = () => {
    this.setState({
      isshowPrice: false,
    })
  }

  // 选择
  tochecked = (item, index) => {
    this.setState({
      cutindex: index,
      tobuyID: item.course_id,
    })
  }

  // 弹窗中的去购买
  tobuy = () => {
    const { isSetmeal, cutindex, tobuyID } = this.state
    let id = tobuyID === "" ? isSetmeal[cutindex].course_id : tobuyID
    if (!getParam("version")) {
      http
        .get(`${API["base-api"]}/m/cart/addtopreorder/[${id}]`)
        .then((res) => {
          if (res.data.errno === 0) {
            this.props.history.push(`/order?id=${id}`, { simple: 1 })
          } else {
            Toast.info(res.data.msg, 2, null, false)
          }
        })
    } else {
      SendMessageToApp("toPay", id)
    }
  }

  render() {
    const {
      notice_content,
      date,
      countdown,
      list1,
      list2,
      tip,
      teaList,
      isSetmeal,
      cutindex,
      isshowPrice,
      lowPrice,
    } = this.state
    return (
      <div className="new-vip">
        {/*banner*/}
        <div className="banner">
          <img
            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/vip-banner.png"
            alt=""
          />
        </div>

        {/*vip倒计时*/}
        {(notice_content || date) && (
          <div className="notice">
            {notice_content && (
              <div className="tip">
                <img
                  src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/linlin_icon.png"
                  alt=""
                />
                <span>{notice_content}</span>
              </div>
            )}
            {date && <div className="time">{countdown}</div>}
          </div>
        )}

        {/*VIP尊享五大服务*/}
        <div className="privilege-box">
          <div className="privilege-name">VIP尊享五大服务</div>

          {/*特权1*/}
          <div className="privilege-content">
            <PrivilegeTitle num="一" title="直播课程抢先学" />
            <PrivilegeCourse data={list1} />
          </div>

          <Connect position={"left"} />
          <Connect position={"right"} />

          {/*特权2*/}
          <div className="privilege-content">
            <PrivilegeTitle num="二" title="畅学全平台视频课程" />
            <PrivilegeCourse data={list2} />
          </div>

          <Connect position={"left"} />
          <Connect position={"right"} />

          {/*特权3*/}
          <div className="privilege-content">
            <PrivilegeTitle num="三" title="GPU&CPU双云平台免费用" />

            <div className="privilege-list-row">
              <div className="privilege-list-gpu">
                <img
                  src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/gpu1_bj%402x.png"
                  alt=""
                />
                <img
                  src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/gpu2_bj%402x.png"
                  alt=""
                />
              </div>

              <div className="privilege-list-tip">
                {tip.map((item, index) => {
                  return (
                    <div className="privilege-tip-item" key={index}>
                      <span>{index + 1}</span>
                      {item}
                    </div>
                  )
                })}
              </div>
            </div>
          </div>

          <Connect position={"left"} />
          <Connect position={"right"} />

          {/*特权4*/}
          <div className="privilege-content">
            <PrivilegeTitle num="四" title="讲师/助教团队24小时答疑" />

            <p className={"privilege-teacher"}>
              多达100人的AI师资团队提供咨询、答疑服务，助力涨薪
            </p>

            <TeacherList data={teaList} />
          </div>

          <Connect position={"left"} />
          <Connect position={"right"} />

          {/*特权5*/}
          <div className="privilege-content">
            <PrivilegeTitle num="五" title="在线作业及测评平台" />

            <div className="privilege-test">
              <img
                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/ce1_bj%402x.png"
                alt=""
              />
              <img
                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/ce2_bj%402x.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div className="tobuy" onClick={() => this.showPrice()}>
          {lowPrice}元 立即报名
        </div>

        {isshowPrice && (
          <div>
            <div className="checkout-mbc" onClick={() => this.close()}></div>
            <div className="checkout-box">
              <div className="title">
                <span>选择套餐</span>
                <span className={"close"} onClick={() => this.close()}>
                  &#10005;
                </span>
              </div>
              {isSetmeal.map((item, index) => {
                return (
                  <div
                    className={`checkout-list ${
                      cutindex === index ? "list-checked" : "list-check"
                    }`}
                    key={index}
                    onClick={() => this.tochecked(item, index)}
                  >
                    <div className="type">{item.bag_name}</div>
                    <div className="center">
                      {item.discounts_reason === "首购特惠" && (
                        <div className="discounts-reason">
                          {item.discounts_reason}
                        </div>
                      )}
                      {item.discounts_reason !== "首购特惠" && (
                        <div className="discounts-reason discounts-reason2">
                          {item.discounts_reason}
                        </div>
                      )}
                      <div className="price">
                        ¥<span className={"new-price"}>{item.price1}</span>
                        <s className={"old-price"}>¥{item.price0}</s>
                      </div>
                    </div>
                    <div className="check-box">
                      <span
                        className={`${
                          cutindex === index ? "checked" : "check"
                        }`}
                      ></span>
                    </div>
                  </div>
                )
              })}

              <button className="check-tobuy" onClick={() => this.tobuy()}>
                立即购买
              </button>
            </div>
          </div>
        )}
      </div>
    )
  }
}

function PrivilegeTitle(props) {
  return (
    <div className="privilege-title">
      <img
        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/19VIP/newvip/h5/viplog.png"
        alt=""
      />
      <span>服务{props.num}</span> {props.title}
    </div>
  )
}

function PrivilegeCourse(props) {
  return (
    <div className="privilege-list">
      {props.data.map((item, index) => {
        return (
          <div key={index}>
            {item.src === "" && (
              <a className={"course-box"}>
                <img src={item.img} alt="" />
              </a>
            )}
            {item.src !== "" && (
              <a className={"course-box"} href={item.src}>
                <img src={item.img} alt="" />
              </a>
            )}
          </div>
        )
      })}
    </div>
  )
}

function TeacherList(props) {
  return (
    <div className="teacher-list">
      {props.data.map((item, index) => {
        return (
          <div className="teacher-item" key={index}>
            <img src={item.img} alt="" />
            <span>{item.name}</span>
          </div>
        )
      })}
    </div>
  )
}

function Connect(props) {
  return (
    <div className={`connect ${props.position}`}>
      <span className="top"></span>
      <span className="con"></span>
      <span className="bottom"></span>
    </div>
  )
}

export default withRouter(NewVip)