// 收银弹框

import React from 'react';
import { Select, Input, Row, Col, Button, Spin, List, Divider, Popconfirm, message, Icon, Form, DatePicker, Table, Tabs, Modal, Card, Pagination, Popover } from 'antd';
import { $http } from 'containers/config/https';
import './style/index.less'

// 组件const
const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD' || undefined;
const { Search } = Input;

export default class PayContentModal extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      payType: 1,
      admIDinfo: [],
      chargeordIDinfo: [],
      ordAdmReasonID: '',
      payadmReasonID: '',
      otherPayData: [],
      moneyData: {},
      maypayData: [],
    }
  }

  componentDidMount() {
    // this.someVar()
    this.initJuris()   // 权限
  }


  // 权限
  initJuris = () => {
    var data = {
      params: [{
        logonHospID: JSON.parse(window.sessionStorage.userData).hospID, //医院id 
        logonGroupID: JSON.parse(window.sessionStorage.userData).groupID,  //角色id
        logonUserID: JSON.parse(window.sessionStorage.userData).userID, //人员id
        invTypeCode: 'O'  // 类型
      }]
    }
    $http.post('urlS', this, {
      code: "05210001",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {


          this.setState({
            invoice: res.currentInvNoInfo,  // 发票号
            otherPayData: res.groupConfig.HBOPConfigPaymode[0].OPCharge || [],  // 其他付款方式
            IfSupplementOrd: res.sysConfig.IfSupplementOrd,  // 收费界面是否可以补录医嘱

          });

          if (res.groupConfig.IfChargeFlag === 'Y') {
            if (res.groupConfig.IfInvNo === 'Y' && res.currentInvNoInfo.split('^')[0] !== '0') {
              message.error('该收费员无发票号')
            }
          } else {
            message.error('无收费权限')
            this.props.handleCallback();
          }
        }
      }
    });
  }


  someVar = () => {
    let admIDinfo = [];
    if (Array.isArray(this.props.admIDinfo)) {
      admIDinfo = this.props.admIDinfo
    } else {
      admIDinfo.push(this.props.admIDinfo)
    }
    this.setState({
      admIDinfo: admIDinfo || [],
      chargeordIDinfo: this.props.chargeordIDinfo || [],
      ordAdmReasonID: this.props.ordAdmReasonID || '',
      payadmReasonID: this.props.payadmReasonID || '',
      accountID: this.props.accountID || '',
    }, () => {
      this.loading()// 预结算 
    })
  }

  // 预结算
  loading = () => {

    let { admIDinfo, chargeordIDinfo, ordAdmReasonID, payadmReasonID, } = this.state

    var data = {
      params: [{
        admIDinfo: admIDinfo || [],
        chargeordIDinfo: chargeordIDinfo || [],
        ordAdmReasonID: ordAdmReasonID || '',
        payadmReasonID: payadmReasonID || '',
      }]
    }

    $http.post('urlS', this, {
      code: "05100400",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            chargeRecodeId: res.recordIDinfo, //交款记录id
          }, () => {
            this.money(this.state.chargeRecodeId)
            this.maypay(this.state.chargeRecodeId)

          })
        } else {
          this.props.handleCallback();
        }
      }
    });


  }

  chargeRecodeId = () => {
    return this.state.chargeRecodeId
  }

  // 循环数据
  maypay = (chargeRecodeStr) => {
    var data = {
      params: [{
        "chargeRecodeStr": chargeRecodeStr,
      }]
    }
    $http.post('urlS', this, {
      code: "05210035",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            maypayData: res.chargeAmtInfo[0].paywArr || []
          })
        }
      }
    });
  }


  // 金额
  money = (chargeRecodeStr) => {

    var data = {
      params: [{
        "recodeIDStr": chargeRecodeStr || '', // 交款记录id
      }]
    }


    $http.post('urlADS', this, {
      code: "05210008",
      data: data,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          this.setState({
            moneyData: res.chargeAmtInfo[0], //金额对象
          })
        }
      }
    });
  }


  // 收费确认
  chargingConfir = () => {

    const { payWayCashId, moneyData, cashInCashVal, payType, otherPayMoney, otherPay, radio, zeroPay, unitsListVal } = this.state

    let paywIDinfo;
    paywIDinfo = payType + '^' + moneyData.otherPayAmt


    var data1 = {
      params: [{
        "recordIDinfo": this.state.chargeRecodeId || '', // 交款记录id
        "userID": JSON.parse(window.sessionStorage.userData).userID || '', //收费员ID
        "sflag": "0", //是收费还是退费
        "accmID": this.state.accountID, //病人账户ID
        "paywIDinfo": paywIDinfo,
        "printflag": "Y",//是否打印发票
      }]
    }

    var data2 = {
      params: [{
        "recordIDinfo": this.state.chargeRecodeId || '', // 交款记录id
        "userID": JSON.parse(window.sessionStorage.userData).userID || '', //收费员ID
        "sflag": "0", //是收费还是退费
        "accmID": this.state.accountID, //病人账户ID
        "paywIDinfo": '',//支付方式串 
        "printflag": "Y",//是否打印发票
      }]
    }

    $http.post('urlADS', this, {
      code: "05210024",
      data: data1,
      success: function (res) {
        let errorCode = res.errorCode;
        if (errorCode === '0') {
          $http.post('urlADS', this, {
            code: "05210007",
            data: data2,
            success: function (res) {
              let errorCode = res.errorCode;
              if (errorCode === '0') {
                this.props.handleCallback(res);
              }
            }
          });

        }
      }
    });


  }



  // 支付方式
  payTypeChange = (type) => {
    this.setState({
      payType: type
    })
  }

  iconType1 = (iconType) => {
    let config = {
      'ALIPAY': '支付宝',
      'WECHAT': '微信',
      'ACC': '院内账户',
    }
    return config[iconType]
  }

  iconType2 = (iconType) => {
    let config = {
      'ALIPAY': 'alipay-circle',
      'WECHAT': 'wechat',
      'ACC': 'pay-circle',
    }
    return config[iconType]
  }

  iconType3 = (iconType) => {
    let config = {
      'ALIPAY': '#06B4FD',
      'WECHAT': '#24DB5A',
      'ACC': '#D4237A',
    }
    return config[iconType]
  }

  render() {
    const content = (
      this.state.maypayData.map((item, i) =>
        <div style={{ width: '300px',height:'30px' }}>
          <Col span={24}>
            <Row className='mT10'>
              <Col span={10} className='modalLabel '>{item.desc}</Col>
              <Col span={14} >
                <span>￥{item.amt}</span>
              </Col>
            </Row>
          </Col>
        </div>

      )

    )
    return (
      <div style={{ textAlign: 'center' }}>

        <Popover content={content} title="账户信息" placement="bottom" >
          <p style={{ fontSize: '20px' }}>应收金额
            <span style={{ fontSize: '30px', fontWeight: 'bold' }}>￥{this.state.moneyData.otherPayAmt || '0.00'} </span>
            <Icon type="exclamation-circle" theme="filled" style={{ color: 'rgb(240, 65, 52)' }} />
          </p>
        </Popover>

        <Divider />
        <p>请选择支付方式</p>
        <Row>
          {this.state.otherPayData.map((item, i) =>
            <Col span={8} key={i} >
              <p style={{ height: '60px', lineHeight: '60px' }} onClick={() => this.payTypeChange(item.paywID)} className={this.state.payType === item.paywID ? 'payType' : ''}>
                <Icon type={this.iconType2(item.paywCode) || 'dollar-circle'} theme="filled" style={{ color: this.iconType3(item.paywCode) || '#24DB5A', fontSize: '30px' }} />
                <p style={{ fontSize: '12px', position: 'absolute', top: '30px', left: '52px', display: item.paywCode === 'ACC' ? 'block' : 'none' }}>可用余额：<span>￥{this.state.moneyData.accountAmt}</span></p>
              </p>
              <p style={{ fontSize: '18px' }}>{this.iconType1(item.paywCode) || item.paywCode}</p>
              <p style={{ fontSize: '18px', display: item.paywCode === 'ACC' ? 'block' : 'none'  }}>账户状态:<span style={{ color: '#1999db' }}>{this.state.moneyData.accountFlagDesc}</span></p>
            </Col>
          )}



        </Row>
      </div>
    )
  }
}