import { ScrollView, View, Image } from "@tarojs/components";
import "./index.less";
import { ConfigProvider, Empty, Flex, Navbar } from "@taroify/core";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { useEffect, useMemo, useState } from "react";
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 services from "@/services";
import { objectToQuery } from "@/utils";

export default function () {
  const [statusBarHeight, setStatusBarHeight] = useState(0);

  const onBack = () => {
    Taro.navigateBack();
  };
  useLoad(() => {
    const systemInfo = Taro.getSystemInfoSync();
    setStatusBarHeight(systemInfo?.statusBarHeight ?? 0);
  });

  const params = Taro.getCurrentInstance().router?.params;
  const [dataSource, setDataSource] = useState<API.ReportRecordDto[]>([]);

  const [paginationInfo, setPaginationInfo] = useState<API.Pagination>();
  const info = useMemo(() => {
    const type = params?.type;
    switch (type) {
      case "建议":
        return {
          title: "我的建议",
          robotIcon: icon22,
        };
      case "咨询":
        return {
          title: "我的咨询",
          robotIcon: icon23,
        };
      case "投诉":
        return {
          title: "我的投诉",
          robotIcon: icon24,
        };
      case "举报":
        return {
          title: "我的举报",
          robotIcon: icon25,
        };
      default:
        return undefined;
    }
  }, [params]);

  const getData = (page: number) => {
    const type =
      params?.type === "投诉"
        ? 1
        : params?.type === "建议"
        ? 2
        : params?.type === "咨询"
        ? 3
        : 4;
    services.report
      .getReportList({
        page: page,
        count: 10,
        type: type,
      })
      .then((res) => {
        setPaginationInfo(res.data);
        if (page === 1) {
          setDataSource(res.data.items);
        } else {
          setDataSource((prev) => [...prev, ...res.data.items]);
        }
      });
  };

  useDidShow(() => {
    getData(1);
  });
  /** 无限加载 */
  const onScrollToLower = () => {
    if (paginationInfo?.hasNext) {
      getData(paginationInfo?.page + 1);
    }
  };

  const onViewDetail = (item: API.ReportRecordDto) => {
    Taro.navigateTo({
      url: `/pages/Feedback/RecordDetail/index?` + objectToQuery(item),
    });
  };

  return (
    <View className="report_container">
      <View className="decoration" />
      <View style={{ height: statusBarHeight }} />
      <ConfigProvider
        theme={{
          "—navbar-background-color": "transparent",
        }}
      >
        <Navbar safeArea="top">
          <Navbar.NavLeft onClick={onBack}>返回</Navbar.NavLeft>
        </Navbar>
      </ConfigProvider>
      <View className="title">{info?.title}</View>
      <ScrollView
        scrollY
        onScrollToLower={onScrollToLower}
        style={{ height: `calc(100vh - ${statusBarHeight}px - 94px)` }}
      >
        <View className="contentView">
          {dataSource.length === 0 && (
            <Empty style={{ marginTop: 100 }}>
              <Empty.Description>暂无记录</Empty.Description>
            </Empty>
          )}
          {dataSource.map((item) => {
            return (
              <View
                key={item.id}
                className="reportItemCard"
                onTap={() => {
                  onViewDetail(item);
                }}
              >
                <Flex>
                  <Flex.Item span={3}>
                    <Image src={info?.robotIcon} className="robotIcon"></Image>
                  </Flex.Item>
                  <Flex.Item span={21}>
                    <View className="reportTitle">{item.content}</View>
                    <View className="reportTime">{item.createTime}</View>
                    {item.handlingStatus !== "1" ? (
                      <View className="reportAnswer-card">
                        <View className="reportAnswer-title">
                          {item.handlingDeptName} 回复
                        </View>
                        <View className="reportAnswer-content">
                          {item.handleReply}
                        </View>
                      </View>
                    ) : (
                      <View className="noRecover">待回复...</View>
                    )}
                  </Flex.Item>
                </Flex>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
}
