import * as React from 'react';
import { PageHeaderFoot, Button, message, Table, Tag, PageHeaderTop } from 'kts-xui';
import { Descriptions, Divider, Menu,  } from 'kts-components-antd-x4';
import { taskStatusEnum, findLabel } from '../../CommonComponents/FiledsEnum';
import agent from '../../Server';
import InvoiceList from './invoicelist'
import { CloseOutlined } from '@ant-design/icons'
import './index.less';
import moment from 'moment';
/** Props接口 */
interface IProps {
    onSuccess: () => void;
}
export default class UIComponents extends React.Component<any, any> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            data: {},
            taskUuid: this.props.match.params.id,
        };
    }
    componentDidMount() {
        this.getData();
    }
    onDelete = (keys: string[]) => {
        const { list } = this.state;
        const newList = list.filter((item) => {
            return keys.every(element => element !== item.key);
        })
        this.setState({
            list: newList
        });
    }
    getData = async () => {
        const res: any = await agent.post('/web/verifierTask/getDetail', { taskUuid: this.state.taskUuid }, this);
        if (res.er) {
            return;
        } else {
            this.setState({
                data: res.res || {}
            });
        }
    }
    send = () => {

    }

    onSuccess = (list: any[]) => {
        console.log(list);
    }
    refreshInvoice = () => {

    }
    deleteTask = async () => {
        const res: any = await agent.get('/web/verifierTask/deleteTask', { taskUuid: this.state.taskUuid }, this);
        if (res.er) {
            return;
        } else if (res.res) {
            message.success('操作成功');
            this.props.history.goBack();
        }
    }
    titleDom = () => {
        const { data } = this.state;
        return <>
            <span style={{ fontSize: 16, color: '#0074ff' }}>核验任务</span>
            <span style={{ fontSize: 16 }}>采集任务:{data.taskNo}
                <Tag className="no-edit">{findLabel(data.status, taskStatusEnum)}</Tag>
                <CloseOutlined />
            </span>
        </>
    }
    render() {
        const { data, taskUuid } = this.state;
        return (
            <div style={{ position: 'relative' }}>
                <div style={{ position: 'fixed', zIndex: 3, width: '100%', background: 'white' }}>
                    <PageHeaderTop
                        title="数字资产核验方"
                        help=""
                    />
                    <PageHeaderFoot
                        title={this.titleDom()}
                        expandRight={[
                            data.status === 1 && <Button key="0" type="primary" onClick={this.deleteTask}>删除</Button>,
                            <Button key='2' onClick={() => { this.props.history.goBack(); }}>返回</Button>,
                        ]}
                    />
                </div>
                <div style={{ padding: '140px 20px 0' }} className="content">
                    <Descriptions layout="vertical">
                        <Descriptions.Item label="核验方">{data.verifierParty}</Descriptions.Item>
                        <Descriptions.Item label="采集方">{data.verifiedParty}</Descriptions.Item>
                        <Descriptions.Item label="任务截止日期">{data.taskEndDate && moment(data.taskEndDate).format('YYYY-MM-DD')}</Descriptions.Item>
                        <Descriptions.Item label="任务创建人">{data.creator}</Descriptions.Item>
                        <Descriptions.Item label="关联单据">
                            {data.originalDocList && data.originalDocList.map(item => {
                                return <>{item.originalDocument}<br /></>
                            })}
                        </Descriptions.Item>
                        <Descriptions.Item label="备注">{data.remark}</Descriptions.Item>

                    </Descriptions>

                </div>
                <InvoiceList taskUuid={taskUuid} />
            </div>
        );
    }

}