import { View, Image } from "@tarojs/components";
import "./index.less";
import Taro from "@tarojs/taro";
import icon22 from "@/assets/icon/icon22.png";
import icon23 from "@/assets/icon/icon23.png";
import icon24 from "@/assets/icon/icon24.png";
import icon25 from "@/assets/icon/icon25.png";
import { useMemo } from "react";
import { Flex, Space } from "@taroify/core";
import { composeImgUrl } from "@/utils";

export default function () {
  const params = Taro.getCurrentInstance().router
    ?.params as unknown as API.ReportRecordDto;

  const info = useMemo(() => {
    const type = params?.typeText;
    switch (type) {
      case "建议":
        return {
          robotIcon: icon22,
        };
      case "咨询":
        return {
          robotIcon: icon23,
        };
      case "投诉":
        return {
          robotIcon: icon24,
        };
      case "举报":
        return {
          robotIcon: icon25,
        };
      default:
        return undefined;
    }
  }, [params]);

  return (
    <View className="detailContainer">
      <View>
        <Flex>
          <Flex.Item span={4}>
            <Image src={info?.robotIcon} className="robotIcon"></Image>
          </Flex.Item>
          <Flex.Item span={20}>
            <View className="detail_content">{params.content}</View>
            <View className="detail_time">{params.createTime}</View>
          </Flex.Item>
        </Flex>
        <View className="attachmentWrap">
          <Space>
            {params.annex1 && params.annex1.length > 0 && (
              <Image
                className="attachmentImg"
                src={composeImgUrl(params.annex1)}
              ></Image>
            )}
            {params.annex2 && params.annex2.length > 0 && (
              <Image
                className="attachmentImg"
                src={composeImgUrl(params.annex2)}
              ></Image>
            )}
            {params.annex3 && params.annex3.length > 0 && (
              <Image
                className="attachmentImg"
                src={composeImgUrl(params.annex3)}
              ></Image>
            )}
          </Space>
        </View>
      </View>
      <View>
        {params.handlingStatus !== "1" ? (
          <View>
            <View className="replyWrap">
              <View className="replyTitle">{params.handlingDeptName} 回复</View>
              <View className="replyTime">{params.handleTime}</View>
            </View>
            <View className="replyContent">{params.handleReply}</View>
          </View>
        ) : (
          <View>待回复...</View>
        )}
      </View>
    </View>
  );
}
