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:''
        }
        this.$cont = 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.$cont.current.style.height = height+"px";
        windowEventHandler('resize', ()=>{
            if(this.$cont.current){
                const height = getWindowInnerHeight()-195;
                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)
        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);
        // if (value === '') {
        //     this.setState({
        //         val: ''
        //     });
        // }
    }

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

    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 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>
                            {
                                items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
                            }
                    </div>) : <div style={{height:'36px'}}></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
};