import React from 'react';
import { Card, Alert } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import request from '@/utils/request';

export default class ReportBlock extends React.Component {
    more = '加载更多';
    state: any;
    constructor(props: any) {
        super(props);
        this.state.block = {
            blockList: [],
            totalItems: 0,
            totalPages: 1,
            page: 1,
            per_page: 6
        };
    }

    componentDidMount() {
        let id: string = '';
        this.blockhistory(
            { page: this.state.page, per_page: this.state.per_page, report_id: id }
        ).then((resp: any) => {
            this.state.blockList = resp.data;
            this.state.totalItems = resp.total_items;
            this.state.totalPages = resp.total_pages;
            if (this.state.totalPages === 1) {
                this.more = '加载完成';
            }
            if (this.state.blockList.length === 0) {
                this.more = '没有历史';
            }
        });
    }

    componentWillUnmount() {
    }

    blockhistory(params: any) {
        return request('/api/rule', {
            method: 'GET',
            data: {
                ...params,
                method: 'get',
            },
        });
    }

    getMore = () => {
        let id: string = '1';
        if (this.state.page + 1 < this.state.totalPages) {
            this.blockhistory(
                { page: this.state.page + 1, per_page: this.state.per_page, report_id: id }
            ).then((r: any) => {
                let history = r.data;
                this.setState({
                    page: r.page,
                    totalItems: r.total_items,
                    totalPages: r.total_pages,
                    blockList: [this.state.blockList, ...history]
                });
            });
        } else {
            this.more = '加载完成';
        }
    }

    listItems = () => {
        return this.state.blockList.map((block: any) => 
            <li>
                <div className="status-content-before">
                    {block.created_at}&nbsp;&nbsp;{block.content}
                    <span>报告已存证</span>
                </div>
                <div className="status-time-before">md5值: {block.content_md5}</div>
                <div className="status-time-before">交易id: {block.transaction_id? block.transaction_id : '--'}</div>
                <a className="status-a cert" href="http://testnet.ebookchain.org/assets/{{block.object_id}}"
                    target="_blank">报告证书
                </a>
                <a className="status-a" href="http://testnet.ebookchain.org/transactions/{{block.transaction_id}}"
                target="_blank">交易详情
                </a>
            </li>
        );
    }

    render() {
        return (
            <PageHeaderWrapper>
                <Card bordered={false}>
                    <div className="package-status">
                        <div className="status-box">
                            <h2 style={{paddingLeft: '30%', textAlign: 'left'}}>报告追溯详情</h2>
                            <ul className="status-list">
                                {this.listItems()}
                            </ul>
                            <button type="button" onClick={this.getMore}>{this.more}</button>
                        </div>
                    </div>
                </Card>
            </PageHeaderWrapper>
        );
    };
}