//事件详情
import services from "@/services";
import { caseStutsColor, splitStrToArr } from "@/utils/comm";
import { View, Text, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useDidShow } from "@tarojs/taro";
import dayjs from "dayjs";
import { useState } from "react";
import ITag from "../../component/ITag";
import LabelText from "../../component/LabelText";
import "./index.less";
import blackMap from "@/assets/images/event/blackMap.png";
import right from "@/assets/images/event/right.png";
import done from "@/assets/images/event/done.png";
import warn from "@/assets/images/event/warn.png";
import { Steps } from "@taroify/core";
function Detail() {
  const { params } = useRouter<{ caseId: string }>();
  const [info, setInfo] = useState<API.CaseInfoDto>(); //事件信息
  const [attachment, setAttachment] = useState<API.CaseAttachment>(); //事件附件信息
  const [circulation, setCirculation] = useState<API.CulationType[]>([]); //流转记录
  useDidShow(() => {
    //事件基本信息
    services.event.getEventInfo(params.caseId).then((res) => {
      setInfo(res.data);
      if (res.data.handlingMethod !== "2") {
        //举手之劳没有流转记录
        //事件流转记录
        services.event.getEventCirculation(params.caseId).then((res) => {
          setCirculation(res.data);
        });
      }
    });
    //事件附件
    services.event.getEventAttachmentInfo(params.caseId).then((res) => {
      setAttachment(res.data);
    });
  });

  //打开地图
  const handleToMap = () => {
    Taro.openLocation({
      latitude: Number(info?.lat),
      longitude: Number(info?.lon),
      name: info?.address,
      address: info?.address,
      scale: 18,
    });
  };

  //预览图片
  const handlePreviewImage = (imgList: API.AttachmentInfo[]) => {
    let imgResultList: any[] = imgList?.map((it) => it.attachmentPath) || [];
    Taro.previewImage({
      current: imgResultList[0], // 当前显示图片的http链接
      urls: imgResultList, // 需要预览的图片http链接列表
    });
  };
  const caseResult = circulation[circulation?.length - 1]; //流转结果
  return (
    <View className="wrap">
      <View className="top-box">
        <View>
          <Text className="event-name">{info?.standardEventTitle ?? "无"}</Text>
          <ITag
            title={info?.jointStatusName || ""}
            color={caseStutsColor[info?.eventStatus || ""]}
          />
        </View>
        {info?.newInstCondName && (
          <LabelText label={"案件类别"} value={info?.newInstCondName} />
        )}
        <LabelText label={"案件来源"} value={info?.eventCollectionModeName} />
        <LabelText label={"案件编码"} value={info?.standardEventNumber} />
      </View>
      <View className="pic-container">
        <View className="pic-wrap dflex">
          <View className="event">
            <Image
              onClick={() =>
                handlePreviewImage(attachment?.preHandleAttachmentInfos || [])
              }
              src={
                attachment?.preHandleAttachmentInfos[0]
                  ?.attachmentPath as string
              }
              className="event-img"
              mode="aspectFill"
            />
            <Text className="status">处置前</Text>
          </View>
          <View className="event">
            <Image
              onClick={() =>
                handlePreviewImage(attachment?.handledAttachmentInfos || [])
              }
              src={
                attachment?.handledAttachmentInfos[0]?.attachmentPath as string
              }
              className="event-img"
              mode="aspectFill"
            />
            <Text className="status deal-status">处置后</Text>
          </View>
        </View>
        <View className="text-wrap dflex ">
          <View className="dflex">
            <Image src={blackMap} className="icon" />
            <Text className="address textellipsis">
              {" "}
              {splitStrToArr(info?.extendAddress, "&")[1]}
            </Text>
          </View>
          <View className="eye dflex" onClick={handleToMap}>
            去地图查看
            <Image src={right} className="go-icon" />
          </View>
        </View>
      </View>
      {/* 举手之劳不显示 */}
      {info?.handlingMethod !== "2" && (
        <>
          <View className="result dflex">
            <View className="dflex">
              <Image
                src={Number(caseResult?.caseStatus) === 90 ? done : warn}
                className="status-icon"
              />
              <Text className="status-text fbold">
                {caseResult?.caseStatusName}
              </Text>
            </View>
            <View>
              <Text>耗时</Text>
              <Text className="use-time">{caseResult?.remainingTimeText}</Text>
            </View>
          </View>
          <View className="subtitle fbold">案件流转</View>

          <Steps direction="vertical" className="step-wrap">
            {circulation?.map((it, index) => (
              <Steps.Step key={index}>
                <>
                  <View className="step-item">
                    <View className="dflex-between">
                      <Text className="user">
                        {it.circulationPersonName || it.personRoles}
                      </Text>
                      {it.recordTime && (
                        <Text className="time">
                          {dayjs(it.recordTime).format("YYYY.MM.DD HH:mm:ss")}
                        </Text>
                      )}
                    </View>
                    <View className="dflex-between m-t-16">
                      <Text className="remark">备注：{it.remarks || "无"}</Text>
                      <Text className="operation">
                        {it.operationType || it.caseStatusName}
                      </Text>
                    </View>
                  </View>
                  {index !== circulation.length - 1 && (
                    <View className="time-count">
                      经过{circulation[index + 1]?.consumptionTimeText}
                    </View>
                  )}
                </>
              </Steps.Step>
            ))}
          </Steps>
        </>
      )}
    </View>
  );
}

export default Detail;
