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,checkItemsAdmin } from '@store/actions/tabTemplate';
import $ from 'jquery';

class TemplateItem extends React.Component {
  constructor() {
    super();
    this.content = null;
    this.state = {
      delHover: false,
      editHover: false,
      checkBox: false,
      bgColor: false,
    };
    this.isConfirmClick = false;
    this.handleTitleClick = this.handleTitleClick.bind(this)
    this.getStyleFst = this.getStyleFst.bind(this)
    this.getStyleSec = this.getStyleSec.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;
    let sign = this.props.admin;
    // this.setState({
    //   checkBox: !tempCheck
    // })
    if(sign){
      store.dispatch(checkItemsAdmin(id))
    }else{
      store.dispatch(checkItems(id))
    }
  }

  getCheckIcon() {
    const {checkItemsAdmin,checkItems,admin,adminflg,id} = this.props
    if(admin||adminflg){
      if (checkItemsAdmin.indexOf(id) != -1) {
        return [check_right, 'title-wrapper-bg']
      } else {
        return [check_circle, '']
      }
    }
    if (checkItems.indexOf(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,deptId) {
    e.stopPropagation();
    let currId = this.props.id
    this.props.handleTitleChange(currId, name,deptId);
  }

  handleTitleClick(e) {
    if (e.target.tagName == 'I') {
      let tmpDomLis = $(e.target).parent().parent().siblings()
      $(e.target).parent().next().slideToggle()
      if ($(e.target).parent().next().height() == 0) {
        $(e.target).next().attr('src', arrow_down_icon)
      } else {
        $(e.target).next().attr('src', arrow_icon)
      }
      for (let i = 0; i < tmpDomLis.length; i++) {
        let tmpDiv = tmpDomLis[i]
        $(tmpDiv).children().eq(1).slideUp()
        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
      }
    } else if ($(e.target).attr('src')) {
      let tmpDomLis = $(e.target).parent().parent().siblings()
      $(e.target).parent().next().slideToggle()
      if ($(e.target).parent().next().height() == 0) {
        $(e.target).attr('src', arrow_down_icon)
      } else {
        $(e.target).attr('src', arrow_icon)
      }
      for (let i = 0; i < tmpDomLis.length; i++) {
        let tmpDiv = tmpDomLis[i]
        $(tmpDiv).children().eq(1).slideUp()
        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
      }
    } else {
      let tmpDomLis = $(e.target).parent().siblings()
      $(e.target).next().slideToggle()
      if ($(e.target).next().height() == 0) {
        $(e.target).children('img').eq(0).attr('src', arrow_down_icon)
      } else {
        $(e.target).children('img').eq(0).attr('src', arrow_icon)
      }
      for (let i = 0; i < tmpDomLis.length; i++) {
        let tmpDiv = tmpDomLis[i]
        $(tmpDiv).children().eq(1).slideUp()
        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
      }
    }
  }
  getStyleFst() {
    const { allCheckShow, id, name, preview, sex,admin,checkItemsAdmin,allCheckShowAdmin,adminflg } = this.props;
    if(admin) {
      if(allCheckShowAdmin){
        return `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`
      }
      return `${style["title-wrapper"]} ${style["clearfix"]}`
    }else{
      if(adminflg){
        if(allCheckShowAdmin){
          return `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`
        }
        return `${style["title-wrapper"]} ${style["clearfix"]}`
      }
      if(allCheckShow){
        return `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`
      }
      return `${style["title-wrapper"]} ${style["clearfix"]}`
    }
  }
  getStyleSec(){
    const { allCheckShow, id, name, preview, sex,admin,checkItemsAdmin,allCheckShowAdmin,adminflg } = this.props;
    if(admin) {
      if(allCheckShowAdmin){
        return <div className={style['check-wrap']} onClick={(e) => { this.handleCheckboxClick(e, id) }}>
        <img className={`${style['fl-element']} ${style['check-box']}`}
          src={this.getCheckIcon()[0]}
        /></div>
      }
      return null
    }else{
      if(adminflg){
        if(allCheckShowAdmin){
          return <div className={style['check-wrap']} onClick={(e) => { this.handleCheckboxClick(e, id) }}>
          <img className={`${style['fl-element']} ${style['check-box']}`}
            src={this.getCheckIcon()[0]}
          /></div>
        }
        return null
      }
      if(allCheckShow){
        return <div className={style['check-wrap']} onClick={(e) => { this.handleCheckboxClick(e, id) }}>
        <img className={`${style['fl-element']} ${style['check-box']}`}
          src={this.getCheckIcon()[0]}
        /></div>
      }
      return null
    }
  }
  render() {
    const { allCheckShow, id, name,hospitalDeptId, preview,conceptDeptName, sex,admin,checkItemsAdmin,allCheckShowAdmin,adminflg } = this.props;
    let previewJson = JSON.parse(preview);
    let sexStr = sex == 2 ? ' (女'+(conceptDeptName&&'-'+conceptDeptName)+')' : sex == 1 ? ' (男'+(conceptDeptName&&'-'+conceptDeptName)+')' : ' (通用'+(conceptDeptName&&'-'+conceptDeptName)+')';
    return (
      <div className={style.wrapper}>
        <div className={this.getStyleFst()}
          onClick={this.handleTitleClick}
        >
          {
            this.getStyleSec()
          }
          <i
            className={style['title']}
            title={name + sexStr}
          >
            {name + sexStr}
          </i>
          <img className={style.arrow} src={arrow_icon} />
          {!admin&&adminflg?null:<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>
          {!admin&&adminflg?null:<img title={'修改模板标题'}
            className={style.edit}
            src={this.getEditIcon()}
            onMouseEnter={() => this.handleEditIconMouseEnter()}
            onMouseLeave={() => this.handleEditIconMouseLeave()}
            onClick={(e) => this.handleEditIconClick(e, name,hospitalDeptId)}
          />}
        </div>
        <div
          ref={(content) => this.content = content}
          className={style.content}
          title={this.title}
        >
          {
            previewJson ? <DesItem preview={previewJson}></DesItem> : <p>暂无数据</p>
          }
        </div>
      </div>
    )
  }
}

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