import './step-proj-edit.css';
import { IStepProj, Process } from "../../interfaces/step/IStepProj.ts";
// import { CheckOutlined } from "@ant-design/icons";
import { useEffect } from 'react';

export default function StepProjEdit(props: IStepProj) {
    useEffect(() => {
        console.log(props);

    }, [])
    const height = window.innerHeight - 390;
    // 状态值  已完成:Process.COMPLETE  进行中: Process.PROCESSING 未操作:Process.PENDING
    const renderStepNo = () => {

        if (props.process == Process.COMPLETE) {
            // 状态:已完成
            return (
                <div className={
                    props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : ''
                }>
                    <div className="complete-num">
                        {/* <CheckOutlined/> */}
                        {props.step}
                    </div>
                    <div className='complete-text'>
                        {props.descTitle}
                    </div>
                </div>
            )
        } else if (props.process == Process.PROCESSING) {
            //  状态:进行中
            return (
                <div className={
                    props.step === 1 ? 'processing-one' : props.step === 2 ? 'processing-two' : props.step === 3 ? 'processing-three' : props.step === 4 ? 'processing-four' : ''
                }>
                    <div className="processing-num">
                        {props.step}
                    </div>
                    <div className='processing-text'>
                        {props.descTitle}
                    </div>
                </div>
            )
        }
        return (
            //  状态:未操作
            <div className='pending'>
                <div className="pending-num">
                    {props.step}
                </div>
                <div className='pending-text'>
                    {props.descTitle}
                </div>
            </div>
        )
    }

    // const renderStepDesc = () => {
    //     if (props.process != Process.PENDING) {
    //         return (
    //             <div className="desc">
    //                 <div className="title">{props.descTitle}</div>
    //                 {/* <div className="detail">{props.descDetail}</div> */}
    //             </div>
    //         )
    //     }
    //     return (
    //         <div className="desc pending">
    //             <div className="title">{props.descTitle}</div>
    //             {/* <div className="detail">{props.descDetail}</div> */}
    //         </div>
    //     )
    // }

    const renderStepLine = () => {
        if (!props.hasNext) {
            return <></>
        }
        if (props.process == Process.COMPLETE) {
            // 已完成
            return (
                <div className={
                    props.step === 1 ? 'complete-oneLine setLine' : props.step === 2 ? 'complete-twoLine setLine' : props.step === 3 ? 'complete-threeLine setLine' : props.step === 4 ? 'complete-fourLine setLine' : ''
                }></div>
            )
        } 
        // else if (props.process == Process.PROCESSING) {
        //     // 进行中
        //     return(
        //         <div className={
        //             props.step === 1 ? 'processing-oneLine setLine' : props.step === 2 ? 'processing-twoLine setLine' : props.step === 3 ? 'processing-threeLine setLine' : props.step === 4 ? 'processing-fourLine setLine' : ''
        //         }></div>
        //     )
        // }
        return <div className="no-line setLine"></div>
    }

    return (
        <div className="step-proj">
            <div className="step" >
                {renderStepNo()}
                {/* {renderStepDesc()} */}
                {renderStepLine()}
                <div className='downBox'></div>
            </div>
            <div className="step-card" style={{ maxHeight: `${height - 20}px` }}>
            {/* <div className="step-card" style={{  }}> */}
                <div className="step-card-list">{props.children}</div>
            </div>
        </div>
    )
}