import React, { useState, useCallback, useEffect, useMemo } from "react";
import { observer } from "mobx-react-lite";

import useMyRequest from "@/hooks/useMyRequest";
import {
    getOverviewInfo,
    getTaskOverview,
} from "@/api/project_api";
import { useStores } from "@/store/index";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import NoProject from "@/components/BusinessComponents/NoProject";
import projectImg from "@/assets/project/projectIconSmall.svg";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import TaskCard from './TaskCard'

import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";

const ProjectOverview = observer(() => {
    const { currentProjectStore } = useStores();
    // 概览基本信息
    const [overviewInfo, setOverviewInfo] = useState<any>({});
    // 任务概览列表
    const [taskList, setTaskList] = useState([])
    const [jobName, setJobName] = useState('')
    const [page, setPage] = useState(0)
    const [size, setSize] = useState(10)
    // 选择近7天or近15天or近30天
    const [day, setDay] = useState("7");
    // 获取概览基本信息
    const { run: getOverview } = useMyRequest(getOverviewInfo, {
        onSuccess: (result: any) => {
            setOverviewInfo(result.data);
        },
    });
    // 获取任务概览
    const { run: getTaskOverviewList } = useMyRequest(getTaskOverview, {
        onSuccess: (result: any) => {
            setTaskList(result.data.content);
        },
    });
    useEffect(() => {
        getOverview({
            id: currentProjectStore.currentProjectInfo.id as string,
        });
    }, [currentProjectStore.currentProjectInfo.id, getOverview]);

    useEffect(() => {
        getTaskOverviewList({
            projectId: currentProjectStore.currentProjectInfo.id as string,
            jobName: jobName,
            day: Number(day),
            page: page,
            size: size,
        });
    }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);

    // 搜索值改变
    const handleJobNameChange = (e: any) => {
        if (e.target.value.length > 30) {
            return;
        }
        setJobName(e.target.value);
    };

    // 按回车搜索
    const handleJobNameChangeKeyUp = (e: any) => {
        if (e.keyCode === 13) {

        }
    };

    if (currentProjectStore.currentProjectInfo.name) {
        return (
            <>
                <div className={style.basicInformation}>
                    <div>
                        <div className={style.titleBox}>
                            <img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
                            <span className={style.projectName}>
                                {currentProjectStore.currentProjectInfo.name}
                            </span>
                        </div>
                        <div className={style.otherInformation}>
                            <div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>管理员</span></div>
                            <div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>通用计算区</span></div>
                            <div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>2022-07-07</span></div>
                        </div>
                    </div>
                    <div className={style.basicInformationRight}>
                        <div>
                            <div className={style.otherInformationBox}>项目总消费</div>
                            <div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
                        </div>
                        <div className={style.verticalLine}></div>
                        <div>
                            <div className={style.otherInformationBox}>项目剩余预算</div>
                            <div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
                        </div>
                        <div className={style.verticalLine}></div>
                        <div>
                            <div className={style.otherInformationBox}>项目存储大小</div>
                            <div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</div>
                        </div>
                    </div>
                </div>
                <div className={style.searchBox}>
                    <div className={style.searchLineLeft}>
                        <div className={style.taskOverview}>任务概览</div>
                        <RadioGroupOfButtonStyle
                            value={day}
                            radioOptions={[
                                { value: "7", label: "近7天" },
                                { value: "15", label: "近15天" },
                                { value: "30", label: "近30天" },
                            ]}
                            handleRadio={setDay}
                        ></RadioGroupOfButtonStyle>
                    </div>
                    <div className={style.projectDataSearch}>
                        <InputBase
                            placeholder="输入关键词搜索"
                            inputProps={{ "aria-label": "输入关键词搜索" }}
                            value={jobName}
                            onChange={handleJobNameChange}
                            style={{ width: "280px", fontSize: "14px" }}
                            onKeyUp={handleJobNameChangeKeyUp}
                        />
                        <IconButton
                            type="submit"
                            aria-label="search"
                            size="small"
                            style={{ padding: "4px" }}
                        // onClick={handleRefresh}
                        >
                            <SearchIcon
                                style={{ color: "#999" }}
                            />
                        </IconButton>
                    </div>
                </div>
                <div className={style.taskDisplay}>
                    {/* 任务列表为空展示 */}
                    {taskList.length === 0 && (
                        <div className={style.noDataBox}>
                            <img className={style.noDataImg} src={noFile} alt="" />
                            <span className={style.noDataText}>暂无任务</span>
                        </div>
                    )}
                    {/* 任务列表卡片渲染 */}
                    {taskList.length > 0 && taskList.map((item: any) => {
                        return <TaskCard
                            name={item.name}
                            creator={item.creator}
                            state={item.state}
                            completeNum={item.completeNum}
                            totalNum={item.totalNum}
                            costTime={item.costTime}
                            jobCost={item.jobCost}
                            outputs={item.outputs}
                            key={item.id}
                        />
                    })}
                </div>
            </>
        );
    } else {
        return <NoProject />;
    }
})
export default ProjectOverview