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

import './card-proj-download.css';
import { IProjDownload } from "../../interfaces/card/ICardProj.ts";
import {
    CloseOutlined, RedoOutlined,
} from '@ant-design/icons';
// import { useEffect } from "react";
export default function CardProjDownload(props: IProjDownload) {
    // useEffect(() => {
    //    console.log(props);
       
    // }, [])
    return (
        // <div className="card-proj-download">
        <div className={props.canBtnClick ? 'card-proj-download' : 'card-proj-nodownload'}>
            <div className="cpDown-title">{props.title}</div>
            <div className='cpDown-bot'>
                <div className="cpDown-desc">{props.desc}</div>
                <div className="cpDown-option">
                    {
                        props.canBtnClick ? (
                            <div>
                                <div style={{ display:  props.title == '证书下载' ? 'unset' : 'none' }}>
                                    <a href="/#" className="cpDown-edit" style={{ minWidth: 30 }} onClick={(e) => {
                                        e.preventDefault();
                                        props.handleDownload();
                                    }}>下载</a>

                                </div>
                                <div style={{ display: props.title == '安装包' ? 'unset' : 'none' }}>
                                    <a href="/#" className="cpDown-edit" style={{ minWidth: 30, display: props.pkgStatus == 'SUCCESS' ? 'unset' : 'none' }} onClick={(e) => {
                                        e.preventDefault();
                                        props.handleDownload();
                                    }}>下载</a>
                                    <div title='安装包打包失败,点击重新打包'
                                        onClick={()=>{
                                            props.againPkg()
                                        }}
                                    style={{ minWidth: 30, display: props.pkgStatus == 'FAIL' ? 'unset' : 'none',color:'red',fontWeight:700,cursor:'pointer',whiteSpace: 'nowrap', }}>
                                        <span style={{marginRight:5}}>打包失败</span><CloseOutlined />
                                    </div>
                                    <div title='正在打包,点击刷新状态' style={{ minWidth: 30, display: props.pkgStatus == 'PKGING' ? 'unset' : 'none',cursor:'pointer',color:'rgba(64, 149, 229, 1)',
                                        //禁止换行
                                        whiteSpace: 'nowrap',
                                     }}
                                     onClick={()=>{
                                        props.upData()
                                     }}
                                     >
                                        <span style={{marginRight:5}}>正在打包</span><span style={{color:'green'}}>< RedoOutlined spin /></span>
                                    </div>

                                </div>
                                <div style={{ display: props.title == '演示视频' ? 'unset' : 'none' }} >
                                    <a href="/#" className="cpDown-edit" style={{ minWidth: 30,display:props.videoStatus == 'SUCCESS'?'unset':'none'}} onClick={(e) => {
                                        e.preventDefault();
                                        props.handleDownload();
                                    }}>下载</a>
                                    <div title='演示视频打包失败,点击重新打包'
                                        onClick={()=>{
                                            // props.againPkg()
                                            props.againVideo()
                                        }}
                                    style={{ minWidth: 30, display: props.videoStatus == 'FAIL' ? 'unset' : 'none',color:'red',fontWeight:700,cursor:'pointer' ,whiteSpace: 'nowrap',}}>
                                        <span style={{marginRight:5}}>打包失败</span><CloseOutlined />
                                    </div>
                                    <div title='正在打包,点击刷新状态' style={{ minWidth: 30, display: props.videoStatus == 'PKGING' ? 'unset' : 'none',cursor:'pointer',color:'rgba(64, 149, 229, 1)',
                                        //禁止换行
                                        whiteSpace: 'nowrap',
                                     }}
                                     onClick={()=>{
                                        // props.upData()
                                        props.upVideoData()
                                     }}
                                     >
                                        <span style={{marginRight:5}}>正在打包</span><span style={{color:'green'}}>< RedoOutlined spin /></span>
                                    </div>
                                    
                                    

                                </div>
                                <div style={{ display: props.title == '申请表' ||props.title == '操作手册' || props.title == '源代码' ? 'unset' : 'none' }}>
                                    下载 ：
                                    <a href="/#" className="cpDown-edit" style={{ minWidth: 30}} onClick={(e) => {
                                        e.preventDefault();
                                        props.handleDownload();
                                    }}>word</a>
                                    <a href="/#" className="cpDown-edit" style={{ minWidth: 30, marginLeft: 5 }} onClick={(e) => {
                                        e.preventDefault();
                                        props.downPdf();
                                    }}>{props.title == '申请表'?'txt':'pdf'}</a>
                                </div>
                            </div>
                        ) : (
                            // <a href="/#" className="cpDown-noedit"  style={{ color: '#c2c2c2',minWidth:30 }} onClick={(e) => {
                            //     e.preventDefault();
                            // }}>下载</a>
                            <div>
                                <div style={{ display: props.title == '代码压缩包' ? 'unset' : 'none' }}>
                                    <a href="/#" className="cpDown-noedit" style={{ color: '#c2c2c2', minWidth: 30 }} onClick={(e) => {
                                        e.preventDefault();
                                    }}>下载</a>
                                </div>
                                <div style={{ display: props.title == '申请表' || props.title == '操作手册' || props.title == '源代码' ? 'unset' : 'none' }}>

                                    <div style={{ color: '#c2c2c2' }}>下载 ：<a href="/#" className="cpDown-noedit" style={{ color: '#c2c2c2', minWidth: 30 }} onClick={(e) => {
                                        e.preventDefault();
                                    }} >word</a> <a href="/#" className="cpDown-noedit" style={{ color: '#c2c2c2', minWidth: 30 }} onClick={(e) => {
                                        e.preventDefault();
                                    }}>{props.title == '申请表'?'txt':'pdf'}</a></div>
                                </div>
                            </div>
                        )
                    }

                </div>
            </div>
            <div className='downBoxx'></div>
        </div>
    )
}