import { View, Image } from '@tarojs/components'
import style from './index.module.less'
import Taro from '@tarojs/taro'
import { TContactItem } from '@/types/contact';

import { AvatarMedia } from '@/components/AvatarMedia';
import IconCertificateColor from "@/components/icon/icon-certificate-color";
interface Props {
  data: TContactItem
  deleteable?: boolean
  refresh: () => void
  fromContact?: boolean
  className?: string
}
const Index = ({data, deleteable, className, refresh, fromContact}: Props)=> {
  const handleClick = (data: TContactItem)=>{
    console.log(data, fromContact)
    if(data.agentStatus === 'normal'){
      // 如果是正常智能体，则去聊天
      Taro.navigateTo({
        url: `/pages/chat/index?agentId=${data.agentId}&isVisitor=true`,
      });
    }else{
      // 否则跳到此智能体
      Taro.navigateTo({
        url: "/pages/profile/index?agentId=" + data.agentId,
      });
    }
  }
  
  const handleAvatarClick = (e:any)=>{
    e.stopPropagation();
    Taro.navigateTo({
      url: "/pages/profile/index?agentId=" + data.agentId,
    });
  }

  const renderEntNameAndPosition = ()=> {
    const hasEntName = !!data.entName?.length
    const hasPosition = !!!!data.position?.length
    return <View className={`flex items-center flex-1 ${style.subInfo} truncate`}>
      {hasEntName && <View className='max-w-156 truncate'>{data.entName}</View>}
      {(hasPosition && hasEntName) && <View className='px-4'>|</View>}
      {hasPosition && <View className='truncate'>{data.position}</View>}
      {data.isEnt && <View className={style.certificationContainer}><IconCertificateColor></IconCertificateColor></View>}
    </View>
    
  }
  
  
  return (
    <View className={`${style.contactCard} ${className}`} onClick={()=>{handleClick(data)}}>
      <View className={style.avatarContainer} onClick={handleAvatarClick}>
        <AvatarMedia source={data.avatarUrl || ''} mode="aspectFill" className={style.avatar}></AvatarMedia>
        {(!!data?.tipCnt) && <View className={style.tipCnt}>{data.tipCnt}</View>}
      </View>
      <View className={`${style.infoColumn} truncate`}>
        <View className={`${style.nameRow} truncate`}>
          <View className={`${style.nickName} truncate`}>{data.name}</View>
        </View>
        <View className='flex flex-col w-full gap-2 truncate'>
          {renderEntNameAndPosition()}
          <View className={`flex-1 ${style.lastMsg} truncate`}>{data.lastChatMsg}</View>
        </View>
      </View>
    </View>
  )
}

export default Index