import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView, Image } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import './index.scss'

export default withLayout((props) => {

  const [IsPull, setPull] = useState(false)
  const [PullTimer, setPullTimer] = useState(null)
  const [NavList, setNavList] = useState([
    { name: '效果图', id: 1 },
    { name: '实景图', id: 2 },
    { name: '户型图', id: 3 },
  ])
  const [CurrentNavId, setCurrentNavId] = useState(1)
  const [PageList, setPageList] = useState([{}, {}, {}, {}, {}, {}])

  const PageRefresh = () => { // 页面下拉刷新回调
    setPull(true)
  }

  useEffect(() => { // 下拉刷新触发
    if (IsPull) {
      clearTimeout(PullTimer)
      setPullTimer(setTimeout(() => {
        setPull(false)
      }, 2000))
    }
  }, [IsPull])

  const CutNav = (id) => {
    return () => {
      setCurrentNavId(id)
    }
  }

  return (
    <view className='Page buildingPictures flex-v'>
      <view className='Tab flex-h'>
        {
          NavList.map((item, index) => (
            <view className={item.id === CurrentNavId ? 'active flex-item' : 'flex-item'} key={`NavItem-${index}`}>
              <text onClick={CutNav(item.id)}>{item.name}</text>
            </view>
          ))
        }
      </view>
      <view className='flex-item'>
        <view>
          <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
            <view className='List'>
              {
                PageList.map((item, index) => (
                  <view key={`ListItem-${index}`}>
                    <view className='Img'>
                      <Image mode='scaleToFill' className='centerLabel' src={null}></Image>
                    </view>
                    <text>120㎡样板间</text>
                  </view>
                ))
              }
              <text className='Tips'>已经到底了~</text>
            </view>
          </ScrollView>
        </view>
      </view>
    </view>
  )
})
