import React from 'react'

const colors = [
    {code: "1", val: "待产中", bgColor: "#F1AB0A", borderColor: "#F1AB0A"}, //待产中
    {code: "2", val: "生产中", bgColor: "#26A764", borderColor: "#26A764"}, //生产中
    {code: "3", val: "停产中", bgColor: "#F05B4F", borderColor: "#F05B4F"}, //停产中
]

function ProcessCard(props) {
    const {itemData = {}} = props;
    let {
        code = "L7-TL",
        name = "-",
        productBatchNo = "-",
        productLevel = "",
        productName = "",
        runningstatus = "-"
    } = itemData;
    let {val, bgColor, borderColor} = colors.find(item => item.code == runningstatus) || {};
    let prodInfo = productLevel ? (productName + "-" + productLevel) : (productName ? productName : "-")

    return (
        <div className='card'>
            <div className='card-top'>
                <div className='card-top-img'/>
                <div className='card-top-text'>{name}</div>
            </div>
            <div className='card-bottom'>
                <div className="card-bottom-info">当前生产信息</div>
                <div className='card-bottom-item'>
                    <span>产品信息</span>
                    <span className='card-bottom-item-val'>{prodInfo}</span>
                </div>
                <div className='card-bottom-item'>
                    <span>批次信息</span>
                    <span className='card-bottom-item-val'>{productBatchNo}</span>
                </div>
                <div className='card-bottom-item'>
                    <span>生产状态</span>
                    <span className='card-bottom-item-val process-status'>{val}</span>
                </div>
            </div>

            <style jsx>{`
              .card {
                width: 100%;
              }

              .card-top .card-top-img {
                border: 1px solid #0497FD;
                height: 190px;
                background: url(/img/process/${code}.png) no-repeat center / cover;
              }

              .card-top {
                border: 1px solid #0497FD;
              }

              .card-top .card-top-text {
                height: 30px;
                font-size: 18px;
                font-weight: bold;
                color: #28A3FF;
                background-color: #0E2C55;
                text-align: center;
              }

              .card-bottom {
                margin-top: 4px;
                background-color: #062D8D;
                padding: 8px 4px 16px;
              }

              .card-bottom .card-bottom-info {
                color: #F1AB0A;
                margin-bottom: 6px;
              }

              .card-bottom .card-bottom-item {
                display: flex;
                justify-content: space-between;
                line-height: 25px;
              }

              .card-bottom-item .card-bottom-item-val {
                color: #28EAFF;
                max-width: calc(100% - 60px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 6px;
              }

              .card-bottom-item .process-status {
                color: #eee;
                border-radius: 2px;
                border: 1px solid ${borderColor};
                background-color: ${bgColor};
                padding: 0 2px;
              }
            `}</style>
        </div>

    )
}

export default ProcessCard;