newICSS/src/components/FolderOrder/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import style from './index.less';
import close from './img/close.png';
import { Notify } from '@commonComp';
import floderR from './img/floderR.png';
import floderD from './img/floderD.png';
import diagUp from '@common/images/diagUp.png';
import diagDown from '@common/images/diagDown.png';
class FolderOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            folderModal:false,
            selectIndex: -1,
            folderList: null
        }
        this.textInput = React.createRef();
        this.orderFolder = this.orderFolder.bind(this)
        this.saveOrderFolder = this.saveOrderFolder.bind(this)
    }
    componentWillReceiveProps(props) {
        this.setState({
            folderList: JSON.parse(JSON.stringify(props.adminItems)),
            selectIndex: -1
        })
    }
    floderSlide(e,i) {
        const selectIndex = this.state.selectIndex
        if(selectIndex === i) {
            this.setState({
                selectIndex: -1
            })
        } else {
            this.setState({
                selectIndex: i
            })
        }
        
    }
    saveOrderFolder(){
        const {saveOrderFolder,patInfo,folderManage} = this.props
        const {folderList} = this.state
        let folderListFilter = []
        for(let i = 0; i < folderList.length; i++) {
            let templateList = []
            if(folderList[i].templateInfo) {
                for(let j = 0; j < folderList[i].templateInfo.length;j++) {
                    const templateItem = folderList[i].templateInfo[j]
                    templateList.push({
                            "folderId": templateItem.folderId,
                            "id": templateItem.folderMappingId,
                            "isDeleted": "N",
                            "orderNo": j,
                            "templateId": templateItem.id
                          }) 
                }
            }
            
            const item = 
            {
                "doctorId": patInfo.doctorId,
                "hospitalId": patInfo.hospitalId,
                "id": folderList[i].id,
                "isDeleted": "N",
                "name": folderList[i].name,
                "orderNo": i,
                "templateSortVOList": templateList
                }
                folderListFilter.push(item)
        }
        saveOrderFolder(folderListFilter)
        folderManage(false)
    }
    orderFolder(index,e) {
        e.stopPropagation();
        const {selectIndex, folderList} =   this.state
        const folderListCopy = JSON.parse(JSON.stringify(folderList))
        const item = folderListCopy[index]
        if(index > 0) {
            folderListCopy.splice(index, 1)
            folderListCopy.splice(index-1, 0 , item)
            if(index === selectIndex) {
                this.setState({
                    selectIndex: selectIndex-1
                })
            }else if(index === selectIndex+1){
                this.setState({
                    selectIndex: selectIndex+1
                })
            }
        } else {
            folderListCopy.splice(index, 1)
            folderListCopy.splice(index+1, 0 , item)
            this.setState({
                selectIndex: selectIndex+1
            })
        }
        this.setState({
            folderList: folderListCopy
        })
    }
    orderTemplate(i,index, e) {
        e.stopPropagation();
        const folderListCopy = JSON.parse(JSON.stringify(this.state.folderList))
        const olderItem = folderListCopy[i]
        const templateList = olderItem.templateInfo
        const templateItem = templateList[index]
        if(index > 0) {
            templateList.splice(index, 1)
            templateList.splice(index-1, 0 , templateItem)
        } else {
            templateList.splice(index, 1)
            templateList.splice(index+1, 0 , templateItem)
        }
        this.setState({
            folderList: folderListCopy
        })
    }
    genAdminItems(items,flg) {
        const Floder=[],Items = [];
        const {admin,checkItemsAdmin} = this.props;
       
        const { selectIndex } = this.state;
        for(let i = 0;i < items.length;i++){
            let tmpItm = items[i]
            Floder.push(
                <div className={style.floderBox}>
                    <div className={style.floderItem} onClick={(e)=>{tmpItm.templateInfo&&tmpItm.templateInfo.length>0 ?this.floderSlide(e,i) :''}}>
                        <img src={selectIndex == i?floderD:floderR} className={style.floderRD}/>
                        {tmpItm.name}（{tmpItm.templateInfoCount}）
                        <img  class={style.orderIcon} src={i===0?diagDown:diagUp} alt="排序" onClick={this.orderFolder.bind(this, i)}/>
                        {/* <span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,i)}}>...</span> */}
                    </div>
                    {
                        i==selectIndex&&tmpItm.templateInfo&&tmpItm.templateInfo.length>0&&<div className={style.floderPartFr}>
                           { tmpItm.templateInfo.map((templateItem, index) => {
                               return (<div class={style.templateItem}>
                                   {templateItem.name}
                                   <img class={style.orderIcon} src={index===0?diagDown:diagUp} alt="排序" onClick={this.orderTemplate.bind(this, i, index)}/>
                               </div>)
                            })}
                        </div>
                    }
                </div>
            )
        }
        return Floder
    }
    onKeyPress(event){
        let e = event?event:window.event;
        if (e.keyCode == 13) {
          this.saveNewFolder()
        }
    }
    render() {
        const { folderOrderShow,title,folderManage,adminItems,  } = this.props;
        const domNode = document.getElementById('root');
        const items = this.state.folderList
        return folderOrderShow&&ReactDOM.createPortal(
            <div className={style.newFolderWrap}>
                <div className={style.folderModal} onClick={()=>folderManage(false)}></div>
                <div className={style.nameWrap}>
                    <div className={style.title}>
                        {
                            title?<div className={style.titleCon}>{title}</div>:null
                        }
                        <img src={close} alt="关闭" onClick={()=>folderManage(false)}/>
                    </div>
                    <div className={style['delContent']}>
                        {this.genAdminItems(items,true)}
                    </div>
                    <div className={style['delFoot']}>
                        <div className={style.halfBtn}>
                            <span className={`${style['delBtn']} ${style['delDel']}`} onClick={this.saveOrderFolder}>保存</span>
                        </div>
                        <div className={style.halfBtn}>
                            <span className={`${style['delBtn']} ${style['delCancel']}`} onClick={()=>folderManage(false)}>取消</span>
                        </div>
                    </div>
                </div> 
            </div>,domNode)
    }
}
export default FolderOrder;