import * as React from 'react';
import { Table, Drawer, Pagination, AutoTableContainer } from 'kts-xui';
import agent from '../Server';
import moment from 'moment';
/** Props接口 */
interface IProps {
    onClose: () => void;
    data: any;
}

export default class UIComponents extends React.Component<IProps, any> {
    columns = [
        {
            title: '申诉时间',
            ellipsis: true,
            dataIndex: 'createTime',
            with: 160,
            render: text => {
                return text && moment(text).format('YYYY-MM-DD HH:mm')
            }
        },
        {
            title: '申诉原因',
            dataIndex: 'appealReason',
            width: 140,
            ellipsis: true,
        },
        {
            title: '处理结果',
            dataIndex: 'handleResult',
            with: 100,
            render: text => {
                if (text === 0) {
                    return '拒绝'
                } else if (text === 1) {
                    return '同意'
                }
            }
        },
        {
            title: '处理原因',
            width: 150,
            dataIndex: 'handleReason',
            ellipsis: true,
        },
        {
            title: '处理时间',
            dataIndex: 'handleDate',
            ellipsis: true,
            with: 140,
            render: text => {
                return text && moment(text).format('YYYY-MM-DD HH:mm')
            }
        },
        {
            title: '处理人',
            dataIndex: 'handleMan',
            width: 120,
            ellipsis: true,
        },
    ]
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            params: {
                goodsUuid: this.props.data.goodsUuid,
            },
            pageMeta: null,
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10,
            ...this.state.params
        };
        this.getlist(params);
    }
    getlist = async (params) => {
        const res: any = await agent.post('/asset/submit/appealRecordPage', params, this);
        if (res.err) {
            return;
        } else {
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    onChange = (pagination) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum: pagination.current,
                pageSize: pagination.pageSize,
            }
        }, () => {
            this.onRefresh();
        })
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getlist(params);
    }
    onClose = () => {
        this.props.onClose();
    }
    onPageChange = (pageNum, pageSize) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize,
            }
        }, () => {
            this.onRefresh();
        });
    }
    render() {
        const dataSource = this.state.list;
        const { pageMeta } = this.state;
        return (
            <Drawer
                title="申诉记录"
                onClose={this.onClose}
                visible={true}
                footer={null}
                width={900}
                bodyStyle={{ paddingBottom: 0, display: 'flex', height: 'calc(100vh - 140px)', flexDirection: 'column', }}
            >
                <AutoTableContainer style={{ flex: 1 }} >
                    <Table dataSource={dataSource} columns={this.columns} pagination={false} />
                </AutoTableContainer>
                {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} />}
            </Drawer>
        );
    }
}