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

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

  // 当前推荐置业
  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/detail?targetPerson=${consultant.id}}`
      })
    } else {
      Taro.navigateTo({
        url: `/pages/index/buildingPropertyConsultant/index?buldingId=${Info?.buildingId}`
      })
    }
  }

  const handleRecommender = () => {
    const params = `buildingId=${Info?.buildingId}&buildingName=${Info?.buildingName}`

    Taro.navigateTo({
      url: `/pages/mine/recommendUser/index?${params}`
    })
  }

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

    Taro.navigateTo({
      url: `/pages/index/activityDetail/index?id=${id}`
    })
  }

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

        // 只保留已发布的活动
        setActList((list || []))
      })
    }
  }, [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>
          {
            actList.length > 0 && (
              <view className='Item' onClick={handleTuanfang}>
                <Image mode='heightFix' src={require('@/assets/buildingDetail-icon1.png')}></Image>
                <text>一键带看</text>
              </view>
            )
          }
          <AuthRole role={ROLE_CODE.CONSULTANT}>
            <view className='Item' onClick={handleRecommender}>
              <Image mode='heightFix' src={require('@/assets/buildingDetail-icon2.png')}></Image>
              <text>一键推荐</text>
            </view>
            <view className='Item'>
              <Image mode='heightFix' src={require('@/assets/buildingDetail-icon1.png')}></Image>
              <text>一键带看</text>
            </view>
            <AuthRole role={ROLE_CODE.CONSULTANT}>
              <view className='Item' onClick={handleRecommender}>
                <Image mode='heightFix' src={require('@/assets/buildingDetail-icon2.png')}></Image>
                <text>一键推荐</text>
              </view>
            </AuthRole>
          </AuthRole>
        </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>
  )
}