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

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

    const [lastProcessList, setLastProcessList] = useState();

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

    const color = i => {
        return lastProcessList && lastProcessList.length > i
            ? lastProcessList[i].progressKey === 'JXZ'
                ? 'vtx-modal-gas-cylinder-file-conduct'
                : lastProcessList[i].progressKey === 'YWC'
                ? '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'
                ? 'vtx-modal-gas-cylinder-file-completedLine'
                : 'vtx-modal-gas-cylinder-file-notStartedLine'
            : 'vtx-modal-gas-cylinder-file-notStartedLine;';
    };

    return (
        <div style={{ display: 'flex', marginBottom: '20px' }}>
            <div className={'vtx-modal-gas-cylinder-file-group'} style={{ margin: '0 10px' }}>
                <div style={{ width: '110px', textAlign: 'center' }}>
                    {lastProcessList && lastProcessList.length > 0
                        ? lastProcessList[0].content
                        : ''}
                </div>
                <div className={color(0)}></div>
                <div className={'vtx-modal-gas-cylinder-file-img'}>燃气供应站</div>
                <div className={color(4)}></div>
                <div style={{ width: '110px', textAlign: 'center' }}>
                    {lastProcessList && lastProcessList.length > 4
                        ? lastProcessList[4].content
                        : ''}
                </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: '110px', textAlign: 'center' }}>
                    {lastProcessList && lastProcessList.length > 1
                        ? lastProcessList[1].content
                        : ''}
                </div>
                <div className={color(1)}></div>
                <div className={'vtx-modal-gas-cylinder-file-img'}>送气/回收人员</div>
                <div style={{ height: '70px' }}></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: '110px', textAlign: 'center' }}>
                    {lastProcessList && lastProcessList.length > 2
                        ? lastProcessList[2].content
                        : ''}
                </div>
                <div className={color(2)}></div>
                <div className={'vtx-modal-gas-cylinder-file-img'}>用气户</div>
                <div className={color(3)}></div>
                <div style={{ width: '110px', textAlign: 'center' }}>
                    {lastProcessList && lastProcessList.length > 3
                        ? lastProcessList[3].content
                        : ''}
                </div>
            </div>
        </div>
    );
}

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

export default LastProcessFlow;
