import { React, useState, useEffect, } from 'react'
// .就是当前路径
import iconsearch from '../../assets/icons/housemantj/search.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 CustomNav from '@/components/CustomNav'
import Taro, { useRouter } from '@tarojs/taro'
import './searchResult.less'
import withLayout from '@/layouts'



export default withLayout((props) => {
  const { router, person } = props

  // 横向tab
  const [activeTab, setActiveTab] = useState(0)
  const { params } = useRouter()
  const { tabJump } = params || {}
  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])

  const tabs = [
    {
      title: '全部',
    },
    {
      title: '美食',

    },
    {
      title: '景点',

    },
    {
      title: '攻略',

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



  const onSearch = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/search/search' });
  }





  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='搜索' />
      </view>
      <view style={{ height: '100%', overflow: 'auto' }}>
        <view className='search'>
          <input className='searchInput' placeholder='请输入景区/城市搜索' disabled onClick={onSearch} />
          <image className='searchicon' src={iconsearch} />
          <view className='lineSearch'></view>
        </view><view className='index-tabs'>
          <mp-tabs
            tabClass='tabs-Unselected'
            swiperClass='tabs-swiper'
            activeClass='tabs-Selected'
            tabs={tabs}
            current={activeTab}
            onChange={handleTabChange}
            activeTab={activeTab}
          >
          </mp-tabs>
        </view>

        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
          <view className="waterfall">

            {activeTab === 0 && <>
              <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'>
                <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'><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>

            </>}
            {activeTab === 1 && <>
              <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>
              <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 === 3 && <>
              <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>
          <view className='botton'>已经到底了~</view>
        </scroll-view>
      </view>
    </view>
  )
})
