newICSS/src/components/TemplateItems/index.jsx

import PropTypes from "prop-types"
import React from "react"
import style from "./index.less"
import TemplateItem from './TemplateItem'
import check_circle from './TemplateItem/img/check-circle.png';
import delIcon from '@common/images/del_nor.png';
import check_right from './TemplateItem/img/check-right.png';
import Empty from '@components/Empty';
import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'


class TemplateItems extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'还没有保存模板',
            val:'',
            height:''
        }
        this.$cont = React.createRef();
        this.$conts = React.createRef();
        this.$search = React.createRef();
        this.genItems = this.genItems.bind(this);
        this.templateSearch = this.templateSearch.bind(this);
        this.handleEnter = this.handleEnter.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.clear = this.clear.bind(this);
    }  
    componentDidMount(){
        const height = getWindowInnerHeight()-195;
        this.setState({
            height:height
        })
        windowEventHandler('resize', ()=>{
            if(this.$conts.current){
                const height = getWindowInnerHeight()-195;
                this.setState({
                    height:height
                })
            }
        });
    }
    genItems(items,flg) {
        const Items = [];
        const {admin,adminItems,checkItemsAdmin} = this.props;
        items.forEach((v,idx) => {
            Items.push(
                <TemplateItem
                    {...v}
                    key={v.id}
                    idx={idx}
                    checkItems={this.props.checkItems}
                    allCheckShow={this.props.allCheckShow}
                    handleContentClick={this.props.handleContentClick}
                    handleTemplateDel={this.props.handleTemplateDel}
                    handleTitleChange={this.props.handleTitleChange}

                    admin={this.props.admin}
                    adminflg={flg}
                    checkItemsAdmin={checkItemsAdmin}
                    allCheckShowAdmin={this.props.allCheckShowAdmin}
                />
            );
        });
        return Items;
    }
    getCheckIcon() {
        const {admin,checkItems,items,checkItemsAdmin,adminItems} = this.props;
        if(admin){
            if (adminItems.length == checkItemsAdmin.length && checkItemsAdmin.length != 0) {
                return check_right;
            } else {
                return check_circle;
            }
        }
        if (items.length == checkItems.length && checkItems.length != 0) {
            return check_right;
        } else {
            return check_circle;
        }
    }
    templateSearch(){
        const {templateSearch} = this.props
        templateSearch(this.$search.current.value)
        if(this.$search.current.value.trim()){
            this.setState({
                msg:'暂无模板信息'
            })
        }else{
            this.setState({
                msg:'还没有保存模板'
            })
        }
    }
    
    handleEnter(e){
        if(e.keyCode==13){
            this.templateSearch();
        }
    }
    
    handleChange(){
        const value = (this.$search.current.value).substring(0,30);
        // this.$search.current.value = value
        setTimeout(() => {
            this.setState({
                val: value
            });
        }, 30);
    }

    clear(){
        this.$search.current.value = '';
        this.setState({
            val:''
        })
        this.$search.current.focus();
    }

    render() {
        const { checkItemsAdmin,handleAllCheckboxAdmin,handleMangerTemplateAdmin,allCheckShowAdmin,admin,adminItems,allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
        const {height} = this.state
        return (
            <div className={style.wrapper} >
                {//管理员操作
                    adminItems&&admin ? (allCheckShowAdmin ?
                        <div className={style.wrapperTop}>
                            <div className={style['check-wrap']} onClick={handleAllCheckboxAdmin} style={{paddingLeft:'10px'}}>
                                <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
                            </div>
                            <span onClick={handleAllCheckboxAdmin}>全选</span>
                            <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplateAdmin}>完成</span>
                            {
                                checkItemsAdmin.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
                                <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
                            }
                        </div> :
                        <div className={style.wrapperTop}>
                            <div className={style.templateSearch}>
                                <input placeholder="模板搜索" maxLength="30" ref={this.$search} type="text" onInput={this.handleChange} onPropertyChange={this.handleChange} onKeyUp={this.handleEnter}/>
                                {this.state.val?<img src={delIcon} id='clearTemplateSearch' alt="清空" onClick={this.clear}/>:''}
                                <div className={style.search} onClick={this.templateSearch}>搜索</div>
                            </div>
                            {
                                adminItems.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplateAdmin}>管理</span>
                            }
                    </div>) : null
                }
                {//个人
                    items&&!admin ? 
                        <div className={style.wrapperTop}>
                            <div className={style.templateSearch}>
                                <input placeholder="模板搜索" maxLength="30" ref={this.$search} type="text" onInput={this.handleChange} onPropertyChange={this.handleChange} onKeyUp={this.handleEnter}/>
                                {this.state.val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                                <div className={style.search} onClick={this.templateSearch}>搜索</div>
                            </div>
                    </div> : null
                }
                {
                    <div className={style.comAdminWrp}>
                        <div className={`${style.tempLists} ${style.tempListsP}`} ref={this.$cont} style={{display:admin?'none':'block',border:'1px solid #EAEDF1'}}>
                            {//个人
                                allCheckShow&&!admin ?<div className={`${style.wrapperTop} ${style.wrapperTopM} ${style.personalTmp}`}>
                                    <i></i>
                                    <i></i>
                                    <div className={style['check-wrap']} onClick={handleAllCheckbox}>
                                        <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
                                    </div>
                                    <span onClick={handleAllCheckbox}>全选</span>
                                    <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
                                    {
                                        checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
                                        <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
                                    }
                                </div>:null
                            }
                            {
                                !allCheckShow&&<div className={`${style.personalTmp} clearfix`}>
                                    <span className={style.tip}>个人模板</span>
                                    <i></i>
                                    {
                                        items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
                                    }
                                </div>
                            }
                            {
                                <div style={{height:height/2-42+'px',overflow:'auto'}}>
                                    {this.genItems(items).length > 0?this.genItems(items): <Empty message={this.state.msg}></Empty>}
                                </div>
                            }
                        </div>
                        <div className={style.tempLists} ref={this.$conts} style={{border:admin?'0':'1px solid #EAEDF1'}}>
                            {
                                !admin?!allCheckShowAdmin&&<div className={`${style.personalTmp}`}>标准模板</div>:''
                            }
                            {
                                <div style={{height:admin?height+'px':(height-20)/2-42+'px',overflow:'auto'}}>
                                    {this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>}
                                </div>
                            }
                        </div>
                    </div>
                }
                {/* <div className={style.tempLists} ref={this.$cont}>
                    {
                        this.genItems().length > 0?this.genItems(): <Empty message={this.state.msg}></Empty>
                    }
                    {//注释掉的暂时没有分也功能
                      hasMore?<p onClick={()=>handleClickGetMore(current)} className={style.loadMore}>点击查看更多</p>:null
                    } 
                </div> */}
            </div>
        )
    }
}

export default TemplateItems;

TemplateItems.propTypes = {
    items: PropTypes.arrayOf(PropTypes.object),
    handleContentClick: PropTypes.func,
    handleUpdate: PropTypes.func,
    handleTemplateDel: PropTypes.func,
    handleTitleChange: PropTypes.func
};