/*
 * @Author: 吴永生 15770852798@163.com
 * @Date: 2022-09-09 14:41:47
 * @LastEditors: 吴永生 15770852798@163.com
 * @LastEditTime: 2022-09-09 16:48:28
 * @FilePath: /bkunyun/src/views/Project/ProjectJobDetail/LogView/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useState, useEffect } from "react";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
import { toJS } from "mobx";
import classnames from "classnames";
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

import MyButton from "@/components/mui/MyButton";
import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";

import style from "./index.module.css";

type LogViewProps = {
    logs: any[];
    setShowLogView: any;
};

const LogView = (props: LogViewProps) => {
    const { logs, setShowLogView } = props;
    const { currentProjectStore } = useStores();
    const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
    const projectId = toJS(currentProjectStore.currentProjectInfo.id);
    // 当前选择的日志
    const [logCurrent, setLogCurrent] = useState<number>(0);
    // 当前日志的内容文本
    const [logText, setLogText] = useState('')
    // 当前日志路径
    const [logPath, setLogPath] = useState('')

    // 请求日志文本
    useEffect(() => {
        if (logPath) {
            const path = logPath.slice(12)
            CloudEController.JobFileDownloadText(
                path,
                fileToken as string,
                projectId as string
            )?.then((res) => {
                setLogText(res.data)
            })
        } else {
            setLogText("")
        }
    }, [fileToken, logPath, projectId]);

    // 选择日志时改变日志路径
    useEffect(() => {
        setLogPath(logs[logCurrent]?.logPath)
    }, [logCurrent, logs]);

    // 下载当前日志
    const handleDownLoad = () => {
        const path = logPath.slice(12)
        CloudEController.JobFileDownload(
            path,
            fileToken as string,
            projectId as string
        );
    }

    const handleLogTab = (index: number)=>{
        setLogText("");
        setLogCurrent(index)
    }
    
    return (
        <FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
            <div className={style.logViewBox}>
                <div className={style.logViewContentMask}></div>
                <div className={style.logViewTop}>
                    <div className={style.leftButton}><ChevronLeftIcon /></div>
                    <div className={style.middleFixed}>
                        <div className={style.middleDynamic}>
                            {logs.map((item: any, index: number) => {
                                return <div
                                    key={index}
                                    onClick={() => { handleLogTab(index) }}
                                    className={classnames({
                                        [style.logTitle]: true,
                                        [style.logTitleSelected]: index === logCurrent,
                                    })}>
                                    <InsertDriveFileOutlinedIcon className={style.fileIcon} />
                                    <span className={style.logName}>{item.logName}</span>
                                </div>
                            })}
                        </div>
                    </div>
                    <div className={style.rightButton}><ChevronRightIcon /></div>
                </div>
                <div className={style.logViewContent}>
                    {logText}
                </div>
                <div className={style.logViewBottom}>
                    <MyButton text='下载当前日志' onClick={handleDownLoad} />
                </div>
            </div>
        </FullScreenDrawer>
    )
}

export default LogView