import FileViewer from "@codesmith-99/react-file-preview";
import { Modal, Space } from "antd";
import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
const Ac = (props: Store) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [year, setYear] = useState<Array<any>>([]);
  const [folder, setFolder] = useState<Array<any>>([]);
  const [files, setFiles] = useState<Array<any>>([]);
  const [imageUrl, setImageUrl] = useState<any>([]);
  const [folderId, setFolderId] = useState<any>([]);
  const [fileId, setFileId] = useState<any>([]);

  const initChart = (data) => {
    var myChart = echarts.init(document.getElementById("ac"));
    var option = {
      legend: {
        top: "5%",
        left: "right",
        textStyle: {
          color: "#fff",
        },
        formatter: function (name) {
          let v;
          data.forEach((item) => {
            if (item.name === name) {
              v = item.value;
            }
          });
          return name + "-" + v;
        },
        orient: "vertical", // 垂直排列
        type: "scroll", //分页类型
        pageIconColor: "#ff781f", //翻页箭头颜色
        pageTextStyle: {
          color: "#999", //翻页数字颜色
        }, //翻页数字设置
        pageIconSize: 5,
      },
      series: [
        {
          center: ["35%", "40%"],
          name: "Access From",
          type: "pie",
          radius: ["30%", "50%"],
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          label: {
            backgroundColor: "#F6F8FC",
            borderColor: "#8C8D8E",
            borderWidth: 0,
            show: false,
            borderRadius: 4,
          },
          data,
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    homeStore.getRm().then((res) => {
      initChart(res.data?.record);
    });
  }, [homeStore]);
  const getFileTypeFromUrl = (url) => {
    if (url === "" || url.length === 0) return;
    // 解析URL以提取文件名
    const filename = url.split("/").pop();
    // 获取文件扩展名
    const fileExtension = filename.split(".").pop();
    // 返回文件扩展名
    return fileExtension;
  };

  const preView = () => {
    let fileType = getFileTypeFromUrl(imageUrl);
    switch (fileType) {
      case "jpeg":
        return <img style={{ width: "100%",height:"100%" }} src={imageUrl} alt="" />;
      case "jpg":
        return <img style={{ width: "100%" ,height:"100%"}} src={imageUrl} alt="" />;
      case "png":
        return <img style={{ width: "100%",height:"100%" }} src={imageUrl} alt="" />;
      case "pdf":
        return (
          <div style={{ width: "100%", height: "100%" }}>
            <iframe
              style={{ width: "100%", height: "100%" }}
              src={imageUrl}
              title="描述"
            ></iframe>
          </div>
        );
      case "mp4":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "100%" }}>
            <video
              controls
              style={{ width: "100%", height: "100%" }}
              src={imageUrl}
            ></video>
          </div>
        );
      case "docx":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "400px" }}>
            <FileViewer
              loader={undefined}
              src={imageUrl}
              fileName="docx"
              onError={(e) => {
                console.log("error doc", e);
              }}
            />
          </div>
        );
      case "":
        return <div style={{ width: "100%", height: "400px" }}></div>;
      default:
        return <div style={{ width: "100%", height: "400px" }}></div>;
    }
  };
  return (
    <>
      <div
        style={{ width: "100%", height: "100%" }}
        id="ac"
        onClick={() => {
          homeStore.getTimes().then((res) => {
            setYear(res.data?.record);
          });
          homeStore.getFolders("2025").then((res) => {
            setFolder(res.data?.record);
          });
          setIsModalOpen(true);
        }}
      ></div>
      <Modal
        title="档案查看"
        className="owner_model"
        width={"80%"}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <>
          <Space style={{ color: "#fff" }}>
            {year.map((item) => {
              return (
                <h2
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    homeStore.getFolders(item.unique_years).then((res) => {
                      setFolder(res.data?.record);
                    });
                  }}
                >
                  {item.unique_years}
                </h2>
              );
            })}
          </Space>
          <h2 style={{ color: "#fff" }}>档案文件夹</h2>
          <div style={{ height: "500px", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "flex-start" }}>
              <div
                style={{
                  border: "1px solid #fff",
                  width: "200px",
                  overflow: "auto",
                  height: "480px",
                  flex:1
                }}
              >
                {folder?.map((item) => {
                  return (
                    <p
                      style={{
                        color: folderId === item.identity ? "blue" : "#fff",
                        cursor: "pointer",
                        margin: "5px",
                      
                      }}
                      onClick={() => {
                        homeStore.getFolderss(item.identity).then((res) => {
                          setFolderId(item.identity);
                          setFiles(res.data?.record);
                        });
                      }}
                    >
                      {item.folder_desc}
                    </p>
                  );
                })}
              </div>
              <div
                style={{
                  border: "1px solid #fff",
                  width: "200px",
                  height: "480px",
                  overflow: "auto",
                  flex:1
                }}
              >
                {files?.map((item) => {
                  return (
                    <p
                      style={{
                        color: fileId === item.identity ? "blue" : "#fff",
                        cursor: "pointer",
                        margin: "5px",
                      }}
                      onClick={() => {
                        setFileId(item.identity)
                        setImageUrl(item.file_url);
                      }}
                    >
                      {item.file_name}
                    </p>
                  );
                })}
              </div>
              <div style={{height:"400px",flex:4}}>
              {preView()}
              </div>
            </div>
          </div>
        </>
      </Modal>
    </>
  );
};
export default inject("homeStore")(observer(Ac));
