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 ProcessTaskCard(props) {
    const {
        itemData = {},
        operationCode = ""
    } = props;
    let {
        code = "-",
        productBatchNo = "-", //批次
        productName = "-",
        onlineTime = 0,
        runningstatus = "", //运行状态 1：待生产，2：生产中，3：停产中
        equipParams = {},
        routeParams = {},
    } = itemData;
    runningstatus = runningstatus ? runningstatus.split('.')[0] : ""
    let {val, bgColor = "", borderColor} = colors.find(item => item.code == runningstatus) || {};

    return (
        <div className='card'>
            <div className='card-top'>
                <div className='card-top-title'>{code}</div>
                <div className='card-top-img'>
                    <div className='card-top-status-mask'></div>
                    <div className='card-top-status'>{val}</div>
                </div>
                <div className='card-top-duration'>
                    <span>设备运行时长：</span><span>{Number(onlineTime).toFixed(2)}h</span>
                </div>
            </div>

            <div className='card-bottom'>
                <div className="card-bottom-info">生产信息</div>
                <div className='card-bottom-item'>
                    <span className='item-text'>产品名称</span>
                    <span className='item-val'>{productName}</span>
                </div>
                <div className='card-bottom-item'>
                    <span className='item-text'>产品批次</span>
                    <span className='item-val'>{productBatchNo}</span>
                </div>

                <div className="card-bottom-info">设备参数</div>
                {equipParams && Object.keys(equipParams).map(item => {
                    return <div className='card-bottom-item'>
                        <span className='item-text'>{item}</span>
                        <span className='item-val'>{equipParams[item] || "-"}</span>
                    </div>
                })}

                <div className="card-bottom-info">工艺参数</div>
                {routeParams && Object.keys(routeParams).map(item => {
                    return <div className='card-bottom-item'>
                        <span className='item-text'>{item}</span>
                        <span className='item-val'>{routeParams[item] || "-"}</span>
                    </div>
                })}
            </div>

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

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

              .card-top-title {
                color: #ffffff;
                background-color: #3D7FFF;
                text-align: center;
                font-size: 17px;
                font-weight: bold;
                height: 26px;
              }

              .card-top-img {
                position: relative;
                height: 65px;
                background: url(/img/process/${operationCode}.png) no-repeat center / cover;
              }

              .card-top-img .card-top-status-mask {
                height: 100%;
                width: 50%;
                background-color: ${bgColor}80;
              }

              .card-top-img .card-top-status {
                position: absolute;
                display: inline-block;
                top: 4px;
                left: 4px;
                color: #ffffff;
                border-radius: 2px;
                border: 1px solid ${borderColor};
                background-color: ${bgColor}cc;
                padding: 0 2px;
              }

              .card-top-duration {
                color: #ffffff;
                font-size: 15px;
                font-weight: bold;
                height: 20px;
                text-align: center;
                background-color: #0E2C55;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 6px;
              }

              .card-bottom {
                height: 297px;
                overflow: hidden;
                background-color: #102242;
                margin-top: 4px;
                padding: 8px 14px 16px;
                font-size: 12px;
              }

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

              .card-bottom .card-bottom-item {
                display: flex;
                justify-content: space-between;
                line-height: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .card-bottom-item .item-text {
                color: #ffffff;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .card-bottom-item .item-val {
                color: #28A3FF;
                margin-left: 6px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

            `}</style>
        </div>

    )
}

export default ProcessTaskCard;