import { useState } from 'react'
import classNames from 'classnames'
import Taro from '@tarojs/taro'
import { Image } from '@tarojs/components'
import { getImgURL } from '@/utils/image'
import './index.scss'

export default function FixedCard (props) {
  const { consultant } = props
  const { id: consultantId, name, picture, company, avatar, phone } = consultant || {}

  const [Show, setShow] = useState(false)

  const toggleVisible = () => {
    setShow(!Show)
  }

  const handleChat = () => {
    Taro.navigateTo({
      url: `/pages/chat/chatDetail/index?friend=${consultantId}`
    })
  }
  
  const handleCall = () => {
    if (phone) {
      Taro.makePhoneCall({ phoneNumber: phone })
      return
    }

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

  return !!consultantId && (
    <view className={classNames('components FixedCard', { spread: Show })}>
      <view className='Icon' onClick={toggleVisible}>
        <Image mode='aspectFill' src={getImgURL(picture||avatar)}></Image>
      </view>
      <view className='Name' onClick={toggleVisible}>
        <text>{name}</text>
        {/* <text style={{display: Show ? 'block' : 'none'}}>{company}</text> */}
      </view>
      <text
        style={{display: Show ? 'inline-block' : 'none'}}
        className='iconfont icon-liaotian Btn'
        onClick={handleChat}
      ></text>

      <text
        style={{display: Show ? 'inline-block' : 'none'}}
        className='iconfont icon-dianhua1 Btn'
        onClick={handleCall}
      ></text>

      <text
        style={{display: Show ? 'inline-block' : 'none'}}
        className='iconfont icon-guanbi Btn'
        onClick={toggleVisible}
      ></text>

      <text
        style={{display: Show ? 'none' : 'inline-block'}}
        className='iconfont icon-jiantouright'
      ></text>
    </view>
  )
}
