import * as React from 'react';
import { Table, } from 'kts-xui';
import { Descriptions, Modal, Pagination, Tooltip } from 'kts-components-antd-x4';
import agent from '../../Server';
import moment from 'moment';
import { columnEnum } from '../ColumnEnum';
import { findLabel, operateEnum, effectiveStatusEnum } from '../FiledsEnum';
/** Props接口 */
interface IProps {
    onClose?: () => void;
    /**
     * 列表id
     */
    dataId?: string;
    /**
     * 发票id
     */
    goodsUuid: any;

    url: string
}
export default class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '处理',
            dataIndex: 'operate',
            width: 100,
            render: (text) => {
                return findLabel(text, operateEnum)
            }
        },
        {
            title: '处理方',
            width: 100,
            dataIndex: 'operator',
        },
        {
            title: '时间',
            dataIndex: 'createTime',
            width: 140,
            ellipsis: true,
            render: text => { return moment(text).format('YYYY-MM-DD HH:mm'); }
        },
        {
            title: '业务有效性',
            dataIndex: 'effectiveStatus',
            width: 140,
            render: (text, record) => {
                if (text === 1) {
                    return  <span style={{ color: '#0074ff' }}>{findLabel(text, effectiveStatusEnum)}</span>
                } else if (text === 2) {
                    return <Tooltip title={record.effectiveMsg}><span style={{ color: 'red' }}>{findLabel(text, effectiveStatusEnum)}</span></Tooltip>
                } else {
                    return '-'
                }
            }
        },

    ];
    constructor(props) {
        super(props);
        this.state = {
            dataId: this.props.dataId,
            goodsUuid: this.props.goodsUuid,
            list: [],
            pageMeta: null,
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10
        };
        this.getData(params);
    }
    getData = async (params) => {
        params = {
            ...params,
            ...this.props.goodsUuid,
            // detailId: this.state.invoiceUuid,
            // invoiceUuid: this.state.invoiceUuid,
        }
        const res: any = await agent.post(this.props.url, 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 { pageMeta, list } = this.state;
        return (
            <Modal
                title='处理记录'
                onCancel={this.props.onClose}
                visible={true}
                width={900}
                footer={null}
                bodyStyle={{ maxHeight: 500, overflow: 'auto' }}
            >
                {list &&
                    <Table
                        dataSource={list}
                        columns={this.columns as any}
                        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>);
    }

}