import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, Image } from '@tarojs/components'
import { useSelector } from 'react-redux'
import { fetch } from '@/utils/request'
import { getImgURL } from '@/utils/image'
import { API_LIVE_LIST } from '@/constants/api'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function LiveSale (props) {

  const { change = () => {} } = props
  const city = useSelector(state => state.city)
  const [MenuList] = useState([{ name: '全部', id: 1 }, { name: '预告', id: 2 }, { name: '直播中', id: 3 }, { name: '新房推荐', id: 4 }])
  const [CurrentId, setCurrentId] = useState(1)
  const [PageList, setPageList] = useState([])

  useEffect(() => {
    if(city.curCity.name) {
      GetLiveList()
    }
  }, [city])

  const GetLiveList = () => {
    fetch({url: API_LIVE_LIST, method: 'get', payload: {cityId: city.curCity.id, pageNum: 1, pageSize: 20}}).then((res) => {
      setPageList(res.records || [])
      change(!!(res.records || []).length)
    })
  }

  const CutMenu = (id) => {
    return () => {
      setCurrentId(id)
    }
  }

  const toDetail = (item) => {
    return () => {
      if(item.type === 'live') {
        Taro.navigateTo({ url: `/pages/video/liveDetail/index?id=${item.id}&type=${item.type}` })
      } else {
        Taro.navigateTo({ url: `/pages/video/videoDetail/index?id=${item.id}` })
      }
    }
  }

  return (
    <view className='components LiveSale'>
      <view>
        <view className='Menu'>
          {
            MenuList.map((item, index) => (
              <view onClick={CutMenu(item.id)} className={CurrentId === item.id ? 'active' : ''} key={`Menu-${index}`}>{item.name}</view>
            ))
          }
        </view>
        <view className='Content'>
          <ScrollView scroll-x show-scrollbar={false}>
            {
              PageList.map((item, index) => (
                <view className='ListItem' key={`List-${index}`} style={{display: CurrentId === 1 || (CurrentId === 2 && item.kind === 'notice') || (CurrentId === 3 && item.kind === 'live')  || (CurrentId === 4 && item.kind !== 'notice') ? 'inline-block' : 'none'}}>
                  <Image mode='aspectFill' className='centerLabel' onClick={toDetail(item)} src={`${getImgURL(item.images)}`} />
                </view>
              ))
            }
          </ScrollView>
        </view>
      </view>
    </view>
  )
}