import Taro from '@tarojs/taro'
import { Image } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import { getImgURL } from '@/utils/image'
import './index.scss'

export default function LivingActivity (props) {
  const { Info = {} } = props
  const List = Info?.liveActivityList || []

  const gotoList = () => {
    const buildingId = Info?.buildingId
    Taro.switchTab({
      url: `/pages/video/index?buildingId=${buildingId}`
    })
  }

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

  return List.length > 0 ? (
    <view className='components LivingActivity'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>直播活动</text>
        </view>
        <text onClick={gotoList}>更多</text>
        <text className='iconfont icon-jiantouright'></text>
      </view>

      <view className='List flex-h'>
        {
          List.length > 0 &&
          <view className='flex-item' onClick={() => gotoDetail(List[0])}>
            <view style={{display: List[0].listImg ? 'block' : 'none'}}>
              <Image mode='aspectFill' src={getImgURL(List[0].listImg)} className='centerLabel'></Image>
            </view>
          </view>
        }
        {
          List.length > 1 &&
          <view className='flex-item' onClick={() => gotoDetail(List[1])}>
            <view style={{display: List[1].listImg ? 'block' : 'none'}}>
              <Image mode='aspectFill' src={getImgURL(List[1].listImg)} className='centerLabel'></Image>
            </view>
          </view>
        }
        {
          List.length === 1 &&
          <view className='flex-item'></view>
        }
      </view>

    </view>
  ) : null
}
