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 { buldingId } = router.params

  const [List, setList] = useState([])
  const [PageList, setPageList] = useState([])
  const [ShowMore, setShowMore] = useState(false)

  useEffect(() => {
    if(List.length) {
      if(ShowMore) {
        setPageList([...List])
      } else {
        setPageList(List.slice(0, 3))
      }
    }
  }, [ShowMore, List])

  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 (!buldingId) {
      Taro.showToast({
        title: '没有楼盘信息',
        icon: 'none',
      })
      return
    }

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

  return (
    <view className='Page buildingPropertyConsultant'>
      <ScrollView scroll-y>
        <text className='TopTips'>有任何买卖房屋的问题，欢迎随时咨询</text>
        <view className='List'>
          {
            PageList.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>
            ))
          }
          {
            List.length > 3 && !ShowMore &&
            <view className='More'>
              <text onClick={() => { setShowMore(true) }}>查看更多置业顾问</text>
            </view>
          }
          {
            !(List.length > 3 && !ShowMore) &&
            <text className='BottomTips'>已经到底了~</text>
          }
        </view>
      </ScrollView>
    </view>
  )
})