import React, { PureComponent } from 'react';
import { Table, Button } from 'antd';
import { connect } from 'dva';
import { formatTime } from '@/utils/utils';
import ExportJsonExcel from 'js-export-excel';

@connect((state) => {
  return {
    loading: state.loading.models.getRepaymentPlanList,
    getRepaymentPlanList: state.getRepaymentPlanList,
  };
})
export default class extends PureComponent {
  //导出为excel文件的方法
  downloadFileToExcel = () => {
    const { getRepaymentPlanList } = this.props; //从props中获取数据源
    let option = {}; //option代表的就是excel文件
    let dataTable = []; //excel文件中的数据内容
    if (getRepaymentPlanList && getRepaymentPlanList.length > 0) {
      for (let i in getRepaymentPlanList) {
        //循环获取excel中每一行的数据
        let _planDay = formatTime(getRepaymentPlanList[i].planDay, true); //格式化日期（自定义方法）
        let obj = {
          还款期数: getRepaymentPlanList[i].planPeriod,
          计划还款日: _planDay,
          '租金（元）': getRepaymentPlanList[i].currentAmount,
          还款本金: getRepaymentPlanList[i].currentPrinciple,
          还款利息: getRepaymentPlanList[i].currentInterest,
        };
        dataTable.push(obj); //设置excel中每列所获取的数据源
      }
    }
    option.fileName = '实际还款计划'; //excel文件名称
    option.datas = [
      {
        sheetData: dataTable, //excel文件中的数据源
        sheetName: '实际还款计划', //excel文件中sheet页名称
        sheetFilter: ['还款期数', '计划还款日', '租金（元）', '还款本金', '还款利息'], //excel文件中需显示的列数据
        sheetHeader: ['还款期数', '计划还款日', '租金（元）', '还款本金', '还款利息'], //excel文件中每列的表头名称
      },
    ];
    let toExcel = new ExportJsonExcel(option); //生成excel文件
    toExcel.saveExcel(); //下载excel文件
  };
  render() {
    return (
      <>
        <h2 style={{ textAlign: 'center', fontSize: '24px' }}>实际还款计划</h2>
        <div style={{ width: '80%', margin: '0 auto' }}>
          <Button
            type="primary"
            onClick={this.downloadFileToExcel}
            style={{ marginBottom: '15px' }}
          >
            下载
          </Button>
          <Table
            bordered
            rowKey={(record) => record.id}
            style={{ background: 'white' }}
            columns={columns}
            dataSource={getRepaymentPlanList}
            pagination={false}
            size="middle"
          />
        </div>
      </>
    );
  }
}
