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

export default function Pictures (props) {
  const { List = [] } = props

  const urls = useMemo(() => {
    return List.map((x) => (x.buildingImgList?.length ? x.buildingImgList : undefined))
      .filter(Boolean)
      .reduce((acc, arr) => acc.concat(arr.map((f) => f.url)), [])
      .filter(Boolean)
      .map((x) => getImgURL(x))
  }, [List])

  const handlePreview = (item) => {
    const current = getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)
    Taro.previewImage({ current, urls })
  }

  return (
    <view className='components Pictures'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>相册</text>
        </view>
      </view>

      <view className='ProjectList'>
        <ScrollView scroll-x show-scrollbar={false}>
          {
            List.map((item, index) => (
              <view className='ListItem' key={`List-${index}`} onClick={() => handlePreview(item)}>
                <view className='Img'>
                  <Image mode='aspectFill' className='centerLabel' src={item.buildingImgList.length ? item.buildingImgList[0].url : null}></Image>
                </view>
                <text className='Title'>{item.apartmentName}({item.buildingImgList.length})</text>
              </view>
            ))
          }
        </ScrollView>
      </view>
    </view>
  )
}
