// 已支付订单
import React from 'react';
import { Accordion, Toast } from 'antd-mobile';
import { $http } from "containers/config/https";
import './style/visitRecords.less';
import fwxyNodata from 'assets/images/fwxy-nodata.png';

export default class PaidOrders extends React.Component {
  constructor() {
    super();
    this.state = {
      ordersData: []
    }
  }

  componentDidMount() {
    this.getOrdersData();
  }

  // 获取订单数据
  getOrdersData = () => {
    Toast.loading('数据加载中...', 30);
    let data = {
      params: [{
        orderType: 'P'
      }]
    }
    $http.post("urlS", this, {
      code: "01050003",
      data: data,
      // namespace: "UPP",
      success: function (res) {
        Toast.hide()
        if (+res.errorCode === 0) {
          this.setState({ ordersData: res.result })
        } else {
          this.setState({ ordersData: [] })
        }
      },
      error: function () {
        Toast.hide()
      }
    });
  }

  // 电子发票
  handleElectronicInvoiceClick = (pictureUrl) => {
    if (pictureUrl) {
      window.location.href = pictureUrl;
    }
    // if (pictureUrl && pictureUrl.url) {
    //   let url = pictureUrl.url + "?order=" + pictureUrl.order + "&appId=" + pictureUrl.appid + "&invoiceType=0";
    //   window.location.href = url;
    //   return;
    // }
    // Toast.loading('加载中...', 30);
    // let data = {
    //   params: [{
    //     electronicPictureUrl: pictureUrl
    //   }]
    // }
    // $http.post("urlS", this, {
    //   code: "052401",
    //   data: data,
    //   namespace: "UPP",
    //   success: function (res) {
    //     if (+res.errorCode === 0) {
    //       if (res.result && res.result.url) { // 当获取的电子发票路径存在则直接跳转
    //         let url = res.result.url + "?order=" + (res.result && res.result.order ? res.result.order : "") + "&appId=" + (res.result && res.result.appid ? res.result.appid : "") + "&invoiceType=0";
    //         window.location.href = url;
    //         Toast.hide()
    //       } else {
    //         Toast.info("电子发票获取异常，请稍后再试。", 3, () => { }, false)
    //       }
    //     } else {
    //       Toast.hide()
    //     }
    //   },
    //   error: function () {
    //     Toast.hide()
    //   }
    // });
  }

  // 查看错误
  handleErrorToast = (title) => {
    Toast.info(title, 3, () => { }, false)
  }

  render() {
    let { ordersData } = this.state;
    return (
      <div className="paid-order">
        {ordersData && ordersData.length > 0 ? ordersData.map((item, index) => {
          return (
            <div key={index} className="card">
              <div className="card-header border-bottom-after ellipsis" onClick={() => this.handleErrorToast(item.businessDesc)}>
                {item.businessDesc}
                <span>{item.orderType === "PART" ? "已退款" : ""}</span>
              </div>
              <div className="card-center border-bottom-after">
                <p>{item.orderType === 'P' && (item.orderState === 'S' || item.orderState === 'TP') ? "微信支付成功，HIS处理失败，可退款" : ""}</p>
                <p><span>就诊科室：{item.admLocDesc}</span></p>
                <p>就诊人：{item.patName}</p>
                <p>费别：{item.orderAdmReason}</p>
                <p><span>就诊时间：{item.admDateTime}</span></p>
                <p><span>下单时间：{item.payDateTime}</span></p>
                <p>{item.invType === 'O' && item.orderType === 'B' ? <span>处方流水号：{item.prescribeTradeNum}</span> : (item.orderType === 'P' ? <span>订单号：{item.payTradeNum}</span> : '')}</p>
                <Accordion className="accordion">
                  <Accordion.Panel header="费用清单分类">
                    {item.detail && item.detail.length ? item.detail.map((detailItem, detailIndex) => {
                      return <p className="detail-item" key={detailIndex}><span>{detailItem.medItemDesc}</span><span>{detailItem.patAmt}</span></p>
                    }) : (<span className="detail-item">暂无数据</span>)}
                  </Accordion.Panel>
                </Accordion>
              </div>
              <div className="card-footer">
                <div>
                  {/* <a href={item.pictureUrl.url + "?order=" + (item.pictureUrl && item.pictureUrl.order ? item.pictureUrl.order : "") + "&appId=" + (item.pictureUrl && item.pictureUrl.appid ? item.pictureUrl.appid : "") + "&invoiceType=0"} 
                    style={{ display: item.orderType === 'P' && item.pictureUrl && item.pictureUrl.url ? 'inline-block' : 'none' }}
                  >
                    电子发票
                  </a> */}
                  <span style={{ color: "#0000EE", display: item.orderType === 'P' && item.pictureUrl ? 'inline-block' : 'none' }} onClick={() => this.handleElectronicInvoiceClick(item && item.pictureUrl ? item.pictureUrl : "")}>电子发票</span>
                </div>
                <div>¥<span>{item.ordReasonPatAmt}</span></div>
              </div>
            </div>
          )
        }) : (
          <div style={{ width: '100%', textAlign: 'center', color: '#999' }}>
            <img style={{ width: '100%' }} src={fwxyNodata} alt="" />
            暂无已支付订单
          </div>
        )}

      </div>
    )
  }
}