import "@/assets/css/iconfont.css";
import Taro from "@tarojs/taro";
import { Image } from "@tarojs/components";
import { getImgURL } from "@/utils/image";
import BrokerShare from "@/components/brokerShare";
import "./index.scss";
import { useSelector } from "react-redux";
import { ROLE_CODE } from "@/constants/user";

export default function ProjectListItem(props) {
  const person = useSelector(({user}) => user.userInfo?.person);
  const { Data = {}, ShowImgIcon = true } = props;
  const { uvList = [] } = Data;

  const LinkTo = () => {
    if (Data.eventType === "news") {
      // 资讯
      Taro.navigateTo({
        url: `/pages/index/newsDetail/index?id=${Data.targetId}&eventType=${Data.type}`,
      });
    } else if (Data.eventType === "activity") {
      // 活动
      Taro.navigateTo({
        url: `/pages/index/activityDetail/index?id=${Data.targetId}&eventType=${Data.type}`,
      });
    } else {
      // 楼盘
      Taro.navigateTo({
        url: `/pages/index/buildingDetail/index?id=${
          Data.buildingId || Data.targetId
        }`,
      });
    }
  };

  return (
    <view className="components ProjectListItem" onClick={LinkTo}>
      <view className="ProjectListItem-top flex-h">
        <view className="Img">
          <view>
            <Image
              mode="aspectFill"
              className="centerLabel"
              src={getImgURL(
                (Data?.buildingListImg || []).length
                  ? Data.buildingListImg[0].url
                  : Data.activityImg || null
              )}
            />
            {(Data?.panoramaList || []).length > 0 && ShowImgIcon && (
              <Image
                mode="heightFix"
                className="Tips Vr"
                src={require("@/assets/index-icon18.png")}
              />
            )}
            {Data.videoUrl !== null && ShowImgIcon && (
              <Image
                mode="heightFix"
                className="Tips Video"
                src={require("@/assets/index-icon19.png")}
              />
            )}
          </view>
        </view>
        <view className="flex-item">
          <view className="Name flex-h">
            <view className="flex-item">
              <text>{Data.buildingName}</text>
            </view>
            <text></text>
          </view>
          <text className="Price">{Data.price}</text>
          <text className="Address">{Data.address}</text>
          <view className="Tags">
            {(Data.buildingTag || []).map((item, index) => (
              <text key={`Tags-${index}`}>{item.tagName}</text>
            ))}
          </view>
          <view className="ShareInfo">
            <text className="iconfont icon-fenxiang"></text>
            <text>{299 + (Data.shareNum || 0)}次分享</text>
            <view className="Users">
              {(uvList?.records || []).slice(0, 3).map((item, index) => (
                <view key={`uv-${index}`}>
                  <Image
                    mode="aspectFill"
                    className="centerLabel"
                    src={item.photoOravatar}
                  />
                </view>
              ))}
            </view>
            <text>
              {(uvList?.records || []).length > 0 ? "..." : ""}
              {299 + (Data.pvNum || 0)}人围观
            </text>
          </view>
        </view>
      </view>
      {Data?.isBroker && person?.personType === ROLE_CODE.BROKER && (
        <BrokerShare buildingId={Data.buildingId}></BrokerShare>
      )}
    </view>
  );
}