import * as React from 'react';
import { message, Button, Form, Input, Select } from 'kts-xui';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import agent from '../../Server';
import { DigitalAssetVerification } from '../../..';
import { Row, Space, Modal,  } from 'kts-components-antd-x4';
/** Props接口 */
interface IProps {
    onClose: () => void;
    onSuccess: (value) => Promise<boolean>;
    verifierParty: string;
}

export default class UIComponents extends React.Component<IProps, any> {
    formRef:any = React.createRef<FormInstance>();
    constructor(props) {
        super(props);
        this.state = {
            didlist: [],
            loading: false
        }
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 100
        };
        this.getDidlist(params);
    }
    // TODO 客商请求接口要保持前缀相同，后期需要修改，需要后端提供对应服务的客商查询接口
    getDidlist = async (params) => {
        const res: any = await agent.post('/third/dependency/did/page', params, this);
        if (!res.err) {
            const list = res.res.items.filter(item => item.remarkName && item.participantId)
            this.setState({
                didlist: list,
            })
        }
    }
    onClose = () => {
        this.props.onClose();
    }
    onSubmit = () => {
        this.formRef.current!.submit();
    }
    gotoDID = () => {
        let url = '';
        if (window.top) {
            url = window.top.location.host + DigitalAssetVerification.didPath
            window.top.location!.href = '//' + url
        } else {
            url = window.location.host + DigitalAssetVerification.didPath;
            window!.location!.href = '//' + url
        }
    }
    onFinish = async (values: any) => {
        this.setState({
            loading: true
        })
        const res = await this.props.onSuccess(values);
        if (res === false) {
            this.setState({
                loading: false
            })
        }
    }
    render() {
        const { didlist, loading } = this.state;
        return (
            <Modal
                title=" "
                onCancel={this.onClose}
                visible={true}
                footer={[
                    <Button type="primary" style={{ marginRight: 16 }} onClick={this.gotoDID}>前往客商管理</Button>,
                    <Button style={{ marginRight: 16 }} loading={loading} onClick={this.onSubmit}>发送</Button>
                ]}
            >
                <p>该公司未在客商管理中维护DID,请填写对方DID,或前往客商管理进行维护。</p>
                <Form
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    layout="vertical"
                >
                    <Form.Item
                        name='verifierPartyId'
                        label='我司对应DID'
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select >
                            {
                                didlist.map((item, key) => {
                                    return <Select.Option value={item.participantId} key={key}>{item.remarkName}:{item.participantId}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label='公司名称'>
                        <span>{this.props.verifierParty}</span>
                    </Form.Item>
                    <Form.Item
                        name='collectorPartyId'
                        label='对应DID'
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}