import React, { useEffect } from 'react';
import './style/lastProcessFlow.less';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { getLastProcessRecord } from './api';
import { Image } from 'antd';

function LastProcessFlow(props) {
    const { id, urlHead } = props;

    const [lastProcessList, setLastProcessList] = useState();

    useEffect(() => {
        if (id) {
            getLastProcessRecord(id, urlHead).then(list => {
                setLastProcessList(list);
            });
        }
    }, [id, urlHead]);

    const color = i => {
        return lastProcessList && lastProcessList.length > i
            ? lastProcessList[i].progressKey === 'JXZ'
                ? 'vtx-modal-gas-cylinder-file-conduct'
                : lastProcessList[i].progressKey === 'YWC' || lastProcessList[i].progressKey === 'QS'
                    ? 'vtx-modal-gas-cylinder-file-completed'
                    : 'vtx-modal-gas-cylinder-file-notStarted'
            : 'vtx-modal-gas-cylinder-file-notStarted;';
    };

    const line = i => {
        return lastProcessList && lastProcessList.length > i
            ? lastProcessList[i].progressKey === 'YWC' || lastProcessList[i].progressKey === 'QS'
                ? 'vtx-modal-gas-cylinder-file-completedLine'
                : 'vtx-modal-gas-cylinder-file-notStartedLine'
            : 'vtx-modal-gas-cylinder-file-notStartedLine;';
    };

    return (
        <div>
            {
                lastProcessList && lastProcessList.length ? (
                    <div style={{ display: 'flex', marginBottom: '20px' }}>
                        <div className={'vtx-modal-gas-cylinder-file-group'} style={{ margin: '0 10px' }}>
                            <div style={{ width: '150px', textAlign: 'center' }}>
                                {lastProcessList && lastProcessList.length > 0
                                    ? lastProcessList[0].time || (lastProcessList[0].progressTextValue + lastProcessList[0].progressValue)
                                    : ''}
                                {
                                    lastProcessList && lastProcessList.length > 0 && lastProcessList[0].time && (
                                        <div>{lastProcessList[0].progressTextValue}</div>
                                    )
                                }
                            </div>
                            <div className={color(0)}></div>
                            <div className={'vtx-modal-gas-cylinder-file-img'}>燃气供应站</div>
                            <div className={color(4)}></div>
                            <div style={{ width: '150px', textAlign: 'center' }}>
                                {lastProcessList && lastProcessList.length > 4
                                    ? lastProcessList[4].time || (lastProcessList[4].progressTextValue + lastProcessList[4].progressValue)
                                    : ''}
                                {
                                    lastProcessList && lastProcessList.length > 4 && lastProcessList[4].time && (
                                        <div>{lastProcessList[4].progressTextValue}</div>
                                    )
                                }
                            </div>
                        </div>
                        <div className={'vtx-modal-gas-cylinder-file-group'}>
                            <div className={line(1)}>——————————————&gt;</div>
                            <div className={line(4)}>&lt;——————————————</div>
                        </div>
                        <div className={'vtx-modal-gas-cylinder-file-group'}>
                            <div style={{ width: '150px', textAlign: 'center' }}>
                                {lastProcessList && lastProcessList.length > 1
                                    ? lastProcessList[1].time || (lastProcessList[1].progressTextValue + lastProcessList[1].progressValue)
                                    : ''}
                                {
                                    lastProcessList && lastProcessList.length > 1 && lastProcessList[1].time && (
                                        <div>{lastProcessList[1].progressTextValue}</div>
                                    )
                                }
                            </div>
                            <div className={color(1)}></div>
                            {/* <div className={'vtx-modal-gas-cylinder-file-img'}>送气/回收人员</div> */}
                            <div style={{ height: '100px' }}></div>
                            <div className={line(4)}>————————————</div>
                        </div>
                        <div className={'vtx-modal-gas-cylinder-file-group'}>
                            <div className={line(2)}>——————————————&gt;</div>
                            <div className={line(4)}>———————————————</div>
                        </div>
                        <div className={'vtx-modal-gas-cylinder-file-group'} style={{ margin: '0 10px' }}>
                            <div style={{ width: '150px', textAlign: 'center' }}>
                                {lastProcessList && lastProcessList.length > 2
                                    ? lastProcessList[2].time || (lastProcessList[2].progressTextValue + lastProcessList[2].progressValue)
                                    : ''}
                                {
                                    lastProcessList && lastProcessList.length > 2 && lastProcessList[2].time && (
                                        <div>{lastProcessList[2].progressTextValue}</div>
                                    )
                                }
                            </div>
                            <div className={color(2)}></div>
                            <div className={'vtx-modal-gas-cylinder-file-img'}>用气户</div>
                            <div className={color(3)}></div>
                            <div style={{ width: '150px', textAlign: 'center' }}>
                                {lastProcessList && lastProcessList.length > 3
                                    ? lastProcessList[3].time || (lastProcessList[3].progressTextValue + lastProcessList[3].progressValue)
                                    : ''}
                                {
                                    lastProcessList && lastProcessList.length > 3 && lastProcessList[3].time && (
                                        <div>{lastProcessList[3].progressTextValue}</div>
                                    )
                                }
                            </div>
                        </div>
                    </div>
                ) : (
                    <div>暂无末次工序流转</div>
                )
            }
        </div>
    );
}

LastProcessFlow.propTypes = {
    id: PropTypes.string,
    urlHead: PropTypes.string,
};

export default LastProcessFlow;