import * as React from 'react';
import { PageHeaderFoot, Button, PageHeaderTop, Modal, message } from 'kts-xui';
import { Descriptions,Popconfirm } from 'kts-components-antd-x4';
import InvoiceList from './invoicelist'
import agent from '../../Server';
import './index.less';
import { DigitalAssetVerification } from '../../..';
import { withRouter, RouteChildrenProps } from 'react-router-dom';
import moment from 'moment';
import ConnectHeader from './ConnectHeader';
import OriginalDrawer from './OriginalDrawer';
const { confirm } = Modal;
/** Props接口 */
interface IProps {
    onSuccess: () => void;
}
class UIComponents extends React.Component<IProps & RouteChildrenProps, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            data: {},
            selectedRadio: props.match.params.type ? 'record' : 'invoice',
            taskUuid: props.match.params.id,
            type: props.match.params.type || '',//根据类型打开采集界面
            didCheck: false,
            loading: false,
            originalModal: false,
            connect:true,
        };
    }
    componentDidMount() {
        this.getData();
    }
    getData = async () => {
        const res: any = await agent.get('/collector/task/queryTaskDetail', { taskUuid: this.state.taskUuid }, this);
        if (res.er) {
            return;
        } else {
            this.setState({
                data: res.res || {},
            });
        }
    }
    onCreate = () => {
        const { taskUuid } = this.state;
        this.props.history.push(`/task/slaveadd/${taskUuid}/create`);
    }
    checkBeforeSend = async () => {
        const { data } = this.state;
        this.setState({ loading: true })
        const res: any = await DigitalAssetVerification.server.post(`${DigitalAssetVerification.prefix_path}/collector/task/submitTask`, {
            taskUuid: this.state.taskUuid,
            collectorPartyId: data.collectorPartyId,
            verifierName: data.verifierName,
            verifierPartyId: data.verifierPartyId,
        }).resFs([DigitalAssetVerification.serviceTools.repeatCallEnd]).end(this);
        this.setState({ loading: false });
        if (res.err) {
            message.error('提交失败,网络异常');

            return;
        } else {
            if (res.res.body.ok) {
                message.success('操作成功');
                this.props.history.goBack();
                // this.getData();
            } else {
                Modal.error({
                    title: '提交失败',
                    content: res.res.body.status.description,
                    okText: '确定 ',
                });
            }

        }

    }
    popModal = () => {
        confirm({
            title:'提示',
            content:'请把关联任务的发票导入到当前任务中再进行提交，任务提交后则不可变更。',
            onOk:()=> {
                this.checkBeforeSend();
            },
            okText:'提交',
            cancelText:'取消'
        });

    }
    onSuccess = (list: any[]) => {
        console.log(list);
    }
    changeView = (radio: string) => {
        this.setState({
            selectedRadio: radio
        })
    }
    deleteTask = async () => {

        const res: any = await agent.get('/web/verifiedTask/deleteVerifiedPartyTask', {
            taskUuid: this.state.taskUuid,

        }, this);
        if (res.er) {
            return;
        } else if (res.res) {
            message.success('操作成功');
            this.props.history.goBack();
        }
    }
    onCloseDid = () => {
        this.setState({
            didCheck: false
        })
    }

    goback = () => {
        this.props.history.goBack();
    }
    onViewAll = () => {
        this.setState({
            originalModal: true
        })
    }
    closeOriginal = () => {
        this.setState({
            originalModal: false
        })
    }
    showoriginalDocList = () => {
        const { data } = this.state;
        const list = data.originalDocList?.slice(0, 1);
        const length = data.originalDocList?.length;
        return <span>
            {list && list.map((item, key) => {
                return <>{item.originalDocument}<br /></>
            })}
            {length > 1 && <a onClick={this.onViewAll}>查看全部</a>}
        </span>
    }
    connectTask = (value: boolean) => {
        this.setState({
            connect: value
        })
    }
    render() {
        const { data, loading, originalModal,connect } = this.state;
        return (
            <div style={{ position: 'relative', background: 'white' }}>
                <div style={{ zIndex: 3, width: '100%', background: 'white' }}>
                    <PageHeaderTop
                        title="数字资产采集方"
                        help=""
                    />
                    <PageHeaderFoot
                        title={<ConnectHeader data={data} connectTask={this.connectTask}/>}
                        expandRight={[
                            <Button key="5" type="primary" onClick={this.onCreate}>创建关联任务</Button>,
                            data.taskStatus === 2 && !connect &&
                            <Button loading={loading} key="1" type="primary" onClick={this.popModal}>提交</Button>
                            ,
                            data.taskStatus === 2 && connect &&
                            <Button loading={loading} key="1" type="primary" onClick={this.checkBeforeSend}>提交</Button>
                            ,
                            <Button key='2' onClick={() => { this.props.history.goBack(); }}>返回</Button>,
                        ]}
                    />
                </div>
                <div style={{ padding: '20px 20px 0' }} className="content">
                    <Descriptions layout="vertical">
                        <Descriptions.Item label="核验方">{data.verifierName}</Descriptions.Item>
                        <Descriptions.Item label="采集方">{data.collectorName}</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="关联单据">
                            {this.showoriginalDocList()}
                        </Descriptions.Item>
                        <Descriptions.Item label="核验日期范围">{data.effectiveStart && <span>{moment(data.effectiveStart).format('YYYY-MM-DD')}～{moment(data.effectiveEnd).format('YYYY-MM-DD')}</span>}</Descriptions.Item>
                        <Descriptions.Item label="备注">{data.remark}</Descriptions.Item>
                    </Descriptions>
                </div>
                {originalModal && <OriginalDrawer onClose={this.closeOriginal} data={data} />}
                {data.originalDocList && <InvoiceList originalDocList={data.originalDocList} type={this.state.type} status={data.taskStatus} changeView={this.changeView} taskUuid={this.state.taskUuid} onSuccess={this.getData} />}
            </div>
        );
    }

}
export default withRouter(UIComponents as any)