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 "@/utils"
import Loading from '@/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 {dispatch, history} = this.props;
    // dispatch(getCourses(id, () => {
    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/>

            <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'
                             onClick={() => this.toCourseDetail(item.course_id)}>
                            {/* <Link to={`/detail?id=${item.course_id}`}> */}
                            {item.course_title}
                            {/* </Link> */}
                          </p>
                          <p className='contact text-overflow-2'>{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;