/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from "react"
import { VList } from "../../common"
import { Tabs, WhiteSpace, Toast } from "antd-mobile"
import "./index.scss"
import HeaderSearch from "../../common/HeaderSearch/index"
import { http } from "src/utils"
import Loading from "src/common/Loading"
import { connect } from "react-redux"

@connect(({ user }) => ({
  user,
}))
class Preferential extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dataList: [],
      courseStatus: 0,
      isLoading: true,
    }
  }

  componentDidMount() {
    this.specialSale()
  }

  // 限时特惠
  specialSale = () => {
    http.get(`${API.home}/m/home/weekDiscounts`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          dataList: res.data.data,
          isLoading: false,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // 砍价专区
  bargain = () => {
    http.get(`${API.home}/m/home/bargainZone`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          dataList: JSON.stringify(res.data.data) === "{}" ? [] : res.data.data,
          isLoading: false,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // 一键拼团
  group = () => {
    http.get(`${API.home}/m/home/grouponList`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          dataList: res.data.data,
          isLoading: false,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // tab 切换
  ontabclick = (tab, index) => {
    this.setState({
      courseStatus: index,
      isLoading: true,
    })
    switch (index) {
      case 0:
        this.specialSale()
        break
      case 1:
        this.bargain()
        break
      default:
        this.group()
    }
  }

  toCourseDetail = (id) => {
    const { history } = this.props
    history.push(`/detail?id=${id}`)
  }

  render() {
    const tabs = [
      { title: "限时特惠" },
      { title: "砍价专区" },
      { title: "一键拼团" },
    ]
    const { user = {} } = this.props
    let isLogin = user.data && user.data.uid ? true : false
    return (
      <div className="preferential">
        <HeaderSearch isLogin={isLogin} />
        <Loading isLoading={this.state.isLoading}>
          <div className="class-content">
            <WhiteSpace />
{console.log(tabs)}
            <Tabs
              tabs={tabs}
              animated={false}
              onChange={(tab, index) => this.ontabclick(tab, index)}
              swipeable={false}
              page={this.state.courseStatus}
              renderTabBar={(props) => (
                <div className={"custom-tab-bar"}>
                  <Tabs.DefaultTabBar {...props} />
                </div>
              )}
            ></Tabs>
            <div className="tabs">
              {this.state.dataList.length > 0 ? (
                <ul>
                  {this.state.dataList.map((item, index) => {
                    const Info = (
                      <div className="info">
                        <p
                          className="title text-overflow-2"
                          onClick={() => this.toCourseDetail(item.course_id)}
                        >
                          {/* <Link to={`/detail?id=${item.course_id}`}> */}
                          {item.course_title}
                          {/* </Link> */}
                        </p>
                        <p className="contact text-overflow-1">
                          {item.course_desc}
                        </p>
                        <div className="des">
                          {!item.is_buy && (
                            <p className="course-price">
                              {this.state.courseStatus === 0 && (
                                <span className="price">特惠价：</span>
                              )}
                              <span className="new">¥{item.price1}</span>
                              <span className="old">¥{item.price0}</span>
                            </p>
                          )}
                          {item.is_buy && <a className="isbuy">已购买</a>}
                        </div>
                      </div>
                    )
                    const status = !item.is_buy && (
                      <div>
                        {this.state.courseStatus === 1 && (
                          <p className="course-status">
                            砍价减{item.bargain_price}元
                          </p>
                        )}
                        {this.state.courseStatus === 2 && (
                          <p className="course-status">拼团价{item.price}元</p>
                        )}
                        {item.is_aist && <span className="return_cash"></span>}
                      </div>
                    )
                    return (
                      <VList
                        key={index}
                        img={item.image_name}
                        id={item.course_id}
                        status={status}
                        info={Info}
                        toDetail={this.toCourseDetail}
                      />
                    )
                  })}
                </ul>
              ) : (
                <div className={"notdata"}>
                  特惠课程都去参加活动了，可以去活动页看看哦~
                </div>
              )}
            </div>
            <WhiteSpace />
          </div>
        </Loading>
      </div>
    )
  }
}

export default Preferential