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

export default function HouseTypeIntro (props) {
  const { Info } = props

  const preview = (item) => {
    const current = getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)
    Taro.previewImage({ current, urls: [current] })
  }
  
  return Info ? (
    <view className='components HouseTypeIntro'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>户型介绍</text>
        </view>
      </view>

      <view className='ProjectList'>
        <ScrollView scroll-x show-scrollbar={false}>
          {
            Info.map((item, index) => (
              <view className='ListItem' key={`List-${index}`}>
                <view className='Img'>
                  <Image mode='aspectFill' onClick={() => preview(item)} src={getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)}></Image>
                </view>
                <view className='Title'>
                  <text>{item.apartmentName}</text>
                </view>
                <text>建面约{item.buildingArea || `-`}m²</text>
                {/* <text>套内{item.insideArea || `-`}m²</text> */}
              </view>
            ))
          }
        </ScrollView>
      </view>

    </view>
  ) : null
}
