newICSS/src/components/TemplateItems/TemplateItem/index.jsx

import PropTypes from "prop-types";
import React from "react";
import style from "./index.less";
import DesItem from './DesItem';
import arrow_icon from './img/arrow.png';
import arrow_down_icon from './img/arrow-down.png';
import del_icon from './img/delete.png';
import del_hover_icon from './img/delete_blue.png';
import edit_icon from './img/edit_grey.png';
import editing_icon from './img/edit_blue.png';
import check_circle from './img/check-circle.png';
import check_right from './img/check-right.png';
import store from '@store'
import {checkItems} from '@store/actions/tabTemplate';
import $ from 'jquery';

class TemplateItem extends React.Component {
    constructor() {
        super();
        this.content = null;
        this.state = {
            isOpen: false,
            delHover: false,
            editHover: false,
            checkBox:false,
            bgColor:false,
        };
        this.titleDOM = null;
        this.isConfirmClick = false;
        this.timer = null;
        this.handleTitleClick = this.handleTitleClick.bind(this)
    }

    getArrow() {
        return this.state.isOpen ? arrow_down_icon : arrow_icon;
    }

    handleContentClick(e,sex) {
        e.stopPropagation();
        this.props.handleContentClick(this.props.id,sex);
    }

    handleCheckboxClick(e,id){          //点击复选框
        e.stopPropagation();
        let tempCheck = this.state.checkBox;
        this.setState({
            checkBox:!tempCheck
        })
        store.dispatch(checkItems(id))
    }

    getCheckIcon() {
        let tempCheckItems = this.props.checkItems;
        if(tempCheckItems.indexOf(this.props.id) != -1){
            return [check_right,'title-wrapper-bg']
        }else{
            return [check_circle,'']
        }
    }
    getBgcColor() {
        let tempCheckItems = this.props.checkItems;
        if(tempCheckItems.indexOf(this.props.id) != -1){
            return 'title-wrapper-bg'
        }else{
            return ''
        }
    }
    getDelIcon() {
        return this.state.delHover ? del_hover_icon : del_icon;
    }

    handleDelIconMouseEnter() {
        this.setState({
            delHover: true
        });
    }

    handleDelIconMouseLeave() {
        this.setState({
            delHover: false
        });
    }

    handleTemplateDel(e) {
        e.stopPropagation();
        this.props.handleTemplateDel(this.props.id);
    }

    getEditIcon() {
        return this.state.editHover ? editing_icon : edit_icon;
    }

    handleEditIconMouseEnter() {
        this.setState({
            editHover: true
        });
    }

    handleEditIconMouseLeave() {
        this.setState({
            editHover: false
        });
    }

    handleEditIconClick(e,name) {
        e.stopPropagation();
        let currId = this.props.id
        this.props.handleTitleChange(currId,name);
    }

    recoverTitle() {
        this.titleDOM.innerHTML = this.props.title;
    }

    handleTitleClick(e) {
      $(e.target).next().slideToggle() 
      let tmpDomLis = $(e.target).parent().siblings()
      for(let i = 0;i < tmpDomLis.length;i++){
        let tmpDiv = tmpDomLis[i]
        $(tmpDiv).children().eq(1).slideUp()
      }
    }

    render() {
        const { allCheckShow,id,name,preview,sex } = this.props;
        let previewJson = JSON.parse(preview);
        let sexStr = sex==2?' (女)':sex==1?' (男)':' (通用)';
        return (
            <div className={style.wrapper}>
                <div className={ 
                    allCheckShow?
                    `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`:
                    `${style["title-wrapper"]} ${style["clearfix"]}`} 
                    onClick={this.handleTitleClick}
                >
                    {
                        allCheckShow?<div className={style['check-wrap']} onClick={(e)=>{this.handleCheckboxClick(e,id)}}>
                            <img className={`${style['fl-element']} ${style['check-box']}`} 
                            src={this.getCheckIcon()[0]}
                        /></div>:null
                    }
                    <span
                        ref={(title) => this.titleDOM = title}
                        className={style['title']}
                        title={name+sexStr}
                    >
                        {name+sexStr}
                    </span>
                    <img className={style.arrow} src={this.getArrow()} />
                    <img title={'删除模板'} 
                        className={style.del} 
                        style={{display:allCheckShow?'none':'block'}}
                        src={this.getDelIcon()} 
                        onMouseEnter={() => this.handleDelIconMouseEnter()}
                        onMouseLeave={() => this.handleDelIconMouseLeave()}
                        onClick={(e) => this.handleTemplateDel(e)} 
                    />
                    <span className={style.quote} onClick={(e) => this.handleContentClick(e,sex)}>引用</span>
                    <img title={'修改模板标题'}
                        className={style.edit}
                        src={this.getEditIcon()}
                        onMouseEnter={() => this.handleEditIconMouseEnter()}
                        onMouseLeave={() => this.handleEditIconMouseLeave()}
                        onClick={(e) => this.handleEditIconClick(e,name)}
                    />
                </div>
                <div
                    ref={(content) => this.content = content}
                    className={style.content}
                    title={this.title}
                >
                    {
                        previewJson?<DesItem preview={previewJson}></DesItem>:<p>暂无数据</p>
                    }
                    
                </div>
            </div>
        )
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }
}

export default TemplateItem;
TemplateItem.propTypes = {
    id: PropTypes.string,
    title: PropTypes.string,
    content: PropTypes.arrayOf(PropTypes.string),
    handleContentClick: PropTypes.func,
    handleTemplateDel: PropTypes.func,
    handleTitleChange: PropTypes.func
};