import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { Swiper, SwiperItem, Image } from '@tarojs/components'
import { getImgURL } from '@/utils/image'
import { queryActivityList } from '@/services/activity'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function MarketingActivity (props) {
  const { Info } = props
  const { buildingId } = Info || {}

  const [dataList, setDataList] = useState([])

  const goMore = () => Taro.navigateTo({ url: `/pages/index/activityList/index?type=house&buildingId=${buildingId}` })
  const goDetail = (id) => Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${id}` })

  useEffect(() => {
    if (buildingId) {
      queryActivityList({ buildingId, pageSize: 500, type: 'house' }).then((res) => {
        const { records } = res || {}
        
        // 只保留3场在进行中的活动
        setDataList((records || []).filter((x) => (x.activityStatus < 2)).slice(0, 3))
      })
    }
  }, [buildingId])

  return dataList.length > 0 && (
    <view className='components MarketingActivity'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>营销活动</text>
        </view>
        <text onClick={goMore}>更多</text>
        <text className='iconfont icon-jiantouright'></text>
      </view>

      <view className='SwiperContainer'>
        <view>
          <Swiper autoplay interval={2000} indicator-dots>
            {
              dataList.map((item, index) => (
                <SwiperItem key={`Banner-${index}`}>
                  <view className='swiper-item' onClick={() => goDetail(item.dynamicId)}>
                    <Image mode='aspectFill' className='centerLabel' src={getImgURL(item.bannerListImg || item.imgUrl || item.image || item.url || item.img || item.imgUrl || item.detailImg)} />
                  </view>
                </SwiperItem>
              ))
            }
          </Swiper>
        </view>
      </view>

    </view>
  )
}
