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 Notify from '@commonComp/Notify';
import store from '@store'
import {checkItems} from '@store/actions/tabTemplate';
import $ from 'jquery';

class TemplateItem extends React.Component {
    constructor() {
        super();
        this.content = null;
        this.isAnimate = false;
        this.state = {
            isOpen: false,
            delHover: false,
            editHover: false,
            checkBox:false,
            bgColor:false
        };
        this.titleDOM = null;
        this.isConfirmClick = false;
        this.timer = null;
    }
    genContent() {
        const {preview} = this.props;
        this.title = '';
        let DesItems = [];
        for(var a in previewJson){
            DesItems.push(<DesItem preview={preview} des={a} />);            
        }
        // if(previewJson){
        //     console.log(previewJson,1000)
        //     previewJson.forEach((v, i) => {
        //         DesItems.push(<DesItem des={v} key={i} />);
        //         this.title += `${v}\n`;
        //     });
        // }
        return DesItems;
    }

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

    getContentStyle() {
        return {
            display: this.state.isOpen ? 'block' : 'none'
        }
    }

    handleContentClick(e,sex) {
        e.stopPropagation();
        let baseSex = store.getState().patInfo.message.sex
        if(sex != 3 && sex != baseSex){
          Notify.info('引用该模版可能显示有误');
        }
        this.props.handleContentClick(this.props.id);
    }

    handleTitleClick() {
        if (this.isAnimate) {
            return;
        }
        this.isAnimate = true;
        if (this.state.isOpen) {
            $(this.content).slideUp(() => {
                this.isAnimate = false;
                this.setState({
                    isOpen: false
                });
            });
            // console.log($(this.content).parent().siblings().find('.content'))
            return;
        }
        $(this.content).slideDown(() => {
            this.isAnimate = false;
            this.setState({
                isOpen: true
            });
        });
    }
    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;
    }

    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}
                    style={this.getContentStyle()}
                >
                    {
                        previewJson?<DesItem preview={previewJson}></DesItem>:<p>暂无数据</p>
                    }
                    
                </div>
            </div>
        )
    }

    componentDidUpdate() {
        this.isAnimate = false;
    }

    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
};