system-copyright-react/src/components/card/CardProjAgent.tsx

import './card-proj-agent.css'
import { OrderedListOutlined, BarsOutlined, SearchOutlined } from "@ant-design/icons";
import { Badge, Tag } from 'antd';
import { IAgent } from "../../interfaces/agent/IAgent.ts";
import { useNavigate } from "react-router-dom";

export default function CardProjAgent(props: IAgent) {

    const nav = useNavigate();

    /**
     * 接单状态
     */
    const renderTakeStatus = () => {
        if (props.isTake == 0) {
            return <Tag color="default">待结单</Tag>;
        }
        if (props.isTake == 1) {
            return <Tag color="success">已接单</Tag>;
        }
        if (props.isTake == 2) {
            return <Tag color="error">未接单</Tag>;
        }
        return <></>;
    }

    /**
     * 签订状态
     */
    const renderAgreementStatus = () => {
        if (props.isAgreement == 0) {
            return <Tag color="error">未签署协议</Tag>;
        }
        if (props.isAgreement == 1) {
            return <Tag color="success">已签署协议</Tag>;
        }
        return <></>;
    }

    /**
     * 结束状态
     */
    const renderOverStatus = () => {
        if (props.isOver == 0) {
            return <Tag color="default">进行中</Tag>;
        }
        if (props.isOver == 1) {
            return <Tag color="success">完成</Tag>;
        }
        if (props.isOver == 2) {
            return <Tag color="error">终止</Tag>
        }
        return <></>;
    }

    return (
        <div className="card-proj-agent">
            <div className='cardpro-agent-top'>
                <div className='cardpro-agent-tlift'>
                    <a href="/#">{props.projName}</a>
                </div>
                <div className='cardpro-agent-tright'>
                    <span className="agent">代理商：{props.basicsName}</span>
                    <span className="orderNo">订单号：{props.orderNumber}</span>
                </div>
            </div>
            <hr />
            <div className='cardpro-agent-center'>
                <div className='cardpro-agent-cTop'>
                    <div><span>金额￥：{props.orderShoppingAmount / 100}</span></div>
                    <div><span>{props.gmtCreate}</span></div>
                </div>

                <div className='cardpro-agent-cBot'>
                    <div className='cardpro-agent-cBot-left'>
                        <span>
                            <OrderedListOutlined />
                            <Badge dot count={props.orderAgreementStatus == 'AWAIT_SURE' ? 1 : 0}>
                                <a href="/#" onClick={(e) => {
                                    e.preventDefault();
                                    nav(`/agent-agreement/${props.orderId}`);
                                }}>协议清单</a>
                            </Badge>
                        </span>
                        <span style={{ marginLeft: '15px' }}>
                            <BarsOutlined />
                            <Badge size="small" count={props.isOver == 0 && props.materialAmendApplyCount ? props.materialAmendApplyCount : 0}>
                                <a href="/#" onClick={(e) => {
                                    e.preventDefault();
                                    nav(`/agent-correction/${props.orderId}`);
                                }}>代办列表</a>
                            </Badge>
                        </span>
                    </div>
                    <div className='cardpro-agent-cBot-right'>
                        {
                            props.isResult ? (
                                <div >
                                    <span>
                                        <SearchOutlined />
                                        <a href="/#" onClick={(e) => {
                                            e.preventDefault();
                                            nav(`/agent-result/${props.orderId}`);
                                        }}>查看结果</a>
                                    </span>
                                </div>
                            ) : <></>
                        }
                    </div>
                </div>
            </div>
            {/* <div className="title">
                <div className="left">
                    <a href="/#">{props.projName}</a>
                </div>
                <div className="right">
                    <span className="agent">代理商：{props.basicsName}</span>
                    <span className="orderNo">订单号：{props.orderNumber}</span>
                </div>
            </div>
            <hr/>
            <div className="body">
                <div className="line">
                    <div className="left">
                        <span>金额￥：{props.orderShoppingAmount / 100}</span>
                    </div>
                    <div className="right">
                        <span>{props.gmtCreate}</span>
                    </div>
                </div>
                <div className="line" style={{height: '30px', lineHeight: '30px'}}>
                    <div className="left">
                        <span>
                            <OrderedListOutlined/>
                            <Badge dot count={props.orderAgreementStatus == 'AWAIT_SURE' ? 1 : 0}>
                                <a href="/#" onClick={(e) => {
                                    e.preventDefault();
                                    nav(`/agent-agreement/${props.orderId}`);
                                }}>协议清单</a>
                            </Badge>
                        </span>
                        <span style={{marginLeft: '15px'}}>
                            <BarsOutlined/>
                            <Badge size="small" count={props.isOver == 0 && props.materialAmendApplyCount ? props.materialAmendApplyCount : 0}>
                                <a href="/#" onClick={(e) => {
                                    e.preventDefault();
                                    nav(`/agent-correction/${props.orderId}`);
                                }}>代办列表</a>
                            </Badge>
                        </span>
                    </div>
                    {
                        props.isResult ? (
                            <div className="right">
                                <span>
                                    <SearchOutlined/>
                                    <a href="/#" onClick={(e) => {
                                        e.preventDefault();
                                        nav(`/agent-result/${props.orderId}`);
                                    }}>查看结果</a>
                                </span>
                            </div>
                        ) : <></>
                    }

                </div>
            </div> */}
            <hr />
            <div className="tail">
                <div className="tail-left">
                    <span className="status order-status">{renderTakeStatus()}</span>
                    <span className="status agreement-status">{renderAgreementStatus()}</span>
                </div>
                <div className="tail-left">
                    <span className="status process-status">{renderOverStatus()}</span>
                </div>
            </div>
        </div>
    )
}