import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { useSelector } from 'react-redux'
import { Image } from '@tarojs/components'
import { queryActivityList } from '@/services/activity'
import { ROLE_CODE } from '@/constants/user'
import './index.scss'

export default function DetailBottom (props) {
  const { Info = {}, onPoster } = props

  const user = useSelector(state => state.user)
  const { personType } = user.userInfo.person

  // 当前推荐置业
  const { consultant } = useSelector(s => s.system)
  // const [showPoster, setShowPoster] = useState(false)
  const [actList, setActList] = useState([])

  const handleCall = () => {
    if (Info.tel) {
      Taro.makePhoneCall({ phoneNumber: Info.tel })
      return
    }

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

  const handleChat = () => {
    // TODO 订阅消息

    if (consultant?.id) {
      Taro.navigateTo({
        url: `/pages/chat/chatDetail/index?friend=${consultant.id}}`
      })
    } else {
      Taro.navigateTo({
        url: `/pages/index/buildingPropertyConsultant/index?buldingId=${Info?.buildingId}`
      })
    }
  }

  const handleRecommender = () => {

    if (personType === ROLE_CODE.CUSTOMER) {
      const params = `buildingId=${Info?.buildingId}&buildingName=${Info?.buildingName}`

      Taro.navigateTo({
        url: `/pages/mine/addCustomer/index?type=${personType}&${params}`
      })
    } else {
      Taro.showToast({ title: '该功能暂不能为您提供服务', icon: 'none', duration: 2000 })
    }
  }

  const handleTuanfang = () => {
    if ((actList || []).length > 0) {
      const id = actList[0].dynamicId

      Taro.navigateTo({
        url: `/pages/index/activityDetail/index?id=${id}`
      })
    } else {
      Taro.showToast({ title: '该功能暂不能为您提供服务', icon: 'none', duration: 2000 })
    }
  }

  useEffect(() => {
    if (Info.buildingId) {
      // 请求看房活动
      queryActivityList({ buildingId: Info.buildingId, pageSize: 1, type: 'look' }).then((res) => {
        const { records } = res || {}

        // 只保留已发布的活动
        setActList((records || []))
      })
    }
  }, [Info.buildingId])

  return (
    <view>
      <view className='components DetailBottom flex-h'>
        <view className='flex-item'>
          <view className='Item' onClick={onPoster}>
            <Image mode='heightFix' src={require('@/assets/buildingDetail-icon3.png')}></Image>
            <text>一键海报</text>
          </view>
          <view className='Item' onClick={handleTuanfang}>
            <Image mode='heightFix' src={require('@/assets/buildingDetail-icon1.png')}></Image>
            <text>一键带看</text>
          </view>
          <view className='Item' onClick={handleRecommender}>
            <Image mode='heightFix' src={require('@/assets/buildingDetail-icon2.png')}></Image>
            <text>一键推荐</text>
          </view>
        </view>
        <view className='Btn'>
          <text onClick={handleChat}>一键咨询</text>
          <text className='active' onClick={handleCall}>一键电话</text>
        </view>
      </view>

      {/* <Poster
        show={showPoster}
        dataSource={poster}
        onClose={() => setShowPoster(false)}
        onSuccess={() => setShowPoster(false)}
      /> */}
    </view>
  )
}
