import { React, useState, useEffect, } from 'react'
// .就是当前路径
import iconsearch from '@/assets/icons/housemantj/search.png'
import icontip from '@/assets/icons/housemantj/tip.png'
import location from '@/assets/icons/housemantj/location.png'
import msImage from '@/assets/icons/housemantj/ms.jpg'
import mjImage from '@/assets/icons/housemantj/mj.jpg'
import glImage from '@/assets/icons/housemantj/gl.jpg'
import msTip from '@/assets/icons/housemantj/foodtip.png'
import mjTip from '@/assets/icons/housemantj/mjtip.png'
import glTip from '@/assets/icons/housemantj/gltip.png'
import onlove from '@/assets/icons/housemantj/onlove.png'
import Taro,{useRouter } from '@tarojs/taro'
import { getIndexType, getIndexRecommender } from '@/services/home'

import './less/Recommend.less'


export default (props) => {
  const [activeTab, setActiveTab] = useState(0)
  const { params } = useRouter()
  const { tabJump } = params || {}
  const [typeList, setTypeList] = useState([])
  const [list, setList] = useState([])

  const tabs = [{ title: '附近' }].concat(typeList.map(x => ({...x, title: x.typeName })))
  
  useEffect(() => {
    console.log('----------11111111111-------->')
    getIndexType({ pageSize: 20 }).then((res) => {
      console.log('----------2222222------->')
      setTypeList(res.records || [])
    })

    getIndexRecommender().then((res) => {
      setList(res.records || [])
    })
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])

  // const tabs = [
  //   {
  //     title: '附近',
  //   },
  //   {
  //     title: '全城',

  //   },
  //   {
  //     title: '夫子庙',

  //   },
  //   {
  //     title: '新街口',

  //   },    
  // ]
  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)

    const tab = tabs[index].typeId
    // getIndexRecommender().then()
  }




  const onSearch = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/search/search' });
  }
  const toDetails = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/details/foodDetails/foodDetails' });
  }
  const toDetails2 = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/details/mjDetails/sceneryDetails' });
  }
  const onLogin = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/login/login' });
  }
  return (
    <view style={{ height: '100%', overflow: 'auto' }}>





      <view className='search' onClick={onSearch}>
        <input className='searchInput' disabled />
        <image className='searchicon' src={iconsearch} />
        <view className="searchword">搜索</view>
      </view>
      <view className='tip' onclick={onLogin}>
        <image className='tipicon' src={icontip} />
        <view className='tipword' >Tip : 饮食无大小，疫情防控请大家认真对待！</view>
      </view>
      <view className='index-tabs'>
        <view className='position'>
            <image className='location' src={location} />
            <view className='city'>南京</view>
          <view className='line' />
        </view>
        
        <scroll-view scroll-x="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">

        <mp-tabs
          tabClass='tabs-Unselected'
          swiperClass='tabs-swiper'
          activeClass='tabs-Selected'
          tabs={tabs}
          current={activeTab}
          onChange={handleTabChange}
          activeTab={activeTab}
        >
        </mp-tabs>
        </scroll-view>
      </view>
      <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
        <view className="waterfall">
          {/* {
            list.map()

          } */}


          {activeTab === 0 &&
            <>
              <view className='contentCard' onClick={toDetails2}>
                <view className='cardTop'>
                  <image mode='widthFix' src={mjImage} className='cCardimg' />
                  <image className='lefttips' src={mjTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={msImage} className='cCardimg' />
                  <image className='lefttips' src={msTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={glImage} className='cCardimg' />
                  <image className='lefttips' src={glTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'>9.99公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'>999/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={mjImage} className='cCardimg' />
                  <image className='lefttips' src={mjTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={mjImage} className='cCardimg' />
                  <image className='lefttips' src={mjTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={msImage} className='cCardimg' />
                  <image className='lefttips' src={msTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={mjImage} className='cCardimg' />
                  <image className='lefttips' src={mjTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard' onClick={toDetails}>
                <view className='cardTop'>
                  <image mode='widthFix' src={msImage} className='cCardimg' />
                  <image className='lefttips' src={msTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
            </>
          }
          {activeTab === 1 &&
            <>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={mjImage} className='cCardimg' />
                  <image className='lefttips' src={mjTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
              <view className='contentCard'>
                <view className='cardTop'>
                  <image mode='widthFix' src={msImage} className='cCardimg' />
                  <image className='lefttips' src={msTip} />
                  <image src={onlove} className='loveharde'></image>
                </view>
                <view className='bContent'>
                  <view className='cCword'>
                    超划算套餐？这么便宜也是第一次见6荤6素1...
                  </view>
                  <view className='cCleft'>
                    <image src={location} className='cCicon'></image>
                    <view className='distance'><text>9.99</text>公里</view>
                  </view>
                  <view className='cCright'>
                    <view className='money'>￥</view>
                    <view className='price'><text>999</text>/人</view>
                  </view>
                </view>
              </view>
            </>
          }
          {activeTab === 2 &&
            <view className='contentCard'>
              <view className='cardTop'>
                <image mode='widthFix' src={mjImage} className='cCardimg' />
                <image className='lefttips' src={mjTip} />
                <image src={onlove} className='loveharde'></image>
              </view>
              <view className='bContent'>
                <view className='cCword'>
                  超划算套餐？这么便宜也是第一次见6荤6素1...
                </view>
                <view className='cCleft'>
                  <image src={location} className='cCicon'></image>
                  <view className='distance'><text>9.99</text>公里</view>
                </view>
                <view className='cCright'>
                  <view className='money'>￥</view>
                  <view className='price'><text>999</text>/人</view>
                </view>
              </view>
            </view>
          }
          {activeTab === 3 && <>
            <view className='contentCard'>
              <view className='cardTop'>
                <image mode='widthFix' src={msImage} className='cCardimg' />
                <image className='lefttips' src={msTip} />
                <image src={onlove} className='loveharde'></image>
              </view>
              <view className='bContent'>
                <view className='cCword'>
                  超划算套餐？这么便宜也是第一次见6荤6素1...
                </view>
                <view className='cCleft'>
                  <image src={location} className='cCicon'></image>
                  <view className='distance'><text>9.99</text>公里</view>
                </view>
                <view className='cCright'>
                  <view className='money'>￥</view>
                  <view className='price'><text>999</text>/人</view>
                </view>
              </view>
            </view>
            <view className='contentCard'>
              <view className='cardTop'>
                <image mode='widthFix' src={mjImage} className='cCardimg' />
                <image className='lefttips' src={mjTip} />
                <image src={onlove} className='loveharde'></image>
              </view>
              <view className='bContent'>
                <view className='cCword'>
                  超划算套餐？这么便宜也是第一次见6荤6素1...
                </view>
                <view className='cCleft'>
                  <image src={location} className='cCicon'></image>
                  <view className='distance'><text>9.99</text>公里</view>
                </view>
                <view className='cCright'>
                  <view className='money'>￥</view>
                  <view className='price'><text>999</text>/人</view>
                </view>
              </view>
            </view>
          </>
          }



        </view>
        <view className='botton'>已经到底了~</view>
      </scroll-view>
    </view>
  )
}
