newICSS/src/components/PushContainer/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import { Tab, ConfirmModal, Notify } from '@commonComp';
import { tabChange, allChecked, changeVisible, keepPushData, allCheckedShow,allCheckedAdmin,allCheckedShowAdmin,whichTemp,floderSlide,floderAction,folderModal,clearSearchTemplateNorms,folderOrder,getDptLis } from '@store/actions/tabTemplate';
import { initItemList,initAdminItemList, delItem,delItemAdmin, delBatchItem, delBatchItemAdmin,changeTitleAsync, setPageView,changeTitleAsyncAdmin,setPageViewAdmin,getFloderList,delFloder,addTemplateQuote,newFloder,findTemplateNorms,getFloderListAll,getDepartments } from '@store/async-actions/tabTemplate';
import { connect } from "react-redux";
import store from '@store';
import { billing } from '@store/async-actions/pushMessage';
import TemplateContainer from '@components/TemplateContainer';
import TemplateItems from '@components/TemplateItems';
import PushItemsContainer from '@containers/PushItemsContainer';
import { pushAllDataList, getWindowInnerHeight, didPushParamChange } from '@utils/tools';
import CopyRightContainer from "@containers/CopyRightContainer";
import MedicalInfoContainer from '@containers/MedicalInfoContainer';
import FolderName from '@components/FolderName';
// import Search from './../Operation/Search';
import Search from './Search';
import slideDown from '@common/images/slideDown.png';
import CaseQuailty from "../CaseQuailty";
import check_circle from './img/check-circle.png';
import check_right from './img/check-right.png';
import pinyin from '@utils/Convert_Pinyin.js';
import $ from "jquery";

class PushContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      tabs: [{
        title: '辅助信息',
        disabled: true
      },
        {
          title: '病历质控',
        }, {
        title: '模板',
      },
      {
        title: '医学知识',
      }
      ],
      visible: false,
      message: '',                 //提示的内容
      type: '',                    //1:删除模板 2：批量删除   3.修改标题   4.引用  
      id: '',                      //单个删除
      obj: {},                     //修改模板标题      
      title: '',                   //修改后的标题
      okText: '确定',              //确认按钮
      okBorderColor: 'red',
      oKBg: '',
      okColor: 'red',
      num: 0,          //计数
      deptId:'',       //科室id
      value:'',//科室name
      sex:'3',
      floderName:'',   //文件夹名称
      folderListShow:false,
      folderNameVal:'',
      folderId:'',
      spell:'',
      fstName:'',
      tmpFolder:'',
      hasCalcIndex: false,
      hospitalDeptName:'',
      reset: false
    }
    this.$cont = React.createRef();
    this.itemList = null;
    this.handleActiveClick = this.handleActiveClick.bind(this)
    this.handleContentClick = this.handleContentClick.bind(this)
    this.handleTemplateDel = this.handleTemplateDel.bind(this)
    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleAllCheckbox = this.handleAllCheckbox.bind(this)
    this.handleAllCheckboxAdmin = this.handleAllCheckboxAdmin.bind(this)
    this.handleMangerTemplate = this.handleMangerTemplate.bind(this)
    this.handleMangerTemplateAdmin = this.handleMangerTemplateAdmin.bind(this)
    this.handleDelList = this.handleDelList.bind(this)
    this.makeSure = this.makeSure.bind(this)
    this.handleClose = this.handleClose.bind(this);
    this.templateSearch = this.templateSearch.bind(this);
    this.clearTemplateSearch = this.clearTemplateSearch.bind(this)
    this.whichTemp = this.whichTemp.bind(this);
    this.floderSlideToggle = this.floderSlideToggle.bind(this);
    this.floderRename = this.floderRename.bind(this);
    this.handleInputFloder = this.handleInputFloder.bind(this);
    this.setFolderId = this.setFolderId.bind(this);
    this.floderDelete = this.floderDelete.bind(this);
    this.folderManage = this.folderManage.bind(this);
    this.changeRadio = this.changeRadio.bind(this);
    this.handleChangeIpt = this.handleChangeIpt.bind(this);
    this.setDeptId = this.setDeptId.bind(this);
    this.handleClearValue = this.handleClearValue.bind(this);
    this.clearReset = this.clearReset.bind(this);
  }
  componentDidMount() {
    // const height = getWindowInnerHeight()-160;
    // this.$cont.current.style.height = height+"px";
  }

  templateSearch(name,selectTemp){
    store.dispatch(initItemList(1,name,selectTemp));
  }
  clearTemplateSearch(){
    store.dispatch(clearSearchTemplateNorms());
  }
  /**
   * 
   * @param {tab组件切换id} id
   */
  handleActiveClick(id) {
    if (id == '2') {
      document.getElementById("searchTmp").value = ""
      // let searchVal = document.getElementById("searchTmp").value
      store.dispatch(initItemList(1,0));
      store.dispatch(getFloderListAll())
      this.setState({
        reset: true
      })
      $(".floderSlideLis").eq(0).next().slideDown()
    }
    store.dispatch(tabChange(id))
  }
  clearReset() {
    this.setState({
      reset: false
    })
  }
  /**
   * 引用模板id
   * @param {模板id} id 
   */
  handleContentClick(id, sex,hasCalcIndex) {
    let baseSex = store.getState().patInfo.message.sex
    this.setState({
      message: this.content(sex, baseSex),
      type: 4,
      id: id,
      okText: '引用',
      okBorderColor: '#3B9ED0',
      okColor: '#fff',
      oKBg: '#3B9ED0',
    }, () => {
      store.dispatch(changeVisible(true))
    })
    this.setState({
      hasCalcIndex: hasCalcIndex
    })
  }
 
  content(sex, baseSex) {
    if (sex != 3 && sex != baseSex) {
      return <p className={style['center']}>确认引用该模板？<p style={{ fontSize: '12px', color: '#6b6969', marginTop: '10px' }}>引用该模版可能显示有误</p></p>
    } else {
      return <p className={style['center']}>确认引用该模板？</p>
    }
  }
  /**
   * 删除模板
   * @param {模板id} id 
   */
  handleTemplateDel(id,folderId) {
    this.setState({
      message: this.delDiv(),
      type: 1,
      folderId:folderId,
      id: id,
      okText: '删除',
      okBorderColor: 'red',
      okColor: 'red',
      oKBg: '#fff'
    }, () => {
      store.dispatch(changeVisible(true))
    })
  }
  delDiv() {
    return <p className={style['center']}>确认删除模板？</p>
  }
  onchange(value,deptId) {
    this.setState({
      title: value
    }, () => {
      this.setState({
        message: this.changeTitle(),
      })
    })
  }
  keypress(event) {
    let e = event ? event : window.event;
    if (e.keyCode == 13) {
      this.makeSure()
    }
  }
  handleInput(e) {
    let val = (e.target.value).substring(0, 20)
    this.onchange(val)
  }
  handleInputFloder(e){
    let val = (e.target.value).substring(0,20)
    this.setState({
      floderName: val
    },()=>{
      this.setState({
        message:this.changeFloderTitle()
      })
    })
  }
  handleInputFst(e){
    let val = (e.target.value).substring(0,20).replace(/[^a-zA-Z]/g,'')
    // console.log(val)
    $(e.target).val(val)
    this.setState({
      fstName: val
    }, () => {
      this.setState({
        message: this.changeTitle(),
      })
    })
  }

  spellFst(){
    let tmpFst = pinyin.getCamelChars(this.state.title);
    // console.log(tmpFst.substr(0,1).toUpperCase())
    this.setState({fstName:tmpFst.toUpperCase()})
      // this.$inp.current.vaule = tmpFst
    document.getElementById ('FstInp').value=tmpFst.toUpperCase()
    
  }
  changeTitle() {//模板名称修改
    return <div className={style['box']}>
        <div className={style['iptWrap']}>
          <div className={style.name}>
            <span className={style.leftName}>模板名称：</span>
            <input className={style['ipt']}
              placeholder="请输入模板名称"
              type="text"
              maxLength='20'
              value={this.state.title}
              onInput={(e) => {
                this.handleInput(e)
              }}
              onPropertyChange={(e) => {  // 兼容ie
                this.handleInput(e)
              }}
              onKeyPress={e => this.keypress(e)}
            />
          </div>
          <div className={`${style.name} ${style.firstname}`}>
            <span className={style.leftName}>模板名首拼：</span>
            <input className={style['ipt']}
              placeholder=""
              type="text"
              maxLength='20'
              id="FstInp"
              value={this.state.fstName}
              onFocus={() =>this.spellFst()}
              onInput={(e) => {
                this.handleInputFst(e)
              }}
              onPropertyChange={(e) => {  // 兼容ie
                this.handleInputFst(e)
              }}
              onKeyPress={e => this.keypress(e)}
            />
          </div>
        </div>
    </div>
  }
  /**
   * 改变模板标题
   * @param {模板id和模板title} obj
   */
  handleTitleChange(id, text,deptId,folderId,spell,folderName,sex,hospitalDeptName) {
    store.dispatch(changeVisible(true))
    this.props.admin&&store.dispatch(getFloderList())
    this.setState({
      type: 3,
      currId: id,
      title: text,
      text: text,
      deptId: deptId,
      fstName:spell,
      okText: '保存',
      okBorderColor: '#3B9ED0',
      okColor: '#fff',
      oKBg: '#3B9ED0',
      folderId:folderId,
      sex: sex,
      spell:spell,
      folderNameVal:folderName,
      tmpFolder:folderName,
      value:hospitalDeptName

    }, () => {
      this.setState({
        message: this.changeTitle(),
      })
    })
  }

  handleAllCheckboxAdmin() {        //全.反选
    let tmpFlg = this.props.allCheckedAdmin;
    if (this.props.checkItemsAdmin.length < this.props.folderListContentArr.length && this.props.allCheckedAdmin) {
      tmpFlg = false;
    } else if (this.props.checkItemsAdmin.length == this.props.folderListContentArr.length && !this.props.allCheckedAdmin) {
      tmpFlg = true;
    }  //两种特殊情况处理
    store.dispatch(allCheckedAdmin(!tmpFlg))
  }

  handleMangerTemplateAdmin() {      //管理
    let tmpFlg = this.props.allCheckShowAdmin;
    store.dispatch(allCheckedAdmin(false))
    store.dispatch(allCheckedShowAdmin(!tmpFlg))
  }

  handleAllCheckbox() {        //全.反选
    let tmpFlg = this.props.allChecked;
    if (this.props.checkItems.length < this.props.items.length && this.props.allChecked) {
      tmpFlg = false;
    } else if (this.props.checkItems.length == this.props.items.length && !this.props.allChecked) {
      tmpFlg = true;
    }  //两种特殊情况处理
    store.dispatch(allChecked(!tmpFlg))
  }

  handleMangerTemplate() {      //管理
    let tmpFlg = this.props.allCheckShow;
    store.dispatch(allChecked(false))
    store.dispatch(allCheckedShow(!tmpFlg))
  }
  handleDelList() {          //批量删除
    this.setState({
      type: 2,
      message: this.delDiv(),
      okText: '删除',
      okBorderColor: 'red',
      okColor: 'red',
      oKBg: '#fff'
    })
    store.dispatch(changeVisible(true))
  }
  handleClickGetMore(page){
    let tmpPage = ++page
    store.dispatch(initItemList(tmpPage,true))
  }
  floderRename(name,id){//文件夹重命名
    this.setState({
      type: 5,
      title: '重命名文件夹',
      okText: '保存',
      floderName:name,
      folderId:id,
      okBorderColor: '#3B9ED0',
      okColor: '#fff',
      oKBg: '#3B9ED0',
    },()=>{
      this.setState({
        message:this.changeFloderTitle()
      })
    })
    store.dispatch(changeVisible(true))
  }
  changeFloderTitle() {
    return <div className={style['box']}>
      <div className={style['iptWrap']}>
        <div className={style.name}>
          <span className={style.leftName}>名称：</span>
          <input
            placeholder="请输入文件夹名称"
            type="text"
            maxLength='20'
            value={this.state.floderName}
            onInput={(e) => {
              this.handleInputFloder(e)
            }}
            onPropertyChange={(e) => {  // 兼容ie
              this.handleInputFloder(e)
            }}
            onKeyPress={e => this.keypress(e)}
          />
        </div>
      </div>
    </div>
  }
  floderDelete(folderId){//文件夹删除
    this.setState({
      message: <p className={style['center']}>确认删除文件夹？</p>,
      type: 6,
      folderId:folderId,
      okText: '删除',
      okBorderColor: 'red',
      okColor: 'red',
      oKBg: '#fff'
    }, () => {
      store.dispatch(changeVisible(true))
    })
    // store.dispatch(delFloder(id))
    
  }
  changeRadio(sex){
    if(sex == 1){
      $('#commonSex img').attr('src',check_right)
      $('#maleSex img').attr('src',check_circle)
      $('#femaleSex img').attr('src',check_circle)
      $('#commonSex i').css('color','#000')
      $('#maleSex i').css('color','#6b6969')
      $('#femaleSex i').css('color','#6b6969')
      this.setState({sex:'3'})
    }else if(sex == 2){
      $('#commonSex img').attr('src',check_circle)
      $('#maleSex img').attr('src',check_right)
      $('#femaleSex img').attr('src',check_circle)
      $('#commonSex i').css('color','#6b6969')
      $('#maleSex i').css('color','#000')
      $('#femaleSex i').css('color','#6b6969')
      this.setState({sex:'1'})
    }else if(sex == 3){
      $('#commonSex img').attr('src',check_circle)
      $('#maleSex img').attr('src',check_circle)
      $('#femaleSex img').attr('src',check_right)
      $('#commonSex i').css('color','#6b6969')
      $('#maleSex i').css('color','#6b6969')
      $('#femaleSex i').css('color','#000')
      this.setState({sex:'2'})
    }
  }

  makeSure() {
    const {type,id,title,tmpFolder,folderNameVal,text,fstName,spell,currId,deptId,folderId,floderName,sex,hospitalDeptName} = this.state
    if (type == 1) {
      if(this.props.admin){
        store.dispatch(delItemAdmin(id,folderId))
      }else{
        store.dispatch(delItem(id))
      }
      store.dispatch(changeVisible(false))
    } else if (type == 2) {
      if(this.props.admin){
        store.dispatch(delBatchItemAdmin(this.props.checkItemsAdmin))
      }else{
        store.dispatch(delBatchItem(this.props.checkItems))
      }
      store.dispatch(changeVisible(false))
    } else if (type == 3) {
      // if (title == text &&tmpFolder==folderNameVal&&fstName==spell&&deptId) {
      //   store.dispatch(changeVisible(false))
      //   Notify.success('标题修改成功');
      //   return;
      // }
      if (title.trim() == '') {
        Notify.info('请输入模板名称');
        return;
      }
      let tempObj = {
        id: currId,
        title: title,
        deptId:deptId,
        folderId:folderId,
        folderName:folderNameVal,
        spell:fstName,
        sex: sex,
        hospitalDeptName:hospitalDeptName
      }
      if(this.props.admin){
        store.dispatch(changeTitleAsyncAdmin(tempObj))
      }else{
        store.dispatch(changeTitleAsync(tempObj))
      }
    } else if (type == 4) {        //模板引入
      if(this.props.admin){
        store.dispatch(setPageViewAdmin(id))
      }else{
        store.dispatch(setPageView(id))
        const hasCalcIndex = this.state.hasCalcIndex
        if(hasCalcIndex) {
          store.dispatch(addTemplateQuote(id))
        }
        this.setState({
          hasCalcIndex: false
        })
      }
      store.dispatch(changeVisible(false))
    } else if(type == 6) { //删除文件夹
      if(this.props.admin){
        store.dispatch(delFloder(folderId))
        store.dispatch(changeVisible(false))
      }else{
        // store.dispatch(delFloder(folderId))
        // store.dispatch(delBatchItem(this.props.checkItems))
      }
    } else if(type == 5) {
      if(this.props.admin){
        store.dispatch(newFloder(floderName,folderId,'modify'))
        // store.dispatch(changeVisible(false))
      }else{
      }
    }
  }
  handleClose() {
    store.dispatch(changeVisible(false));
    this.setState({
      hasCalcIndex: false,
      folderListShow: false
    })
  }
  whichTemp(tab,name,hasSearch){
    if(tab!=2||!name){
      if(tab == 1 && name&&hasSearch) {
        this.templateSearch(name,1)
      } else {
        store.dispatch(initAdminItemList(1,true))
      }
      
    }else{
      this.templateSearch(name,2)
    }
    store.dispatch(whichTemp(tab))
  }
  floderSlideToggle(id){
    store.dispatch(floderSlide(id))
  }
  floderActionDo(id){
    store.dispatch(floderAction(id))
  }
  handleFolderShow(){
    const {folderListShow} = this.state
    this.setState({
      folderListShow:!folderListShow
    })
  }
  setFolderId(id,name){//文件夹
    this.setState({
      folderId :id,
      folderNameVal:name,
      folderListShow:false
    })
  }
  newFolder(flg){
    store.dispatch(folderModal(flg))
  }
  folderManage(flg) {
    store.dispatch(folderOrder(flg))
  }
  handleChangeValue(val)  {
    val && store.dispatch(getDepartments(val))
  }
  handleChangeIpt(val){//搜索科室
    if(val == ''){
      this.setState({
        deptId:'',
      })
      return
    }
    this.setState({
      value:val
    })
  }
  setDeptId(id,name){
    this.handleClearValue()
    this.setState({
      deptId :id,
      value:name
    })
  }
  handleClearValue () {
    store.dispatch(getDptLis([]))
  }
  render() {
    const { activeId, checkItems,selectTemp,folderListContentArr, visible, showMsg,hasMore,current,floderListAdmin, items, allCheckShow,allCheckShowAdmin,adminItems,admin,checkItemsAdmin,clearSearch, templateNormsSearchList, departLis} = this.props;
    const { type,okBorderColor,okColor,oKBg,okText,message,folderListShow,value,reset } = this.state
    const { handleChangeValue, handleChangeIpt} = this
    return <div className={style["container"]} ref={this.$cont} >
      <Tab tabs={this.state.tabs}
        activeId={activeId}
        handleActiveClick={this.handleActiveClick}
      >
        <TemplateContainer activeId={activeId}>
          <PushItemsContainer></PushItemsContainer>
          <CaseQuailty></CaseQuailty>
          <TemplateItems
            items={items}
            clearSearch={clearSearch}
            adminItems={adminItems}
            admin={admin}
            handleAllCheckboxAdmin={this.handleAllCheckboxAdmin}
            handleMangerTemplateAdmin={this.handleMangerTemplateAdmin}
            current={current}
            hasMore={hasMore}
            checkItems={checkItems}
            checkItemsAdmin={checkItemsAdmin}
            allCheckShow={allCheckShow}
            allCheckShowAdmin={allCheckShowAdmin}
            handleContentClick={this.handleContentClick}
            handleTemplateDel={this.handleTemplateDel}
            handleTitleChange={this.handleTitleChange}
            handleDelList={this.handleDelList}
            handleMangerTemplate={this.handleMangerTemplate}
            handleAllCheckbox={this.handleAllCheckbox}
            handleClickGetMore={this.handleClickGetMore}
            templateSearch={this.templateSearch}
            whichTemp={this.whichTemp}
            selectTemp={selectTemp}
            floderSlide={this.floderSlideToggle}
            floderAction={this.floderActionDo}
            floderDelete={this.floderDelete}
            floderRename={this.floderRename}
            folderListContentArr={folderListContentArr}
            templateNormsSearchList={templateNormsSearchList}
            clearTemplateSearch={this.clearTemplateSearch}
            reset = {reset}
            clearReset = {this.clearReset}
          ></TemplateItems>
          <MedicalInfoContainer></MedicalInfoContainer>
        </TemplateContainer>
      </Tab>
      <ConfirmModal
        visible={visible}
        confirm={this.makeSure}
        close={this.handleClose}
        title={type==5?'重命名文件夹':type==3?'修改模板':null}
        cancel={this.handleClose}
        okText={okText}
        width={type==5 ? 500: type==3?580:300}
        height={type==3&&admin?280:200}
        okBorderColor={okBorderColor}
        okColor={okColor}
        oKBg={oKBg}
        borderBtm={type==5||type==3?'1px solid #ccc':null}
      >
        {message}
        {
          admin&&type==3?<div>
            <div  className={style.iptWrap}>
              <div className={style.male}>
                <span className={style.leftName}>性别归属：</span>
                <span className={style['commonSex']} id="commonSex" onClick={this.changeRadio.bind(this,1)}><img src={check_right} alt=""/><i style={{color:'#000'}}>通用</i></span>
                <span id="maleSex" onClick={this.changeRadio.bind(this,2)}><img src={check_circle} alt=""/><i>男</i></span>
                <span id="femaleSex" onClick={this.changeRadio.bind(this,3)}><img src={check_circle} alt=""/><i>女</i></span>
                <span style={{paddingRight:0,color:'#777777'}}>(注：错误引用，显示可能有误)</span>
              </div>
            </div>
            <div className={style.department}>
              <span className={style.leftName}>科室归属：</span>
                <Search handleChangeValue={handleChangeValue} handleChangeIpt={handleChangeIpt} value={value} visible={true} zIndex={11}>
                {
                  departLis.length>0&&value&&<ul className={style.departLis}>
                    {
                      departLis.map((item,idx)=>{
                        return <li onClick={()=>this.setDeptId(item.id,item.conceptDeptName)}>
                          {item.conceptDeptName}
                        </li>
                      })
                    }
                  </ul>
                }
                </Search>
              <span style={{paddingRight:0,color:'#777777'}}>(支持汉字关键字搜索)</span>
          </div>


            <div className={style.department}>
              <span className={style.leftName}>存储为：</span>
                <div  className={style.selectFolder} onClick={(e) => {
                      this.handleFolderShow(e)
                    }}>
                  <input className={style.selectFolderIpt}
                    type="text"
                    maxLength='20'
                    readOnly
                    value={this.state.folderNameVal}
                    
                  />
                  <img src={slideDown} alt=""/>
                {
                  floderListAdmin.length>0&&folderListShow&&<ul className={`${style.departLis} ${style.departLisFolder}`}>
                    {
                      floderListAdmin.map((item,idx)=>{
                        return <li onClick={()=>this.setFolderId(item.id,item.name)}>
                          {item.name}
                        </li>
                      })
                    }
                  </ul>
                }
                </div>

                <span className={style.newFolder} onClick={()=>this.newFolder(true)}>新建文件夹</span>
                <span className={style.mangerFolder} onClick={()=>this.folderManage(true)}>管理文件夹</span>  
            </div>
          </div>:null
        }
      </ConfirmModal>
      <CopyRightContainer />
    </div>
  }
}

const mapStateToProps = (state) => {//console.log(state)
  return {
    items: state.tabTemplate.items,
    adminItems: state.tabTemplate.adminItems,
    admin: state.homePage.admin,
    current: state.tabTemplate.current,
    hasMore: state.tabTemplate.hasMore,
    activeId: state.tabTemplate.activeId,
    checkItems: state.tabTemplate.checkItems,
    allChecked: state.tabTemplate.allChecked,
    visible: state.tabTemplate.visible,
    showMsg: state.tabTemplate.showMsg,
    allCheckShow: state.tabTemplate.allCheckShow,

    allCheckedAdmin: state.tabTemplate.allCheckedAdmin,
    allCheckShowAdmin: state.tabTemplate.allCheckShowAdmin,
    checkItemsAdmin: state.tabTemplate.checkItemsAdmin,
    clearSearch:state.print.clearSearch,
    departLis: state.tabTemplate.departLis,
    selectTemp:state.tabTemplate.selectTemp,
    floderListAdmin:state.tabTemplate.floderListAdmin,
    folderListContentArr:state.tabTemplate.folderListContentArr,
    templateNormsSearchList: state.tabTemplate.templateNormsSearchList
  }
}

export default connect(mapStateToProps, null)(PushContainer);