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 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.$cont = React.createRef();
        this.$search = React.createRef();
        this.genItems = this.genItems.bind(this);
        this.templateSearch = this.templateSearch.bind(this);
    }  
    componentDidMount(){
        const height = getWindowInnerHeight()-226;
        this.$cont.current.style.height = height+"px";
        windowEventHandler('resize', ()=>{
            if(this.$cont.current){
                const height = getWindowInnerHeight()-226;
                this.$cont.current.style.height = height+"px";
            }
        });
    }
    genItems() {
        const Items = [];
        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}
                />
            );
        });
        return Items;
    }
    getCheckIcon() {
        if (this.props.items.length == this.props.checkItems.length && this.props.checkItems.length != 0) {
            return check_right;
        } else {
            return check_circle;
        }
    }
    templateSearch(){
        const {templateSearch} = this.props
        templateSearch(this.$search.current.value)
    }
    render() {
        const { allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
        // console.log(allCheckShow,7877877)
        return (
            <div className={style.wrapper}>
                {
                    items ? (allCheckShow ?
                        <div className={style.wrapperTop}>
                            <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> :
                        <div className={style.wrapperTop}>
                            <div className={style.templateSearch}>
                                <input ref={this.$search} type="text" />
                                <div className={style.search} onClick={this.templateSearch}>检索</div>
                            </div>
                            {
                                items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
                            }
                    </div>) : <div style={{height:'36px'}}></div>
                    // <div className={style.emptyWrap}>
                    //     <div className={`${style.templateSearch}`}>
                    //         <input ref={this.$search} type="text" />
                    //         <div className={style.search} onClick={this.templateSearch}>检索</div>
                            
                    //     </div>
                    //     <span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
                    // </div>
                }
                <div className={style.tempLists} ref={this.$cont}>
                    {
                        this.genItems().length > 0?this.genItems(): <Empty message={'还没有保存模板'}></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
};