import React, {Fragment, useEffect, useState} from 'react';
import {Button, Image, Modal, QRCode} from 'antd';
import { v4 as uuidv4 } from 'uuid';

const ShareOption = (props:{taskId:string}    ) => {
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const [buttonIndex, setButtonIndex] = useState(0);
    const [qrCodeValue, setQrCodeValue] = useState<string>("-");
    const [qrCodeStatus, setQrCodeStatus]=useState<'active' | 'expired' | 'loading' | 'scanned'>("active");

    const generateQrcode =()=>{

    }
    const showModal = () => {
        setOpen(true);
    };

    const handleOk = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            setOpen(false);
        }, 3000);
    };

    const handleCancel = () => {
        setOpen(false);
    };
    useEffect(() => {
        // 分享人必须有权限
        const clientId: string = uuidv4();
        let qrCodeData={
            taskId:props.taskId,pass:clientId,local:"马上行计划管理",opType:"SHARE_OPTION"
        }
        setQrCodeValue(JSON.stringify(qrCodeData))
    }, []);

    return (
        <Fragment>
            <Button type="primary" onClick={showModal}>
                分享
            </Button>
            <Modal
                open={open}
                title="Title"
                onOk={handleOk}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        返回
                    </Button>,
                    <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
                        使用二维码
                    </Button>,
                    <Button
                        key="link"
                        href="https://google.com"
                        target="_blank"
                        type="primary"
                        loading={loading}
                        onClick={handleOk}
                    >
                        使用连接
                    </Button>,
                ]}
            >
                {buttonIndex==1&& <div>
                    <div>
                        <div className="title">微信小程序二维码</div>
                        <Image width={300} src="/static/pc-Web.png"/>
                        <Button>下载</Button>
                    </div>
                    <div>
                        <div className="title">小程序扫描二维码，有效期7天</div>
                        <QRCode value={qrCodeValue} size={300} status={qrCodeStatus} onRefresh={generateQrcode}/>
                        <Button>下载</Button>
                    </div>
                </div>}

            </Modal>
        </Fragment>
    );
};
export default ShareOption;