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 [List, setList] = useState([
    { name: '乖戾', icon: '', time: '11:49' },
    { name: '乖戾', icon: '', time: '11:49' },
    { name: '乖戾', icon: '', time: '11:49' },
    { name: '乖戾', icon: '', time: '11:49' },
    { name: '乖戾', icon: '', time: '11:49' },
    { name: '乖戾', icon: '', time: '11:49' },
  ])

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

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

  return (
    <view className='Page buildingViewsRecords'>
      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
        <view className='List'>
          {
            List.map((item, index) => (
              <view className='flex-h' key={`ListItem-${index}`}>
                <view className='Icon'>
                  <Image mode='scaleToFill' src={item.icon || null}></Image>
                </view>
                <view className='flex-item'>
                  <text>{item.name}</text>
                </view>
                <text>{item.time}</text>
              </view>
            ))
          }
          <text className='Tips'>仅展示最近50条围观纪录</text>
        </view>
      </ScrollView>
    </view>
  )
})
