import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import withLayout from '@/layout'
import { ScrollView, Image } from '@tarojs/components'
import { getCardList } from '@/services/card'
import { getImgURL } from '@/utils/image'
import '@/assets/css/iconfont.css'
import './index.scss'

export default withLayout((props) => {
  const { router } = props
  const { buildingId } = router.params

  const [List, setList] = useState([])

  const handleChat = (item) => {
    Taro.navigateTo({
      url: `/pages/chat/chatDetail/index?friend=${item.id}`
    })
  }

  const handleCall = (item) => {
    if (item.phone) {
      Taro.makePhoneCall({ phoneNumber: item.phone })
      return
    }

    Taro.showToast({ title: '暂无联系电话', icon: 'none' })
  }

  const gotoDetail = (item) => {
    Taro.navigateTo({
      url: `/subpackages/pages/consultant/myHomepage/index?id=${item.id}`
    })
  }

  useEffect(() => {
    if (!buildingId) {
      Taro.showToast({
        title: '没有楼盘信息',
        icon: 'none',
      })
      return
    }

    getCardList({ pageSize: 500, buildingId }).then((res) => {
      const { records } = res || []
      setList(records)
    })
  }, [buildingId])

  return (
    <view className='Page buildingPropertyConsultant'>
      <ScrollView scroll-y>
        <text className='TopTips'>有任何买卖房屋的问题，欢迎随时咨询</text>
        <view className='List'>
          {
            List.map((item, index) => (
              <view key={`ListItem-${index}`}>

                <view className='flex-h'>

                  <view className='Icon'>
                    <Image mode='scaleToFill' src={getImgURL(item.photo || item.avatar)}></Image>
                  </view>

                  <view className='flex-item' onClick={() => gotoDetail(item)}>
                    <view className='Name'>
                      <text>{item.name}</text>
                      <Image mode='heightFix' src={require('@/assets/index-icon17.png')}></Image>
                    </view>
                    <text>{item.phone}</text>
                  </view>

                  <text
                    className='iconfont icon-liaotian'
                    onClick={() => handleChat(item)}
                  ></text>
                  <text
                    className='iconfont icon-dianhua'
                    onClick={() => handleCall(item)}
                  ></text>
                  
                </view>

                <view className='Desc'>
                  <text>{item.description}</text>
                </view>

              </view>
            ))
          }
          <text className='BottomTips'>已经到底了~</text>
        </view>
      </ScrollView>
    </view>
  )
})
