/*
 * Creater:     柿子
 * CreateDate:  2022/12/19
 * Describe：   病历查找替换
 * */
import React, { Component } from 'react';
import { Input, Icon, Button, message } from 'antd';
import { Util } from 'tools';
import '../style/index.less';

class EMRFindReplace extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      translateX: -12,
      translateY: 56,
      currentMove: 0,
      findData: [], // 查询数据
      replaceData: []
    };

    this.moving = false;
    this.lastX = null;
    this.lastY = null;
    window.onmouseup = e => this.handleMouseUp(e);
    window.onmousemove = e => this.handleMouseMove(e);
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态
  modifyVisible = (visible) => {
    this.setState({ visible });
  }

  handleMouseDown = (e) => {
    React.$stopPropagation(e);
    this.moving = true;
  }

  handleMouseUp = () => {
    this.moving = false;
    this.lastX = null;
    this.lastY = null;
  }

  handleMouseMove = (e) => {
    this.moving && this.handleMove(e);
  }

  handleMove = (e) => {
    if (this.lastX && this.lastY) {
      let dx = e.clientX - this.lastX;
      let dy = e.clientY - this.lastY;
      console.log("dx", dx, dx)
      this.setState({ translateX: this.state.translateX + dx, translateY: this.state.translateY + dy })
    }
    this.lastX = e.clientX;
    this.lastY = e.clientY;
  }

  // 查找
  handleFind = () => {
    const { findVal } = this.state;
    let findData = this.props.handleSearchText && this.props.handleSearchText(findVal);
    findData[0] && findData[0].select();
    this.setState({ findData, currentMove: 0, findFlag: 'Y' });
  }

  // 替换
  handleReplace = () => {
    const { findVal, replaceVal } = this.state;
    let findData = this.props.handleSearchText && this.props.handleSearchText(findVal);
    this.setState({ findData, findFlag: 'Y' }, () => {
      let result = this.props.handleReplaceText && this.props.handleReplaceText(findVal, replaceVal);
      if (result && result.length > 0) {
        message.success('内容替换成功');
        this.setState({ replaceData: result });
      } else {
        message.info('暂没有需要替换的内容');
      }
    });
  }

  // 查找
  handlePrevAndNextMove = (type) => {
    let { findVal, currentFindVal, findData, currentMove } = this.state;
    let currentFindData = findData;
    let moveCount = type === 'prev' ? currentMove - 1 : currentMove + 1;
    if (findVal !== currentFindVal) {
      let findData = this.props.handleSearchText && this.props.handleSearchText(findVal);
      currentFindData = findData;
      moveCount = 0;
      this.setState({ currentFindVal: findVal, findData, findFlag: 'Y' });
    }
    if (currentFindData && currentFindData.length > 0 && ((type === 'prev' && moveCount > -1) || (type === 'next' && moveCount < currentFindData.length))) {
      this.setState({ currentMove: moveCount });
      currentFindData[moveCount] && currentFindData[moveCount].select();
    }
  }

  render() {
    const { visible, translateX, translateY, findVal, replaceVal, findData, currentMove, findFlag, replaceData } = this.state;
    return (
      <div
        onMouseDown={this.handleMouseDown}
        className="emr-find-replace"
        style={{ display: visible ? 'block' : 'none', top: translateY + 'px', right: (-translateX) + 'px' }}
      >
        <div className="emr-find-replace-header">
          <span className="emr-find-replace-cancel" onClick={() => this.modifyVisible(false)}>
            <Icon type="close" />
          </span>
        </div>
        <div>
          <p>
            查找内容：
            <span style={{ color: '#f7a34f', fontSize: '14px', fontWeight: 'normal' }}>
              {findData && findData.length > 0 ? ('共找到：' + findData.length + '处，当前在第' + (currentMove + 1) + '处') : (findFlag === 'Y' ? '未查询到数据' : '')}
            </span>
            <Input
              placeholder="输入关键字回车查询"
              style={{ width: '100%', marginTop: '6px' }}
              value={findVal}
              onChange={Util.commonInputChange.bind(this, 'findVal')}
              onPressEnter={this.handleFind}
            />
          </p>
          <p style={{ marginTop: '24px', marginBottom: '32px' }}>
            替换为：
            <span style={{ color: '#f7a34f', fontSize: '14px', fontWeight: 'normal' }}>
              {replaceData && replaceData.length > 0 ? ('替换了：' + replaceData.length + '处') : ''}
            </span>
            <Input placeholder="替换内容" style={{ width: '100%', marginTop: '6px' }} value={replaceVal} onChange={Util.commonInputChange.bind(this, 'replaceVal')} />
          </p>
          <div style={{ textAlign: 'right' }}>
            <Button onClick={this.handleFind}>查找</Button>
            <Button disabled={!(findVal && replaceVal)} style={{ margin: '0 16px' }} onClick={this.handleReplace}>替换</Button>
            <Button disabled={!(currentMove > 0)} onClick={() => this.handlePrevAndNextMove('prev')}>查找上一处</Button>
            <Button disabled={!(findData && findData.length > 0 ? currentMove < findData.length - 1 : findVal)} style={{ margin: '0 16px' }} onClick={() => this.handlePrevAndNextMove('next')}>查找下一处</Button>
            <Button onClick={() => this.modifyVisible(false)}>取消</Button>
          </div>
        </div>
      </div>
    )
  }
}

export default EMRFindReplace;