import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import "./left.less";
import { Col, Modal, Row } from "antd";
import { trunEchatConfig } from "./trun_chat_config";
import FileViewer from "@codesmith-99/react-file-preview";
const Turn = (props: Store) => {
  const { homeStore, trainingStore, folderStore } = props;
  const [isModalOpen, setisModalOpen] = useState(false);
  const [folderList, setfolderList] = useState<any>([]);
  const [imageList, setImageList] = useState<any>([]);
  const [imageUrl, setImageUrl] = useState<any>([]);
  const [taskId, setTaskId] = useState<any>([]);
  const [folderId, setFolderId] = useState<any>([]);
  const getFileTypeFromUrl = (url) => {
    if (url === "" || url.length === 0) return;
    // 解析URL以提取文件名
    const filename = url.split("/").pop();
    // 获取文件扩展名
    const fileExtension = filename.split(".").pop();
    // 返回文件扩展名
    return fileExtension;
  };

  const initChart = (data) => {
    var myChart = echarts.init(document.getElementById("xunlian"));
    trunEchatConfig(data) && myChart.setOption(trunEchatConfig(data));
  };

  useEffect(() => {
    homeStore.getTr().then((res) => {
      initChart(res.data.record);
    });
  }, [homeStore]);

  useEffect(() => {
    trainingStore.getlist();
  }, [trainingStore]);
  const trunHandler = () => {
    setisModalOpen(true);
  };
  const getFolderhandler = (id: string) => {
    folderStore?.getFolderList(id).then((res) => {
      setfolderList(res?.data?.record ?? []);
    });
  };
  const getAehandler = async (id: string) => {
    await folderStore?.getAlist(id).then(() => {
      folderStore.alist?.forEach((elem) => {
        elem.url = elem.file_url;
        elem.name = elem.file_name;
      });
      setImageList(folderStore.alist ?? []);
    });
  };
  const imageWidget = (item) => {
    return (
      <img
        onClick={() => {
          setImageUrl(item.file_url);
        }}
        key={item.identity}
        style={{ width: "80px", height: "80px" }}
        src={item.file_url}
        alt=""
      />
    );
  };
  const preView = () => {
    let fileType = getFileTypeFromUrl(imageUrl);
    switch (fileType) {
      case "jpeg":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "jpg":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "png":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "pdf":
        return (
          <div style={{ width: "100%", height: "500px" }}>
            <iframe
              style={{ width: "100%", height: "500px" }}
              src={imageUrl}
              title="描述"
            ></iframe>
            ;
          </div>
        );
      case "mp4":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
            <video
              controls
              style={{ width: "100%", height: "600px" }}
              src={imageUrl}
            ></video>
          </div>
        );
      case "docx":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
            <FileViewer
              loader={undefined}
              src={imageUrl}
              fileName="docx"
              onError={(e) => {
                console.log("error doc",e);
              }}
            />
          </div>
        );
      case "":
        return <div style={{ width: "100%", height: "600px" }}></div>;
      default:
        return <div style={{ width: "100%", height: "600px" }}></div>;
    }
  };
  return (
    <>
      <div
        onClick={trunHandler}
        style={{ width: "100%", height: "100%" }}
        id="xunlian"
      ></div>
      <Modal
        title="年度训练"
        className="owner_model"
        width={1300}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        centered
        footer={null}
        onCancel={() => {
          setisModalOpen(false);
        }}
      >
        <div >
          <Row>
            <Col span={2}>
              <div style={{ color: "#fff" }}>
                <p>任务列表</p>
               <div style={{ height: "600px",overflowY:"hidden" }}>
               {trainingStore.list?.map((item) => {
                  return (
                    <p
                      key={item.identity}
                      style={{
                        color: item.identity === taskId ? "blue" : "#fff",
                        cursor: "pointer",
                      }}
                      onClick={() => {
                        setTaskId(item.identity);
                        getFolderhandler(item.identity);
                      }}
                    >
                      {item.title}
                    </p>
                  );
                })}
               </div>
              </div>
            </Col>
            <Col span={2}>
              <div style={{ color: "#fff" }}>
                <p>文件夹列表</p>
                {folderList?.map((item) => {
                  return (
                    <p
                      key={item.identity}
                      style={{
                        color: folderId === item.identity ? "blue" : "#fff",
                        cursor: "pointer",
                      }}
                      onClick={() => {
                        setFolderId(item.identity);
                        getAehandler(item.identity);
                      }}
                    >
                      {item.folder_name}
                    </p>
                  );
                })}
              </div>
            </Col>
            <Col span={2} style={{height:"600px",overflowY:"hidden"}}>
              <div style={{ color: "#fff" }}>
                <p>档案列表</p>
               <div style={{height:"600px",overflowY:"scroll"}}>
               {imageList?.map((item) => {
                  let fileType = getFileTypeFromUrl(item.file_url);
                  switch (fileType) {
                    case "png":
                      return imageWidget(item);
                    case "jpeg":
                      return imageWidget(item);
                    case "jpg":
                      return imageWidget(item);
                    case "pdf":
                      return (
                        <p
                          key={item.identity}
                          style={{ cursor: "pointer" }}
                          onClick={() => {
                            setImageUrl(item.file_url);
                          }}
                        >
                          {item.file_name}
                        </p>
                      );
                    case "mp4":
                      return (
                        <p
                          key={item.identity}
                          style={{ cursor: "pointer" }}
                          onClick={() => {
                            setImageUrl(item.file_url);
                          }}
                        >
                          {item.file_name}
                        </p>
                      );
                    case "docx":
                      return (
                        <p
                          key={item.identity}
                          style={{ cursor: "pointer" }}
                          onClick={() => {
                            setImageUrl(item.file_url);
                          }}
                        >
                          {item.file_name}
                        </p>
                      );
                    default:
                      return (
                        <img
                          onClick={() => {
                            setImageUrl(item.file_url);
                          }}
                          key={item.identity}
                          style={{ width: "80px" }}
                          src={item.file_url}
                          alt=""
                        />
                      );
                  }
                })}
               </div>
              </div>
            </Col>
            <Col span={16}>
              <div
                style={{
                  color: "#fff",
                  width: "100%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                {preView()}
              </div>
            </Col>
          </Row>
        </div>
      </Modal>
    </>
  );
};

export default inject(
  "homeStore",
  "trainingStore",
  "folderStore"
)(observer(Turn));
