import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro'
import { queryActivityList } from '@/services/activity'
import { Swiper, SwiperItem, Block } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function HotRecommend (props) {

  const { change = () => { } } = props
  const city = useSelector(state => state.city)
  const [MenuList] = useState([{ name: '热门活动', id: 'dymic' }, { name: '热门团房', id: 'house' }])
  const [CurrentId, setCurrentId] = useState('dymic')
  const [list, setList] = useState([[], []])
  const [CurrentContentInfo, setCurrentContentInfo] = useState({})

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

  const GetRecommendActivity = () => {
    queryActivityList({ home: 1, cityId: city.curCity.id, type: 'dymic' }).then((res) => {
      const resArr = res.records || []
      queryActivityList({ home: 1, cityId: city.curCity.id, type: 'house' }).then((subRes) => {
        const subResArr = subRes.records || []
        setList([resArr || [], subResArr || []])
        change(resArr.length || subResArr.length)
      })
    })
  }

  useEffect(() => {
    if (list.length > 0) {
      setCurrentContentInfo(CurrentId === 'dymic' ? list[0] : list[1])
    }
  }, [CurrentId, list])

  const CutMenu = (id) => {
    return () => {
      setCurrentId(id)
    }
  }
  const ToMore = () => {
    Taro.navigateTo({ url: `/pages/index/activityList/index?type=${CurrentId}` })
  }

  const toDetail = () => {
    if (CurrentContentInfo.dynamicId) {
      Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${CurrentContentInfo.dynamicId}` })
    }
  }

  return (
    <view className='components HotRecommend'>
      <view>
        <view className='Menu flex-h'>
          {
            MenuList.map((item, index) => (
              <view onClick={CutMenu(item.id)} className={CurrentId === item.id ? 'active flex-item' : 'flex-item'} key={`Menu-${index}`}>{item.name}</view>
            ))
          }
        </view>
        <view className='Content'>
          <Swiper autoplay interval={5000} vertical>
            {
              CurrentId === 'dymic' &&
              <Block>
                {
                  list[0].map((item, index) => (
                    <SwiperItem key={`Banner-${index}`}>
                      <view className='swiper-item'>
                        <view className='flex-h'>
                          <text className='flex-item' onClick={toDetail}>{item.title || '暂无活动'}</text>
                          <text onClick={() => { ToMore() }}>更多活动</text>
                        </view>
                        <text onClick={toDetail}>{item.halfTitle}</text>
                      </view>
                    </SwiperItem>
                  ))
                }
              </Block>
            }
            {
              CurrentId === 'house' &&
              <Block>
                {
                  list[1].map((item, index) => (
                    <SwiperItem key={`Banner-${index}`}>
                      <view className='swiper-item'>
                        <view className='flex-h'>
                          <text className='flex-item' onClick={toDetail}>{item.title || '暂无活动'}</text>
                          <text onClick={() => { ToMore() }}>更多团房</text>
                        </view>
                        <text onClick={toDetail}>{item.halfTitle}</text>
                      </view>
                    </SwiperItem>
                  ))
                }
              </Block>
            }
          </Swiper>
        </view>
      </view>
    </view>
  )
}
