/*
 * @Author: lusx 
 * @Date: 2020-02-27 15:02:53 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-03-02 21:51:42
 */
import LoadingSpinner from '../LoadingSpinner.js';
import start1 from "../LSimg/start1.png";
import finish from "../LSimg/finish.png";
import working from "../LSimg/working.png";
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const prefixCls = "prj-portal";
const Steps = props => {
    const { stages,loading } = props;
    if (props.loading && stages.length === 0) {
        return (
            <LoadingSpinner ecId={`${this && this.props && this.props.ecId || ''}_LoadingSpinner@bip68f`} />
          );
    }
    if (stages.length === 0) {
        return (
              <span className={`${prefixCls}-no-step`}>{getLabel('518322','目前项目没进度')}</span>
        );
      }
    return (
        <div className={`${prefixCls}-steps-body`}>
            {
                stages && stages.map((item,index)=>{
                        let imgsrc = "";
                        if(index == 0){
                            imgsrc = start1;
                        }else if(index == stages.length - 1) {
                            imgsrc = finish;
                        }else{
                            imgsrc = working;
                        }
                        return (
                            <div className={`${prefixCls}-inner_item`}>
                                <img style={{width:"34px",height:"34px"}} src={imgsrc} />
                                <div className={`${prefixCls}-item_right`}>
                                    <div className={`${prefixCls}-main_text`}>{item.num||0}</div>
                                    <div className={`${prefixCls}-sub_text`}>{item.name}</div>
                                </div>
                            </div>
                        );
                })
            }
        </div>
    );
};
let x = 0;
const mousedownFun = (stages,ev)=>{
    const oEvent = ev || event;
    oEvent.preventDefault(); 
    const content = document.getElementsByClassName('prj-portal-steps-body')[0];
    const contentBox = stages.length * document.getElementsByClassName('prj-portal-inner_item')[0].offsetWidth + (stages.length-1) * 20;
    const scoll = contentBox - content.offsetWidth;
    if(contentBox > content.offsetWidth){
        x = oEvent.clientX - content.offsetLeft;
        content.onmousemove = function(ev) {
            const oEvent = ev || event;
            var m = oEvent.clientX - x;
            if(m > (scoll))  m = scoll;
            if(m<0 && Math.abs(m) > content.offsetWidth )  m = -content.offsetWidth;
            content.style.left = m + 'px';
        }
        content.onmouseup = function(ev) {
            const oEvent = ev || event;
            content.onmousemove = null;
            content.onmouseup = null;
        };
    }
}
export default Steps;