import React, { Component } from "react";
// import axios from 'axios';
// import store from 'store';
import {
  // Form,
  // Input,
  // Icon,
  Button,
  Drawer
} from 'antd';
import { 
  // comAccountTradeVoucher,
  // comAccountPayVoucher,
  enterpriseCompanyComBaseInfoGetComBaseInfoById,
  host
} from '../../../../services/api';
import '../../financialWallet.less';

export default class BudgetDrawer extends Component {
  constructor(props, context) {
    super(props, context);
    this.state={
      payVouchersUrl: '',
      electronicUrl: '',
      comId: ''
    };
  }
  componentDidMount() {
    enterpriseCompanyComBaseInfoGetComBaseInfoById({}).then(res => {
      this.setState({
        comId: res.data.comId
      });
    });
  }
  _renderInfo() {
    const { info } = this.props;

    // if(info) {
      
    //   axios({
    //     method: 'get',
    //     url:
    //     `${host}/task/com/wallet/com-account-pay-voucher?comWalletTradeId=${info.flow_no}`, //后台请求地址
    //     headers: {
    //       access_token: store.get('saas')['access_token']
    //     }
    //   }).then(data => {
    //     console.log(data, 'data');
    //     // document.write(data.data);
    //     // if (!data) {
    //     //   return;
    //     // }
    //     // let url = data.data.data;
        
    //     // let link = document.createElement('a');
    //     // link.style.display = 'none';
    //     // link.href = url;
    //     // link.setAttribute(
    //     //   'download',
    //     //   `瞎咋.xls`
    //     // );
    //     // document.body.appendChild(link);
    //     // link.click();
    //   });
    //   // comAccountPayVoucher({comWalletTradeId: info.flow_no}).then(res => {
    //   //   console.log(res, 'resresrtes');
    //   // });
    // }
    return (
      <div>
        <ul className="drawer_list">
          <li>
            <p className="label">交易时间</p>
            <p className="text">{info.tradeDate}</p>
          </li>
          <li>
            <p className="label">交易流水号</p>
            <p className="text">{info.tradeFlowNo}</p>
          </li>
          <li>
            <p className="label">财务处理时间</p>
            <p className="text">{info.accountsDealDate}</p>
          </li>
          <li>
            <p className="label">财务流水号</p>
            <p className="text">{info.flowNo}</p>
          </li>
          <li>
            <p className="label">交易金额</p>
            <p className="text">{info.amount}</p>
          </li>
          <li>
            <p className="label">交易后金额</p>
            <p className="text">{info.balance}</p>
          </li>
          <li>
            <p className="label">资金流向</p>
            <p className="text">{info.direction}</p>
          </li>
          <li>
            <p className="label">财务处理类型</p>
            <p className="text">{info.accountsDealType}</p>
          </li>
          <li>
            <p className="label">处理状态</p>
            <p className="text">{info.handStatus}</p>
          </li>
          <li>
            <p className="label">订单创建时间</p>
            <p className="text">{info.createDate}</p>
          </li>
          <li>
            <p className="label">服务编码</p>
            <p className="text">{info.serviceType}</p>
          </li>
          <li>
            <p className="label">交易类型</p>
            <p className="text">{info.tradeType}</p>
          </li>
          <li>
            <p className="label">入账方账户</p>
            <p className="text">{info.accountIn}</p>
          </li>
          <li>
            <p className="label">入账方名称</p>
            <p className="text">{info.accountInName}</p>
          </li>
          <li>
            <p className="label">出账方账户</p>
            <p className="text">{info.accountOut}</p>
          </li>
          <li>
            <p className="label">出账方名称</p>
            <p className="text">{info.accountOutName}</p>
          </li>
          <li>
            <p className="label">备注</p>
            <p className="text">{info.memo}</p>
          </li>
          
        </ul>
        <ul className="drawer_list bottom50">
          {
            this.state.comId?
            (
              <li>
                <p className="label">电子回单</p>
                <p className="text">
                  
                  <a href="javascript: void(0)"
                    onClick={() => {
                      // /task/com/wallet/com-account-trade-voucher'
                      window.open(`${host}/task/com/wallet/com-account-trade-voucher?tradeFlowNo=${info.flowNo}&comId=${this.state.comId}`);
                    }}
                  >下载</a>
                </p>
              </li>
            ): ''  
          }
          {/* <li className="no_border">
            <p className="label">支付凭证</p>
            <p className="text"><a href="javascript: void(0)" 
              onClick={() => {
                window.open(`${host}/task/com/wallet/com-account-pay-voucher?tradeFlowNo=${info.flow_no}`);
              }}
            >下载</a></p>
          </li> */}
        </ul>
      </div>
    )
  }
  render() {
    console.log(this.props.info, 'info');
    return (
      <Drawer
        title="交易详情"
        width={520}
        className="budget_drawer_container"
        onClose={this.props.onClose}
        visible={!!this.props.info}
      >
        {
          this.props.info? (
            this._renderInfo()
          ): (
            ''
            // <section style={{marginTop: 30, textAlign: 'center'}}>
            //   数据请求中，请稍后。。。
            // </section>
          )
        }
        
        {/* 底部按钮 */}
        <div
          style={{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e8e8e8',
            padding: '10px 16px',
            textAlign: 'right',
            left: 0,
            background: '#fff',
            borderRadius: '0 0 4px 4px',
          }}
        >
          <Button
            style={{
              marginRight: 8,
            }}
            onClick={() => {
              this.setState({
                info: null
              }, () => {
                this.props.onClose()
              });
            }}
          >
            返回
          </Button>
          {/* <Button onClick={this.props.onClose} type="primary">
            Submit
          </Button> */}
        </div>
      </Drawer>
    );
  }
}