// 档案
import MainLayout from "@/layout/main/mainLayout";
import styles from "./index.module.less";
import archivesPicturePng from "@/assets/translate/archives-picture.png";
import archivesDataPng from "@/assets/translate/archives-data.png";
import archivesEquipmentPng from "@/assets/translate/archives-equipment.png";
import archivesSwPng from "@/assets/translate/archives-sw.png";
import archivesFunctionPng from "@/assets/translate/archives-function.png";
import archivesBottomPng from "@/assets/translate/archives-bottom.png";
import archivesCardPng from "@/assets/translate/archives-card.png";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Outlet } from "react-router-dom"; // 添加这行

import { Image, Space } from "antd-mobile";
import { ListView, More, AddOne, AlignHorizontalCenterTwo } from "@icon-park/react";
function Index() {
  const [listShow, setListShow] = useState(false);

  const navigate = useNavigate();

  const onLink = (link: string) => {
    // safeNavigate(link);
    navigate(link);
  };

  const right = (
    <div style={{ fontSize: 16 }}>
      <Space style={{ "--gap": "16px" }}>
        {listShow ? (
          <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
        ) : (
          <ListView onClick={() => setListShow(true)} fill="#333" />
        )}

        <AddOne onClick={() => onLink("/translate/addArchives?flag=add")} fill="#333" />
        <More fill="#333" />
      </Space>
    </div>
  );

  return (
    <MainLayout navBarRight={right} isShowNavBar={true} title="宠物档案">
      {listShow ? (
        <div className={styles.archives}>
          <Image className={styles.img} src={archivesCardPng}></Image>
          <Image className={styles.img} src={archivesCardPng}></Image>
          <Image className={styles.img} src={archivesCardPng}></Image>
          <Image className={styles.img} src={archivesCardPng}></Image>
        </div>
      ) : (
        <>
          <div className={styles.bottom}>
            <Image src={archivesBottomPng}></Image>
          </div>
          <div className={styles.archives}>
            <Image src={archivesPicturePng}></Image>
            <Image
              onClick={() => onLink("/translate/addArchives?flag=edit")}
              className={styles.img}
              src={archivesDataPng}
            ></Image>
            <Image className={styles.img} src={archivesEquipmentPng}></Image>
            <Image className={styles.img} src={archivesSwPng}></Image>
            <Image className={styles.img} src={archivesFunctionPng}></Image>
            <div className={styles["placeholder-bottom"]}></div>
          </div>
        </>
      )}
      <Outlet /> {/* 添加这行 */}
    </MainLayout>
  );
}

export default Index;