// 头部
import React from 'react';
import { Icon } from 'antd-mobile';
import './style/index.less';
import store from "store";
import { Util } from 'tools';

import HospAndPatModal from './HospAndPatModal.jsx';

import headHosp from 'assets/images/head-hosp.png';
import headPat from 'assets/images/head-pat.png';

export default class Header extends React.Component {
  constructor() {
    super();
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    this.state = {
      userData,
      admData: userData, // 选中的就诊数据
      hospModalVisible: false,
    }

    this.handleSubscribe = Util.debounce(this.handleSubscribe, 300);
    store.subscribe(this.handleSubscribe)
  }

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

  handleSubscribe = () => {
    // console.log("触发了handleSubscribe")
    const isReRenderHead = store.getState().appointRegRedux && store.getState().appointRegRedux.isReRenderHead ? store.getState().appointRegRedux.isReRenderHead : false;
    const isAddAdm = store.getState().appointRegRedux && store.getState().appointRegRedux.isAddAdm ? store.getState().appointRegRedux.isAddAdm : false;
    // console.log("触发了handleSubscribe", "isReRenderHead", isReRenderHead, "isAddAdm", isAddAdm)
    if (isReRenderHead) {
      this.handleReRenderAdmData();
    }
    if (isAddAdm) {
      this.hospAndPatRef.getAdmSelectData();
    }

  }

  getHospSelectData = () => {
    this.hospAndPatRef.getHospSelectData();
  }

  handleRef = (ref) => {
    this.hospAndPatRef = ref
  }

  // 更新就诊人
  handleReRenderAdmData = () => {
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    // console.log("更新就诊人", userData)
    this.setState({ admData: userData }, () => {
      // 当切换医院后刷新当前界面
      store.dispatch({
        type: "isReRenderHead",
        value: false
      });
    })
  }

  // 打开选择医院弹窗
  showHospSelectModal = () => {
    if (this.hospAndPatRef && this.hospAndPatRef.handleShowModal) {
      this.modifyModalVisible("hospModalVisible", true);
      this.hospAndPatRef.handleShowModal();
    }
  }

  // 根据弹窗状态修改箭头方向
  modifyModalVisible = (type, val) => {
    this.setState({ [type]: val });
  }

  // 打开就诊人选择窗口
  showAdmSelectModal = () => {
    const isSelectPatient = store.getState().appointRegRedux && store.getState().appointRegRedux.isSelectPatient ? store.getState().appointRegRedux.isSelectPatient : "yes";
    // console.log(isSelectPatient)
    if (this.hospAndPatRef && this.hospAndPatRef.handleShowAdmModal && isSelectPatient !== "no") {
      this.modifyModalVisible("admModalVisible", true);
      this.hospAndPatRef.handleShowAdmModal();
    }
  }

  render() {
    let { userData, admData, hospModalVisible, admModalVisible } = this.state;
    return (
      <div className="component-header">
        <h1 className="header border-bottom-after">
          <span onClick={this.showHospSelectModal}>
            <img src={headHosp} alt="" />
            {userData.hospDesc || ""}
            <Icon type="right" className={hospModalVisible ? "right-rotate-90" : "right-rotate-0"} />
          </span>
          <span className="header-right" onClick={this.showAdmSelectModal}>
            <img src={headPat} alt="" />
            {admData.patDesc || ""}
            <Icon type="right" className={admModalVisible ? "right-rotate-90" : "right-rotate-0"} />
          </span>
        </h1>
        <HospAndPatModal onRef={this.handleRef} modifyModalVisible={this.modifyModalVisible} header={'true'} />
      </div>
    )
  }
};
