import * as React from 'react';
import { Table, message, Form, Input, Select, Modal } from 'kts-xui';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import agent from '../Server';
const { confirm } = Modal;
/** Props接口 */
interface IProps {
    onSuccess: () => void;
    onClose: () => void;
    // onSuccess: (value) => Promise<boolean>;
    // verifierParty: string;
    /**
     * 下拉选择列表
     */
    data: any[];
    /**
     * 勾选列表
     */
    list: any[];
}

export default class UIComponents extends React.Component<IProps, any> {
    formRef:any = React.createRef<FormInstance>();
    constructor(props: IProps) {
        super(props);
        this.state = {
            didlist: props.data,
            sublist: props.list,
            list: [],
        }
    }
    componentDidMount() {
        this.getlist();
    }
    getlist = async () => {
        const res: any = await agent.get('/third/dependency/getParticipantList', {}, this);
        if (res.err) {
            return;
        } else {
            this.setState({
                list: res.res
            })
        }
    }
    onClose = () => {
        this.props.onClose();
    }
    onSuccess=()=>{
        this.props.onSuccess();
    }
    onSubmit = () => {
        this.formRef.current!.submit();
    }
    submitOne = async (values) => {
        const data = {
            ...values,
            invoiceUuid: this.state.sublist[0]
        }
        const res: any = await agent.post('/collector/asset/submitOne', data, this);
        if (res.err) {
            return;
        } else {
            message.success('操作成功');
            this.onSuccess();
        }
    }
    submitBatch = async (values) => {
        const data = {
            ...values,
            invoiceUuidList: this.state.sublist
        }
        const res: any = await agent.post('/collector/asset/submitBatch', data, this);
        if (res.err) {
            return;
        } else {
            //验证通过直接调用提交接口
            if (res.res.checkPass) {
                const list = res.res.invoiceUuidList;
                const data = {
                    ...values,
                    invoiceUuidList: list
                };
                this.onFinalSubmit(data);
            } else {
                //验证部分数据失败，弹框提示
                const list = res.res.invoiceUuidList;
                const total = this.state.sublist.length;
                confirm({
                    title: '重复提交',
                    content: <p>您已勾选的{total}行发票数据，有{total - list.length}行已经提交过，无法重复提交，是否提交剩余发票
                    <a href={res.res.downloadUrl} target="_blank">下载重复发票信息</a>
                    </p>,
                    onOk: () => {
                        const data = {
                            ...values,
                            invoiceUuidList: list
                        };
                        this.onFinalSubmit(data);
                    },
                });
            }
        }
    }
    onFinish = async (values: any) => {
        if (this.state.sublist.length === 1) {
            this.submitOne(values);
        } else {
            this.submitBatch(values);
        }

    }
    onFinalSubmit = async (data) => {
        const res: any = await agent.post('/collector/asset/submitBatchConfirm', data, this);
        if (res.err) {
            return;
        } else {
            message.success('操作成功');
            this.onSuccess();
        }
    }
    onDidChange = (value) => {
        const { didlist } = this.state;
        const found = didlist.find(item => item.id === value);
        this.formRef.current?.setFieldsValue({
            verifierPartyId: found.verifierPartyId,
            collectorPartyId: found.collectorPartyId,
            verifierName: found.verifierName
        })
    }
    render() {
        const { didlist, list } = this.state;
        const defaultValue = list && list.find(item => item.isDefault);
        return (
            <Modal
                title=""
                onCancel={this.onClose}
                visible={true}
                onOk={this.onSubmit}
            >
                <Form
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    layout="vertical"
                >
                    {didlist.length > 0 && <Form.Item
                        name='verifierName'
                        label='核验方公司名称'
                        rules={[{ required: true }]}
                    >
                        <Select onChange={this.onDidChange}>
                            {
                                didlist.map((item, key) => {
                                    return <Select.Option value={item.id} key={item.id}>{item.verifierName}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    }
                    {didlist.length === 0 &&
                        <Form.Item
                            name='verifierName'
                            label='核验方公司名称'
                            rules={[{ required: true }]}
                        >
                            <Input />
                        </Form.Item>
                    }
                    <Form.Item
                        label='对应DID'
                        name='verifierPartyId'
                        rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name='collectorPartyId'
                        label='我司对应DID'
                        initialValue={defaultValue && defaultValue.participantId}
                        rules={[{ required: true }]}
                    >
                        <Select style={{ width: '100%' }}>
                            {list && list.map((item) => {
                                return <Select.Option value={item.participantId}>{item.participantId}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                </Form>
                <div>可以前往业务规则设置，配置默认提交方</div>
            </Modal>
        );
    }
}