import React, { Component } from 'react';
import {PageContext} from './components/context'

import './App.css';
import {graphqls} from './api/graphql_request'
import {getStoreByProps} from './api/graphql/store'
import {getSlidesByProps} from './api/graphql/slides'

import TabBarBottom from './components/App/TabBarBottom'
import HomePage from './components/HomePage/HomePage'
import UserPage from './components/UserPage/userPage'
import StoreDetailPage from './components/StoreDetailPage/StoreDetailPage'
import AllStorePage from './components/AllStorePage/AllStorePage'


class OrderApp extends Component {

  constructor(props){
    super(props)
    this.state={
      page:'home',
      store:[],
      slide:[],
      currentStore:{}
    }
    this.changePage=this.changePage.bind(this)
    this.setCurrentStore=this.setCurrentStore.bind(this)
  }

  componentDidMount(){
    this.getStores()
    this.getSlides()
  }

  changePage(page){
    this.setState({page})
  }
  //
  setCurrentStore(store){
    console.log(store)
    this.setState({currentStore:store})
  }

  getStores(){
    //获取所有商家
    return graphqls(getStoreByProps,{}).then((e)=>{
      console.log(e.storebyprops)
      this.setState({
        store:e.storebyprops
      })
    })
  }

  getSlides(){
    return graphqls(getSlidesByProps,{}).then((e)=>{

      this.setState({ slide:e.slidsbyprops })
    })
  }


  //根据状态渲染页面
  renderPage(page){
    switch(page){
      case ('home'):
        //console.log('++++1+++++',this.state.store)
        return(
          <div className="pageWrap">
            <div className="scrollPage">
              <HomePage changePage={this.changePage} store={this.state.store} slide={this.state.slide} setCurrentStore={this.setCurrentStore}/>
            </div>
          </div>
          )

      case ('user'):
        return(
          <div className="pageWrap">
            <div className="scrollPage">
              <UserPage changePage={this.changePage} />
            </div>
          </div>
        )

      case ('detail'):
        return(
          <div className="pageWrap">
            <div className="scrollPage">
              <StoreDetailPage changePage={this.changePage} store={this.state.currentStore}/>
            </div>
          </div>
        )

      case ('all'):
        return(
          <div className="pageWrap">
            <div className="scrollPage">
              <AllStorePage changePage={this.changePage} store={this.state.currentStore}/>
            </div>
          </div>
        )


        
 
      default:
          return(
            <div>页面加载失败,请刷新页面</div>
          )
    }
  }

  renderBottom(){
    let page=this.state.page
    if(page==='home'||page==='user'){
      return(<TabBarBottom changePage={this.changePage}/>)
    }
  }

  render() {
    const changePage=this.changePage
    return (
      <div className="AppWrap">
        <div className="phone6s">
          <div className="App">
          <div className="App orderApp">
            <PageContext.Provider value={changePage}>
              {this.renderPage(this.state.page)}
              {this.renderBottom()}
            </PageContext.Provider>
        </div>
          </div>
        </div>
      </div>
    );
  }
}

export default OrderApp;