import * as React from 'react';
import { Table, } from 'kts-xui';
import { Descriptions, Modal, Pagination, Row } from 'kts-components-antd-x4';
import agent from '../Server';
import moment from 'moment';
/** Props接口 */
interface IProps {
    onClose?: () => void;
    invoiceUuid: string;
    data: any;
}
export default class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 80,
            render: (text, record, index) => {
                return index + 1
            }
        },
        {
            title: '货物(劳务)名称',
            dataIndex: 'goodsName',
            ellipsis: true,
        },
        {
            title: '货物规格型号',
            dataIndex: 'specificationModel',
            width: 200,
            ellipsis: true,
            render: (text) => {
                return <span style={{ whiteSpace: 'pre-wrap' }}>{text}</span>
            }
        },
        {
            title: '单位',
            dataIndex: 'unit',
            width: 100,
            ellipsis: true,
        },
        {
            title: '数量',
            dataIndex: 'quantity',
            width: 80,
        },

    ];
    constructor(props) {
        super(props);
        this.state = {
            invoiceUuid: this.props.invoiceUuid,
            data: this.props.data,
            list: [],
            pageMeta: null,
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10
        };
        this.getData(params);
    }
    getData = async params => {
        params = {
            ...params,
            invoiceUuid: this.state.invoiceUuid,
        }
        const res: any = await agent.post('/collector/asset/assetGoodsPage', params, this);
        if (res.er) {
            return;
        } else if (res.res) {
            this.setState({
                list: res.res.items,
                pageMeta: res.res.pageMeta,
            })
        }

    }
    onPageChange = (pageNum, pageSize) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefresh();
        });
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getData(params);
    }
    render() {
        const { data, pageMeta, list } = this.state;
        return (
            <Modal
                title='发票明细'
                onCancel={this.props.onClose}
                visible={true}
                width={900}
                footer={null}
                bodyStyle={{ maxHeight: 500, overflow: 'auto' }}
            >
                <Descriptions>
                    <Descriptions.Item label="销售方名称" span={2}>{data.salerName}</Descriptions.Item>
                    <Descriptions.Item label="购买方名称">{data.buyerName}</Descriptions.Item>
                    <Descriptions.Item label="开票日期">{data.invoiceDate && moment(data.invoiceDate).format('YYYY-MM-DD')}</Descriptions.Item>
                    <Descriptions.Item label="发票代码">{data.invoiceCode}</Descriptions.Item>
                    <Descriptions.Item label="发票号码">{data.invoiceNo}</Descriptions.Item>
                </Descriptions>
                {list &&
                    <Table
                        dataSource={list}
                        columns={this.columns}
                        scroll={{ x: 700 }}
                        pagination={false}
                    />
                }
                {pageMeta && <Pagination onChange={this.onPageChange} showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条,  共有 ${total} 条`} style={{ padding: '16px 0', flex: 'none', background: 'white', textAlign: 'center' }} total={pageMeta.total} pageSize={pageMeta.pageSize} current={pageMeta.pageNum} showSizeChanger={true} />}
            </Modal>);
    }

}