import React, { Component } from "react";
import { connect } from "dva";
import '../financialWallet.less';
import { withRouter } from 'dva/router';
import * as ajax from '../../../services/api';
import $modal from '../modal';
import { gup } from '../../../utils/utils';
import dff from '../../../assets/images/wallet/dff1.png';
import ffsb from '../../../assets/images/wallet/ffsb1.png';
import ffcg from '../../../assets/images/wallet/ffcg2.png';
import ffze from '../../../assets/images/wallet/ffze1.png';
import axios from 'axios';
import store from 'store';
import { Alert, Input, Button, Table, Icon, Form, Select, Modal } from "antd";
import moment from "moment";
const { Option } = Select;
@connect(state => ({
  profile: state.profile
}))
@withRouter
@Form.create()
export default class Messages extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      totalInfo: null,
      grantInfo: null,
      // 搜索部分
      searchData: {  // 表格数据请求参数
        comGrantId: gup('comGrantId'),
        keyword: '',  //关键字
        pageNumber: '1',  // 页	
        pageSize: '10'  //条目
      },
      keyword: '', //关键字
      // 表格部分
      tableList: [], // 表格数据
      pagination: {  //分页数据
        total: 1,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      canAddData: false,
      // 操作记录
      operationVisibale: false,
      operationPagination: {
        total: 1,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true
      },
      operationList: [],
    };
  }
  componentDidMount() {
    //获取薪资代发记录汇总
    ajax.selectGrantDetailTotalMap({ comGrantId: gup('comGrantId') }).then(res => {
      this.setState({
        totalInfo: res.data
      });
    });
    //【薪资代发】根据id获取薪资代发记录
    ajax.getComGrantInfoById({ comGrantId: gup('comGrantId') }).then(res => {
      this.setState({
        grantInfo: res.data
      });
    });
    this.getTable(this.state.searchData, list => {
      list.length != 0 && this.setState({
        canAddData: true
      });
    });
  }
  // 获取操作记录
  getOperationTable = (data, cb) => {
    ajax.getComOperRecordList(data).then(res => {
      this.setState({
        operationList: res.data,
        operationPagination: {
          ...this.state.operationPagination,
          total: res.data.total,
          current: res.data.pageNumber,
          pageSize: res.data.pageSize
        }
      }, () => {
        cb && cb(res.data.data);
      });
    });
  }
  // 获取表格信息
  getTable = (data, cb) => {
    ajax.pageSuccessComGrantDetailList(data).then(res => {
      this.setState({
        tableList: res.data.data,
        pagination: {
          ...this.state.pagination,
          total: res.data.total,
          current: res.data.pageNumber,
          pageSize: res.data.pageSize
        }
      }, () => {
        cb && cb(res.data.data);
      });
    });
  }
  // 操作记录表格渲染
  renderOperationList = () => {
    const columns = [
      {
        title: '时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '操作人',
        dataIndex: 'createUserName',
        key: 'createUserName'
      },
      {
        title: '操作功能',
        dataIndex: 'operGrantFuncType',
        key: 'operGrantFuncType'
      },
      {
        title: '操作结果',
        dataIndex: 'operResult',
        key: 'operResult'
      }
    ];
    return (
      <div>
        <Table
          dataSource={this.state.operationList}
          columns={columns}
          // pagination={this.state.operationPagination}
          onChange={(pagination) => {
            pagination.comGrantId = gup('comGrantId');
            this.setState({
              operationSearchData: {
                pageNumber: pagination.current,  // 页	
                pageSize: pagination.pageSize
              }
            }, () => {
              this.getOperationTable(pagination);
            });

          }}
        />
      </div>
    );
  };
  // 表格渲染
  renderOrderList = () => {
    const columns = [
      {
        title: '收款人姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '身份证号码',
        dataIndex: 'idCardNo',
        key: 'idCardNo'
      },
      {
        title: '手机号码',
        dataIndex: 'mobilePhone',
        key: 'mobilePhone'
      },
      {
        title: '钱包账户号',
        dataIndex: 'walletAccountNo',
        key: 'walletAccountNo'
      },
      {
        title: '应发工资（元）',
        dataIndex: 'amount',
        key: 'amount'
      },
      {
        title: '状态',
        dataIndex: 'grantStatus',
        key: 'grantStatus',
        render: text => <span style={{color: 'green'}}>{text}</span>
      },
      {
        title: '交易流水号',
        dataIndex: 'bizOrderNo',
        key: 'bizOrderNo'
      },
      {
        title: '交易时间',
        dataIndex: 'createTime',
        key: 'createTime'
      }
    ];
    return (
      <div>
        <Table
          dataSource={this.state.tableList}
          columns={columns}
          pagination={this.state.pagination}
          onChange={(pagination) => {
            const searchData = {  // 搜索数据
              ...this.state.searchData,
              pageNumber: pagination.current,  // 页	
              pageSize: pagination.pageSize
            };
            this.setState({
              searchData
            }, () => {
              this.getTable(searchData);
            });

          }}
        // rowSelection={{
        //   onChange: (selectedRowKeys, selectedRows) => {
        //     this.setState({
        //       selectedRows,
        //       selectedRowKeys
        //     });
        //   },
        //   selectedRowKeys: this.state.selectedRowKeys     
        // }}
        />
      </div>
    );
  };

  render() {
    return (
      <div style={{ paddingTop: '10px' }}>
        <div className="tab_inner">
        <section style={{marginBottom: 10}}>
            <Button
              style={{marginRight: 15}}
              onClick={() => {
                // this.props.history.goBack();
                this.props.history.push('/finance/salary-proxy');
              }}
            >返回列表</Button>
            {
              this.state.grantInfo &&
              <span>
                {this.state.grantInfo.title} （{gup('comGrantId')}）
              </span>
            }
          </section>
          <Alert
            message={<div>
              <span>1、发放工资：发放前请确认发放人数、发放总额、企业钱包余额是否充足，若不足，请<a onClick={() => {
                this.props.history.push('/finance/business-wallet');
              }}>充值</a>；</span><br />
              <span>2、未开通钱包服务的员工，请提醒其在APP端进行开通，否则无法向其发放工资。</span><br />
            </div>}
            type="warning"
            showIcon
            style={{ marginBottom: '15px' }}
          />

          {
            this.state.totalInfo &&
            <div className="statistics_container">
              <div
                className="statistics_uint"
                onClick={() => {
                  this.props.history.push(`/finance/salary-proxy-list?comGrantId=${gup('comGrantId')}`);
                }}  
              >
                <img src={dff} alt=""/>
                <div className="uint_info">
                  <p>待发放总额</p>
                  <p className="bold">{this.state.totalInfo.toTotalAmount}</p>
                  <p>待发放总笔数：{this.state.totalInfo.toTotalSize}</p>
                </div>
              </div>
              <div className="symbol bold">+</div>
              <div
                className="statistics_uint"
                onClick={() => {
                  this.props.history.push(`/finance/salary-proxy-fail?comGrantId=${gup('comGrantId')}`);
                }}
              >
                <img src={ffsb} alt=""/>
                <div className="uint_info">
                  <p>发放失败总额</p>
                  <p className="bold">{this.state.totalInfo.failTotalAmount}</p>
                  <p>发放总笔数：{this.state.totalInfo.failTotalSize}</p>
                </div>
              </div>
              <div className="symbol bold">+</div>
              <div
                className="statistics_uint active_uint"
              >
                <img src={ffcg} alt=""/>
                <div className="uint_info">
                  <p>发放成功总额</p>
                  <p className="bold">{this.state.totalInfo.successTotalAmount}</p>
                  <p>发放总笔数：{this.state.totalInfo.successTotalSize}</p>
                </div>
              </div>
              <div className="symbol bold">=</div>
              <div
              className="statistics_uint"
              style={{
                cursor: 'default'
              }}
                // className={
                //   (() => {
                //     if (this.state.listStatus == 3) {
                //       return 'active_uint statistics_uint';
                //     }
                //     return 'statistics_uint';
                //   })()
                // }
                // onClick={() => {
                //   this.setState({
                //     listStatus: 3
                //   });
                // }}
              >
                <img src={ffze} alt=""/>
                <div className="uint_info">
                  <p>发放总额</p>
                  <p className="bold">{this.state.totalInfo.totalAmount}</p>
                  <p>发放总笔数：{this.state.totalInfo.totalSize}</p>
                </div>
              </div>
            </div>
          }

          <div className="proxy_btns_container">
            <div>
              <label style={{ marginRight: 16 }}>
                关键字：
                <Input
                  value={this.state.keyword}
                  style={{ width: '214px' }}
                  placeholder="姓名/手机号码"
                  onChange={(e) => {
                    this.setState({
                      keyword: e.target.value
                    });
                  }}
                  maxLength={20}
                />
              </label>
              <Button
                style={{
                  marginRight: '16px',
                  padding: window && window.innerWidth <= 1366 ? '0 10px' : '0 15px'
                }}
                type="primary"
                onClick={() => {
                  const data = {
                    ...this.state.searchData,
                    keyword: this.state.keyword
                  };
                  this.setState({
                    searchData: data
                  }, () => {
                    this.getTable(data);
                  });
                }}
              >
                搜索
              </Button>
              <Button
                onClick={() => {
                  this.setState({
                    keyword: '',
                    searchData: {
                      ...this.state.searchData,
                      keyword: '',  //关键字
                      pageNumber: '1',  // 页	
                      pageSize: '10'  //条目
                    }
                  }, () => {
                    this.getTable(this.state.searchData);
                  });
                }}
                style={{
                  padding: window && window.innerWidth <= 1366 ? '0 10px' : '0 15px'
                }}
              >
                重置
              </Button>
            </div>
            <div className="operation_btns">
              {
                this.state.canAddData && 
                <Button
                  type="primary"
                  // disabled
                  onClick={() => {
                    const { comGrantId, keyword } = this.state.searchData;
                    // window.open(`${ajax.host}/task/com/grant/export-success-com-grant-detail-list?comGrantId=${comGrantId}&keyword=${keyword}`);
                    axios({
                      method: 'get',
                      url: `${ajax.host}/task/com/grant/export-success-com-grant-detail-list?comGrantId=${comGrantId}&keyword=${keyword}`, //后台请求地址
                      responseType: 'blob',
                      headers: {
                        access_token: store.get('saas')['access_token'],
        Accesstoken: store.get('saas')['access_token']|| sessionStorage.userV5Token,

                      }
                    }).then(data => {
                      if (!data) {
                        return;
                      }
                      let url = window.URL.createObjectURL(data.data);
                      let link = document.createElement('a');
                      link.style.display = 'none';
                      link.href = url;
                      link.setAttribute('download', `薪酬代发成功数据_[${comGrantId}]_[${moment().format('YYYY-MM-DD HH:MM:SS')}].xls`);
                      document.body.appendChild(link);
                      link.click();
                    });
                  }}
                >导出</Button>
              }
              <Button onClick={() => {
                if (this.state.operationList.length == 0) {
                  this.getOperationTable({
                    comGrantId: gup('comGrantId'),
                    pageNumber: '1',
                    pageSize: '10'
                  });
                }
                this.setState({
                  operationVisibale: true
                });
              }} type="default">操作记录</Button>
            </div>
          </div>
        </div>
        <div className="table_container">
          {this.renderOrderList()}
        </div>
        {/* 操作记录 */}
        <Modal
          title="操作记录"
          className="modal_on_footer"
          width={720}
          onCancel={() => {
            this.setState({
              operationVisibale: false
            });
          }}
          visible={this.state.operationVisibale}
        >
          {this.renderOperationList()}
        </Modal>
      </div>
    );
  }
}