// 选择就诊日期与时段
import React from 'react';
import {Modal, Tabs, Toast} from 'antd-mobile';
import { $http } from "containers/config/https";
import '../style/index.less';

export default class VisitDateAndPeriod extends React.Component {
  constructor(props) {
    super(props);
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    this.state = {
      userData,
      visible: false,
      tabs: [], // tabs数据
      ticketsForTimePeriod: [],
      tabsPage: 0,
      registeredDetails: [], // 可挂号详情
    }
  }

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

  // 关闭弹窗
  onClose = () => {
    this.setState({visible: false})
  }

  // 打开弹窗
  showModal = (obj) => {
    let ticketsForTimePeriod = obj.item&&obj.item.resList ? obj.item.resList : [];
    this.setState({visible: true, ticketsForTimePeriod}, () => {
      if (!(obj&&obj.childItem&&obj.childItem.title)) {
        let tabs = [
          { title: '请选择时段'},
          { title: '请选择'},
        ];
        this.setState({tabs, tabsPage: 0})
      } else {
        this.handleGoDetails(obj.childItem)
      }
    })
  }

  handleGoDetails = (item) => {
    let tabs =  [
      { title: '请选择时段'},
      { title: '请选择'},
    ];
    tabs[0].title = item&&item.title ? item.title : "更多"
    this.setState({tabs, tabsPage: 1}, () => {
      this.getRegisteredDetails(item);
    })
  }

  handleTabsChange = (tab, index) => {
    let {tabs} = this.state;
    if ((!tabs[0].title) || (tabs[0].title === "请选择时段")) {
      Toast.info("请选择时段", 3, () => {}, false);
    } else {
      this.setState({tabsPage: index})
    }
  }

  // 跳转到确认预约界面
  handleGoConfirmAppointment = () => {
    this.props.history.push("")
  }

  // 获取排班详情
  getRegisteredDetails = (item) => {
    let {userData} = this.state;
    let data = {
      params: [{
        hospID: userData&&userData.hospCode ? userData.hospCode : "",
        resDetailID: item&&item.resDetailID ? item.resDetailID : ""
      }]
    }
    $http.post("urlS", this, {
      code: "03040004",
      data: data,
      success: function(res) {
        if (+res.errorCode === 0) {
          this.setState({registeredDetails: res.result});
        } else {
          this.setState({registeredDetails: []});
        }
      }
    })
  }

  render() {
    let {visible, ticketsForTimePeriod, tabs, tabsPage, registeredDetails} = this.state;
    
    let ticketsForTimePeriodDom = ticketsForTimePeriod&&ticketsForTimePeriod.map((item, index) => {
      return <p onClick={() => this.handleGoDetails(item)} key={index} className={item.usableNum && item.usableNum > 0 ? "" : "no-inoperable"}><span>{item.title}</span>{item.usableNum && item.usableNum > 0 ? ("余号：" + item.usableNum) : "挂号已满"}</p>
    })

    let registeredDetailsDom = registeredDetails&&registeredDetails.map((item, index) => {
      return (
        <div key={index} onClick={() => this.handleGoConfirmAppointment(item)} className={item.usableNum && item.usableNum > 0 ? "" : "div-no-inoperable"}>
          <span>{item.timeDetail}</span>
          <span>{item.usableNum && item.usableNum > 0 ? "(余号：" +　item.usableNum + ")" : "(无号)"}</span>
        </div>
      )
    })

    return (
      <Modal
        popup
        // closable={true}
        visible={visible}
        onClose={this.onClose}
        animationType="slide-up"
        closable
        className="visit-date-and-period"
      >
        <div>
          <h1 style={{borderBottom: "1px solid #ddd"}}>选择就诊日期和时段</h1>
          <div>
            <Tabs tabs={tabs}
              page = {tabsPage}
              onChange={this.handleTabsChange}
            >
              <div className="modal-tabs-content modal-tabs-content-left">
                {ticketsForTimePeriodDom}
              </div>
              <div className="modal-tabs-content modal-tabs-content-right">
                {registeredDetailsDom}
              </div>
            </Tabs>
          </div>
        </div>
      </Modal>
    )
  }
}