import { Component } from 'react';
import Taro from '@tarojs/taro';
import { connect } from 'react-redux'
import { View, Image } from '@tarojs/components'
import { set } from '../../actions/counter'
import { getProjecList } from '../../utils/servers/servers'
import {resourceAddress} from '../../utils/config';

import NavBar from '../../components/NavBar';
import ListBottomStart  from '../../components/common/listBottomStart';

import './index.less'

import background from '../../assets/images/background.png';

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  set (value) {
    dispatch(set(value))
  }
}))
class Index extends Component {

  inst = Taro.getCurrentInstance()

  constructor(props) {
    super(props);
    this.state={
      list: [],
      pageNo: 0,
      listState: 'LOADING',
    }
    this.getProjecList= this.getProjecList.bind(this);
  }

  componentDidShow() {
    //设置barter的选择状态
    this.props.set(0);
  }

  async componentDidMount() {
    await this.getProjecList();
  }

  onPullDownRefresh(){
    this.getProjecList();
  }

  onReachBottom(){
    this.getProjecList(this.state.pageNo+1);
  }

  async getProjecList (pageNo = 1){
    this.setState({
      listState: 'LOADING'
    })
    let msg = await getProjecList({
      pageNo: pageNo,
      pageSize: 10,
    });
    if(msg.error.length === 0){
      if(msg.data.totalCount === 0){
        this.setState({
          listState: 'NO_DATA'
        })
      }else if(msg.data.totalCount === this.state.list.length && pageNo !== 1){
        Taro.showToast({title:'没有更多数据了',icon:'none'});
        this.setState({
          listState: 'NO_MORE_DATA'
        })
      }else{
        this.setState({
          list:pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
          pageNo: msg.data.pageNo
        },()=>{
          if(msg.data.totalCount === this.state.list.length){
            this.setState({
              listState: 'NO_MORE_DATA'
            })
          }
        })
      }
    }else{
      Taro.showToast({title:msg.error[0].message,icon:'none'});
      this.setState({
        listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
      })
    }
    Taro.stopPullDownRefresh();
  }

  render () {
    return (
      <View className='indexPage'>
        <NavBar
          extClass='NavBar'
          title='课程'
          background='#7ac7ff'
          onHome={()=>{}}
        />
        <Image src={background} className='background'/>
        <View className='title'>推荐</View>
        <View className='list'>
          {
            this.state.list.map((v,k)=>(
              <View key={k} className='item' onClick={()=>{
                Taro.navigateTo({
                  url:'/pages/details/index?id='+v.id
                })
              }}>
                <View className='infor'>
                  <View className='name'>{v.name}</View>
                  <View className='createTimes'>{v.typeName}</View>
                  <View className='amount'>
                    <View className='money'>¥</View>
                    {v.amount}
                  </View>
                </View>
                <Image className='thumbnailUrl' src={resourceAddress+v.thumbnailUrl} resizeMode='center'/>
              </View>
            ))
          }
          <ListBottomStart
            state={this.state.listState}
            reload={()=>{
              this.getProjecList(this.state.pageNo+1);
            }}/>
        </View>
      </View>
    )
  }
}

export default Index

