// 缴费
import React from 'react';
import { List, Tabs } from 'antd-mobile';
import { $http } from "containers/config/https";
import './style/index.less';

const Item = List.Item;
const Brief = Item.Brief;

export default class AccountPayment extends React.Component {
  constructor({ history }) {
    super();
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    this.state = {
      userData,
      adminStatus: true,
      visible: false,
      admID: "2",
      activeTabs: "1",
      unsettledBillInformation: [],
      admData: {}
    }
    this.history = history;
  }

  componentDidMount() {
    let admData = this.props.location&&this.props.location.state ? this.props.location.state : "";
    if (admData&&admData.admID) {
      this.setState({admData}, () => {
        this.getUnsettledBillInformation();
      })
    } else {
      let storeAdmData = sessionStorage.getItem("admData") ? JSON.parse(sessionStorage.getItem("admData")) : {};
      if (storeAdmData&&storeAdmData.admID) {
        this.setState({admData: storeAdmData}, () => {
          this.getUnsettledBillInformation();
        })
      } else {
        this.history.push("/0001/00020005")
      }
    }
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 未结算账单信息
  getUnsettledBillInformation = () => {
    let { userData, admData, activeTabs } = this.state;
    if (activeTabs === '2') {
      this.setState({unsettledBillInformation: []});
      return;
    }
    let data = {
      params: [{
        hospCode: userData.hisHospID,
        userCode: "wxsf",
        patNO: admData.hisPatNo,
        // patNO: "0000038961",
        admID: admData.admID
      }]
    }
    $http.post("urlS", this, {
      code: "130973",
      data: data,
      namespace: "UPP",
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ unsettledBillInformation: res.result });
        } else {
          this.setState({ unsettledBillInformation: [] });
        }
      }
    });
  }

  handleGoPaymentSlipDetails = (item) => {
    let { activeTabs } = this.state;
    item.activeTabs = activeTabs
    this.history.push({
      pathname: "/0001/00020006",
      state: item
    })
  }

  handleTabsChange = (tab) => {
    this.setState({ activeTabs: tab.sub }, () => {
      this.getUnsettledBillInformation();
    })
  }

  render() {
    let { unsettledBillInformation, admData } = this.state;
    const tabs = [
      { title: '待付款', sub: '1' },
      { title: '已付款', sub: '2' },
    ];
    return (
      <div className="electronic-health-card">
        <div style={{ height: "100%", overflow: "auto" }} className="account-payment">
          <div className="tabs-style">
            <Tabs tabs={tabs}
              initialPage={"1"}
              onChange={this.handleTabsChange}
            >
              <div className="tab-content" style={{ height: "100%" }}>
                <List>
                  {unsettledBillInformation && unsettledBillInformation.map((item, index) => {
                    return (
                      <Item key={index} arrow="horizontal" multipleLine extra={<span className="pending-payment">¥<strong>{item.blance}元</strong></span>} onClick={() => this.handleGoPaymentSlipDetails(item)}>
                        {item.locName} <span className="tabs-type">{admData.admType}</span>
                        <Brief>{item.admdate}</Brief>
                      </Item>
                    )
                  })}
                </List>
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    )
  }
}