import { View } from "@tarojs/components";
import IconCertificateColor from "@/components/icon/icon-certificate-color";
import style from "./index.module.less";
import { TContactItem } from "@/types/contact";
import { TAgent } from "@/types/agent";
import { AvatarMedia } from "@/components/AvatarMedia";
interface Props {
  data: TContactItem | TAgent;
  onClick?: (data: TContactItem | TAgent) => void;
  renderRight?: () => JSX.Element | JSX.Element[];
  className?: string;
  truncate?: boolean;
  showPositionAndEntNamePlaceholder?: boolean; // 是否显示企业名称与职位名称占位
}
const Index = ({
  onClick,
  data,
  className,
  renderRight,
}: Props) => {
  const hasEntName = !!data.entName?.length;
  const hasPosition = !!!!data.position?.length;
  const renderEntNameAndPosition = () => {
    return (
      <>
        {hasEntName && (
          <View className={`max-w-156 truncate`}>
            {data.entName}
          </View>
        )}
        {hasPosition && hasEntName && <View className="px-4">|</View>}
        {hasPosition && <View className="truncate">{data.position}</View>}
      </>
    );
  };
  return (
    <View
      className={`flex items-start gap-8 bg-white rounded-12 ${className}`}
      onClick={() => {
        onClick?.(data);
      }}
    >
      <View className="w-42 h-42 shrink-0 overflow-hidden truncate">
        <AvatarMedia
          source={data.avatarUrl ?? ""}
          className="w-42 h-42"
          mode="aspectFill"
        />
      </View>
      <View className={`flex flex-col flex-1 justify-center min-h-42 truncate`}>
        <View className="text-14 leading-22 font-pingfangSCSemibold font-semibold truncate">
          {data.name}
        </View>
        {(hasPosition || hasEntName) && (
          <View className={`flex flex-col w-full gap-8 truncate`}>
            <View
              className={`flex items-center flex-1 text-12 leading-20 text-gray-4 truncate`}
            >
              {renderEntNameAndPosition()}
              {data.isEnt && (
                <View className={style.certificationContainer}>
                  <IconCertificateColor></IconCertificateColor>
                </View>
              )}
            </View>
          </View>
        )}
      </View>
      {renderRight && renderRight()}
    </View>
  );
};

export default Index;
