import useCopy from '@/Hook/useCopy'
import { Col, Drawer, Input, Row, Button, Modal, Space, message, Select, Radio, Divider } from 'antd'
import React, { useState, useCallback, useEffect } from 'react'
import createhtml from './html'
import createVideoHtml from './videoHtml'
import SelectImg from '../selectImg'
import { addPage, createWXLink } from '@/services/launch/page'
import { useAjax } from '@/Hook/useAjax'
import { useModel } from 'umi'
import { PlusOutlined } from '@ant-design/icons'
import createCartoonHtml from './cartoonHtml'
import JSMpeg from 'jsmpeg-player';
type Props = {
    visible: boolean,
    onHide: () => void,
    editData: any,
    initEdit: () => void,
    getList: () => void,
    userList: any,
    getWeAppList: any[],
    getGzhList: any[]
}

function CreactPage(props: Props) {
    const { visible, onHide, editData, initEdit, getList, userList, getWeAppList, getGzhList } = props
    const [linkVisble, setLinkVisble] = useState(false)//生成小程序连接弹窗
    const { copy } = useCopy()//复制插件
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [codeImg, setCodeImg] = useState('')//二维码图片
    const [codeImgShow, setCodeImgShow] = useState(false)

    const [wzUrl, setWzUrl] = useState('')//文章url
    const [wxUrl, setWxUrl] = useState('')//生成的微信URL

    const addPages = useAjax((params) => addPage(params))//添加页面
    const getWxLink = useAjax((params) => createWXLink(params))//创建小程序连接

    const [acType, setAcType] = useState(1)
    const currentUser = useModel('@@initialState', model => model.initialState?.currentUser)
    const [data, setData] = useState<any>({//数据
        sharePageName: '',//落地页名称
        mpAppId: undefined,//公众号appid
        mpAppName: '',//公众号名称
        title: '',//标题
        topImg: '',//顶部图片
        mpImg: '',//公众号头像
        wxUrl: '',//文章地址
        appConfigIdList: [],//关联小程序
        articleMpAppId: '',//使用的公众号
        pitchLinkType: 1,//1小程序 2快应用
        fastAppUrl: '',//快应用地址
        materialType: 1,//顶部素材类型 1图 2视频 3漫画
        videoUrl: '',//视频地址
        cartoonUrl: '',//漫画地址
        expand: {
            guideImg: '',//引导图片地址
            btnText: '',//按钮文字
            coverImg:'',//视频首针图
        },//json字符串 自定义参数内容
        text1: {
            title: '',
            content: ``,
        },
        text2: {
            title: '',
            content: ``,
        },
        footer: {//页脚
            gs1: '',
            gs2: ''
        }
    })
    const [mpImgShow, setMpImgShow] = useState(false)
    const [guideImgShow, setGuideImgShow] = useState(false)
    const [mpVideoShow, setMpVideoShow] = useState(false)
    const [mpCartoonShow, setMpCartoonShow] = useState(false)
    const [coverImgShow, setCoverImgShow] = useState(false)
    // ts
    useEffect(()=>{
        let jsmpeg:any= null
        if(data?.videoUrl){
            if(data?.videoUrl?.includes('ts')){
                jsmpeg  = new JSMpeg.VideoElement('#jsmpeg',data?.videoUrl)
            }
        }
        return ()=>{
            if(jsmpeg){
                jsmpeg.destroy()
            }
        }
    },[data.videoUrl])
    // 编辑自动回填
    useEffect(() => {
        if (editData) {
            let content = JSON.parse(editData?.content)
            setData({
                id: editData?.id,
                sharePageName: editData?.sharePageName,
                mpAppId: editData?.mpAppId,
                mpAppName: editData?.mpAppName,
                title: editData?.title,
                topImg: editData?.topImg,
                wxUrl: editData?.wxUrl,
                mpImg: editData?.mpImg,
                text1: content?.text1,
                text2: content?.text2,
                footer: JSON.parse(editData?.footer),
                appConfigIdList: editData?.appConfigIdList || [],
                articleMpAppId: editData?.articleMpAppId || '',
                pitchLinkType: editData?.pitchLinkType || 1,
                fastAppUrl: editData?.fastAppUrl,
                materialType: editData?.materialType || 1,//顶部素材类型 1图 2视频 3漫画
                videoUrl: editData?.videoUrl,//视频地址
                cartoonUrl: editData?.cartoonUrl,//漫画地址
                expand: editData?.expand ? JSON.parse(editData?.expand) : { guideImg: '', btnText: '',coverImg:'' }
            })
            if (editData?.appConfigIdList) {
                setAcType(1)
            }
            if (editData?.articleMpAppId) {
                setAcType(2)
            }
        }
    }, [editData])
    // 生成html
    const handelHtml = useCallback((isLock) => {
        let { text1, text2, topImg, title, wxUrl, mpImg, mpAppId, mpAppName, sharePageName, appConfigIdList, articleMpAppId, pitchLinkType, fastAppUrl, materialType, videoUrl, cartoonUrl, expand } = data
        if (materialType === 1 && !topImg) {
            message.error('请选择顶部图片！')
            return
        }
        if (materialType === 2 && !videoUrl) {
            message.error('请选择顶部视频！')
            return
        }
        if (materialType === 3 && !cartoonUrl) {
            message.error('请选择漫画图片！')
            return
        }
        if (!title) {
            message.error('请输入标题！')
            return
        }
        if (pitchLinkType === 1 && !wxUrl) {
            message.error('请输入公众号链接链接！')
            return
        }
        if (pitchLinkType === 1 && !wxUrl.includes('https://mp.weixin.qq.com/s/')) {
            message.error('公众号链接以https://mp.weixin.qq.com/s/开头！')
            return
        }
        if (pitchLinkType === 1 && !mpAppId) {
            message.error('请选择公众号！')
            return
        }
        if (pitchLinkType === 1 && !mpAppName) {
            message.error('请输入公众号名称！')
            return
        }
        if (!sharePageName) {
            message.error('请输入落地页名称！')
            return
        }
        if (pitchLinkType === 1 && acType === 1 && appConfigIdList && appConfigIdList?.length === 0) {
            message.error('最少选择一个关联小程序！')
            return
        }
        if (pitchLinkType === 1 && acType === 2 && !articleMpAppId) {
            message.error('最少选择一个使用的公众号！')
            return
        }
        if (pitchLinkType === 2 && !fastAppUrl) {
            message.error('请输入快应用链接！')
            return
        }
        let arr: any = [text1, text2]
        let div = document.createElement('div')
        arr?.forEach((item: { title: string, content: string }, index: number) => {
            if (item.title && item.content) {
                let ul = document.createElement('ul')
                div.appendChild(ul)
                let li: any = document.createElement('li')
                li.style = "text-align: center;text-indent:0rem"
                li.innerHTML = `<span style="font-size:24px"><strong>${item?.title}</strong></span>`
                ul.appendChild(li)
                let cArr = item?.content?.replace(/\n+/ig, '@').split('@')
                // console.log(cArr)
                cArr.forEach((str) => {
                    let cli: any = document.createElement('li')
                    cli.innerHTML = `<span style="font-size:24px">${str}</span>`
                    ul.appendChild(cli)
                })
            }
        })
        let html = null
        switch (materialType) {
            case 1://1图 
                html = createhtml({
                    title: data.title,
                    topImg: data.topImg,
                    wxUrl: data.wxUrl,
                    content: div.innerHTML,
                    gs1: data.footer.gs1,
                    gs2: data.footer.gs2,
                    mpImg: data.mpImg,
                    mpName: data.mpAppName,
                    mpAppId: data.mpAppId,
                    isLock: isLock ? editData?.htmlUrl ? editData?.htmlUrl : '' : '',
                    pitchLinkType,
                    fastAppUrl,
                    expand
                })
                break;
            case 2://2视频
                html = createVideoHtml({
                    title: data.title,
                    wxUrl: data.wxUrl,
                    content: div.innerHTML,
                    gs1: data.footer.gs1,
                    gs2: data.footer.gs2,
                    mpImg: data.mpImg,
                    mpName: data.mpAppName,
                    mpAppId: data.mpAppId,
                    isLock: isLock ? editData?.htmlUrl ? editData?.htmlUrl : '' : '',
                    pitchLinkType,
                    fastAppUrl,
                    videoUrl,
                    expand
                })
                break;
            case 3:// 3漫画
                html = createCartoonHtml({
                    title: data.title,
                    wxUrl: data.wxUrl,
                    content: div.innerHTML,
                    gs1: data.footer.gs1,
                    gs2: data.footer.gs2,
                    mpImg: data.mpImg,
                    mpName: data.mpAppName,
                    mpAppId: data.mpAppId,
                    isLock: isLock ? editData?.htmlUrl ? editData?.htmlUrl : '' : '',
                    pitchLinkType,
                    fastAppUrl,
                    cartoonUrl,
                    expand
                })
                break;
            default:
                break;
        }

        if (isLock) {//预览
            handlepreview(html)
        } else {//提交
            let param = {
                id: data?.id,
                userName: currentUser?.name,
                userId: currentUser?.userId,
                wxUrl: data.wxUrl,
                topImg: data.topImg,
                mpImg: data.mpImg,
                title: data?.title,
                mpAppId: data?.mpAppId,
                mpAppName: data?.mpAppName,
                sharePageName: data?.sharePageName,
                content: JSON.stringify({ text1: data.text1, text2: data.text2 }),
                footer: JSON.stringify({ gs1: data?.footer?.gs1, gs2: data?.footer?.gs2 }),
                htmlStr: html,
                appConfigIdList,
                pitchLinkType,
                fastAppUrl,
                materialType: data?.materialType,//顶部素材类型 1图 2视频 3漫画
                videoUrl: data?.videoUrl,//视频地址
                cartoonUrl: data?.cartoonUrl,//漫画地址
                expand: JSON.stringify(expand)//自定义JSON参数
            }
            if (acType === 2) {
                delete param['appConfigIdList']
                param['articleMpAppId'] = articleMpAppId
            }
            if (!param?.id) {
                delete param.id
            }
            addPages.run(param).then(res => {
                if (res) {
                    over()
                    getList()
                }
            })
        }
    }, [data, currentUser, editData, acType])

    // 预览
    const handlepreview = useCallback((html) => {
        fetch('http://47.99.157.216:8020/node/html/createHtmlLink', {
            headers: { 'Content-Type': 'application/json;charset=UTF-8' },
            method: 'post',
            body: JSON.stringify({ htmlStr: html })
        }).then(async res => {
            return await res.json()
        }).then((js: any) => {
            if (js?.code === 200) {
                setCodeImgShow(true)
                setCodeImg(js.img)
            }
        })
    }, [])
    // over
    const over = useCallback(() => {
        onHide()
        initEdit()
    }, [])
    // 生成小程序连接
    const wxLink = useCallback(() => {
        if (wzUrl && wzUrl.includes('https://mp.weixin.qq.com/s/')) {
            let code = wzUrl.replace('https://mp.weixin.qq.com/s/', '')?.replace(/\s/ig, '')
            getWxLink.run({ code }).then(res => {
                if (res) {
                    setWxUrl(res)
                }
            })
        } else {
            message.error('请输入正确的文章地址，例：https://mp.weixin.qq.com/s/ApDM-W8tKA24WGa4D4RwYg')
        }

    }, [wzUrl])
    return <Drawer
        visible={visible}
        onClose={over}
        title='落地页'
        width={1000}
        footer={<div style={{ display: 'flex', justifyContent: 'center' }}>
            <Space>
                {editData?.htmlUrl && <Button onClick={() => handelHtml(true)} >预览</Button>}
                <Button onClick={() => handelHtml(false)} loading={addPages.loading}>确定</Button>
            </Space>
        </div>}
    >
        <Row gutter={[20, 20]}>
            <Col span={24} >
                <Divider  plain>
                    <h3>落地页名称</h3>
                </Divider>
                <Input
                    placeholder='请输入落地页名称（用于记录本次落地页）'
                    value={data.sharePageName}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, sharePageName: value })
                    }}
                    allowClear
                />
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>落地页标题</h3>
                </Divider>
                <Input
                    placeholder='请输入落地页标题（标题会展示在标签页上）'
                    allowClear
                    value={data.title}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, title: value })
                    }}
                />
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>顶部素材</h3>
                </Divider>
                <Radio.Group onChange={(e) => {
                    let value = e.target.value
                    setData({ ...data, materialType: value })
                }} value={data?.materialType}>
                    <Radio value={1}>图片</Radio>
                    <Radio value={2}>TS视频</Radio>
                    <Radio value={3}>漫画</Radio>
                </Radio.Group>
            </Col>
            {
                data?.materialType === 1 && <Col span={24}>
                    {
                        data?.topImg ? <div>
                            <img src={data.topImg} style={{ width: 200 }} onClick={() => {
                                setSelectImgVisible(true)
                            }} />
                        </div> : <div onClick={() => {
                            setSelectImgVisible(true)
                        }} >
                            <span style={{ width: 100, height: 100, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                顶部图片
                                <PlusOutlined style={{ fontSize: 30 }} />
                            </span>
                        </div>
                    }
                </Col>
            }
            {
                data?.materialType === 2 && <Col span={24} style={{ display: 'flex', alignItems: 'center',justifyContent:'left' }}>
                    {
                        data?.videoUrl ? <div onClick={() => {
                            setMpVideoShow(true)
                        }}>
                            {
                                data?.videoUrl?.includes('ts') ?<div id="jsmpeg" style={{width:325,minHeight:750}}></div>:<video src={data.videoUrl} style={{ width: '30%' }} loop controls />
                            }
                        </div> : <div onClick={() => {
                            setMpVideoShow(true)
                        }} >
                            <span style={{ width: 100, height: 100, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                顶部视频
                                <PlusOutlined style={{ fontSize: 30 }} />
                            </span>
                        </div>
                    }
                     {
                        data?.expand?.coverImg ? <div style={{paddingLeft:20}}>
                            <img src={data?.expand?.coverImg } style={{ width: 200 }} onClick={() => {
                                setCoverImgShow(true)
                            }} />
                        </div> : <div  style={{paddingLeft:20}} onClick={() => {
                            setCoverImgShow(true)
                        }} >
                            <span style={{ width: 150, height: 100, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                视频封面图
                                <PlusOutlined style={{ fontSize: 30 }} />
                            </span>
                        </div>
                    }
                </Col>
            }
            {
                data?.materialType === 3 && <Col span={24}>
                    {
                        data?.cartoonUrl ? <div onClick={() => {
                            setMpCartoonShow(true)
                        }} style={{
                            display: 'flex',
                            flexFlow: 'column',
                            overflowY: 'auto',
                            height: '400px',
                            alignItems: 'center',
                            width: '300px',
                            margin: 'auto'
                        }}>
                            {
                                data?.cartoonUrl.split(',')?.map((img: any) => {
                                    return <img src={img} style={{ width: 250 }} key={img} />
                                })
                            }
                        </div> : <div onClick={() => {
                            setMpCartoonShow(true)
                        }} >
                            <span style={{ width: 100, height: 100, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                漫画
                                <PlusOutlined style={{ fontSize: 30 }} />
                            </span>
                        </div>
                    }
                </Col>
            }
            <Col span={24}>
                <Divider  plain>
                    <h3>第一章标题内容</h3>
                </Divider>
                <Input
                    placeholder='第一章标题（选填，填了第一章节标题必须填第一章节内容）'
                    allowClear
                    value={data?.text1?.title}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, text1: { ...data.text1, title: value } })
                    }}
                />
            </Col>
            <Col span={24}>
                <Input.TextArea
                    placeholder='第一章内容（选填，填了第一章节内容必须填第一章节标题）'
                    allowClear
                    rows={10}
                    value={data?.text1?.content}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, text1: { ...data.text1, content: value } })
                    }}
                />
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>第二章标题内容</h3>
                </Divider>
                <Input
                    placeholder='第二章标题（选填，填了第二章节标题必须填第二章节内容）'
                    allowClear
                    value={data?.text2?.title}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, text2: { ...data.text2, title: value } })
                    }}
                />
            </Col>
            <Col span={24}>
                <Input.TextArea
                    placeholder='第二章内容（选填，填了第二章节内容必须填第二章节标题）'
                    allowClear
                    rows={10}
                    value={data?.text2?.content}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, text2: { ...data.text2, content: value } })
                    }}
                />
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>结尾引导图片</h3>
                </Divider>
                {
                    data?.expand?.guideImg ? <div>
                        <img src={data?.expand?.guideImg} style={{ width: 200 }} onClick={() => {
                            setGuideImgShow(true)
                        }} />
                    </div> : <div onClick={() => {
                        setGuideImgShow(true)
                    }} >
                        <span style={{ width: 100, height: 100, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            引导图片
                            <PlusOutlined style={{ fontSize: 30 }} />
                        </span>
                    </div>
                }
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>底部公司名称（头条过审使用）</h3>
                </Divider>
                <Input
                    placeholder='分公司名称（展示在页面底部）'
                    allowClear
                    style={{ width: 'calc(45%)' }}
                    value={data?.footer?.gs1}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, footer: { ...data.footer, gs1: value } })
                    }}
                />
                <Input
                    placeholder='主公司名称（展示在页面底部）'
                    allowClear
                    style={{ width: 'calc(45%)', marginLeft: '5%' }}
                    value={data?.footer?.gs2}
                    onChange={(e: any) => {
                        let value = e.target.value
                        setData({ ...data, footer: { ...data.footer, gs2: value } })
                    }}
                />
            </Col>
            <Divider  plain>
                <h3>底部浮选公众号头像+名称（头条过审使用）</h3>
            </Divider>
            <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
                {
                    data.mpImg ? <div>
                        <img src={data.mpImg} style={{ width: 50, height: 50, borderRadius: '50%', objectFit: 'cover' }} onClick={() => {
                            setMpImgShow(true)
                        }} />
                    </div> : <div onClick={() => {
                        setMpImgShow(true)
                    }} >
                        <span style={{ width: 50, height: 50, border: '1px solid #efefef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            头像
                            <PlusOutlined style={{ fontSize: 15 }} />
                        </span>
                    </div>

                }
                <Select
                    style={{ minWidth: 200, marginLeft: 20 }}
                    allowClear
                    onChange={(value) => {
                        let item = userList?.filter((i: { appid: any }) => i.appid === value)[0]
                        setData({ ...data, mpAppId: value, mpAppName: item?.nickName })
                        // setParams({ ...params, mpAppId: value, mpAppName: item?.nickName })
                    }}
                    value={data?.mpAppId}
                    showSearch
                    filterOption={(input, option: any) =>
                        option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0
                    }
                    placeholder='选择投放公众号'
                >
                    {
                        userList?.map((user: any) => {
                            return <Select.Option key={user?.appid} value={user?.appid}>{user?.nickName}</Select.Option>
                        })
                    }
                </Select>
            </Col>
            <Col span={24} >
                <Divider  plain>
                    <h3>底部按钮文字</h3>
                </Divider>
                <Input
                    style={{ width: 300 }}
                    placeholder='自定义按钮文字，默认继续阅读下一章'
                    allowClear
                    value={data.expand.btnText}
                    onChange={(e) => {
                        let value = e.target.value
                        setData({ ...data, expand: { ...data.expand, btnText: value } })
                    }}
                />
            </Col>
            <Col span={24}>
                <Divider  plain>
                    <h3>投放链路，对应按钮点击后跳转的方式</h3>
                </Divider>
                <Radio.Group onChange={(e) => {
                    let value = e.target.value
                    setData({ ...data, pitchLinkType: value })
                }} value={data?.pitchLinkType}>
                    <Radio value={1}>小程序链路</Radio>
                    <Radio value={2}>快应用链路</Radio>
                </Radio.Group>
            </Col>
            {
                data?.pitchLinkType === 1 ?
                    // 公众号
                    <>
                        <Col span={24}>
                            <Input.Group compact>
                                <Input
                                    style={{ width: 'calc(100% - 130px)' }}
                                    allowClear
                                    placeholder='请输入跳转投放公众号文章地址'
                                    value={data.wxUrl}
                                    onChange={(e: any) => {
                                        let value = e.target.value
                                        setData({ ...data, wxUrl: value.replace(/\s/ig, '') })
                                    }}
                                />
                                {/* <Button type='primary' onClick={() => { setLinkVisble(true) }}>生成小程序连接</Button> */}
                            </Input.Group>
                        </Col>
                        <Col span={24}>
                            <div style={{ marginTop: '20px' }}>
                                <Radio.Group onChange={(e) => {
                                    let value = e.target.value
                                    setAcType(value)
                                }} value={acType}>
                                    <Radio value={1}>使用小程序</Radio>
                                    <Radio value={2}>使用文章公众号</Radio>
                                </Radio.Group>
                                {
                                    acType === 1 ? <Select
                                        style={{ minWidth: 300, marginLeft: '5%' }}
                                        mode="multiple"
                                        allowClear
                                        onChange={(value) => {
                                            if (value.length > 3) {
                                                message.warning('最多只能选3个')
                                            } else {
                                                setData({ ...data, appConfigIdList: value })
                                            }
                                        }}
                                        value={data?.appConfigIdList}
                                        showSearch
                                        filterOption={(input, option: any) =>
                                            option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0
                                        }
                                        placeholder='选择关联小程序，最多3个，最少一个'
                                    >
                                        {
                                            getWeAppList?.map((app: any) => {
                                                return <Select.Option key={app?.id} value={app?.id} disabled={app?.useStatus === 1}>{app?.appName}</Select.Option>
                                            })
                                        }
                                    </Select> : <Select
                                        style={{ minWidth: 300, marginLeft: '5%' }}
                                        allowClear
                                        onChange={(value) => {
                                            setData({ ...data, articleMpAppId: value })
                                        }}
                                        value={data?.articleMpAppId}
                                        showSearch
                                        filterOption={(input, option: any) =>
                                            option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0
                                        }
                                        placeholder='选择公众号'
                                    >
                                        {
                                            getGzhList?.map((app: any) => {
                                                return <Select.Option key={app?.appId} value={app?.appId} disabled={app?.useStatus === 1}>{app?.appName}</Select.Option>
                                            })
                                        }
                                    </Select>
                                }
                            </div>
                        </Col>
                    </> :
                    <Col span={24}>
                        <Input.Group compact>
                            <Input
                                style={{ width: 'calc(100% - 130px)' }}
                                allowClear
                                placeholder='请输入快应用跳转地址'
                                value={data.fastAppUrl}
                                onChange={(e: any) => {
                                    let value = e.target.value
                                    setData({ ...data, fastAppUrl: value.replace(/\s/ig, '') })
                                }}
                            />
                        </Input.Group>
                    </Col>
            }
        </Row>
        {/* 生成小程序跳转连接 */}
        <Modal
            title='生成小程序跳转连接'
            visible={linkVisble}
            footer={null}
            onCancel={() => { setLinkVisble(false) }}
        >
            <Row gutter={[20, 20]}>
                <Col span={24}>
                    <Input.Group compact>
                        <Input style={{ width: 'calc(100% - 100px)' }} placeholder='请输入公众号文章链接,https://mp.weixin.qq.com/s/ApDM-W8tKA24WGa4D4RwYg' allowClear value={wzUrl} onChange={(e) => {
                            let value = e.target.value
                            setWzUrl(value)
                        }} />
                        <Button type="primary" onClick={wxLink} loading={getWxLink.loading}>生成</Button>
                    </Input.Group>
                </Col>
                <Col span={24}>
                    <Input.Group compact>
                        <Input style={{ width: 'calc(100% - 100px)' }} placeholder='生成结果' disabled value={wxUrl} />
                        <Button type="primary" onClick={() => { wxUrl && copy(wxUrl) }}>复制</Button>
                    </Input.Group>
                </Col>
                <Col span={24}><strong style={{ color: 'red' }}>
                    注：公众号必须关联小程序<br />
                    流程:登录公众号后台-小程序-小程序管理-添加-关联小程序<br />
                    小程序ID：wx4270e7e93e427d87<a onClick={() => {
                        copy('小程序ID：wx4270e7e93e427d87')
                    }}>复制</a>
                </strong></Col>
            </Row>
        </Modal>
        {/*预览弹窗  */}
        <Modal
            title='页面扫码预览'
            visible={codeImgShow}
            footer={null}
            onCancel={() => { setCodeImgShow(false) }}
        >
            <img src={codeImg} />
            <strong style={{ color: 'red' }}>
                注：页面有效时间1分钟<br />
            </strong>
        </Modal>
        {/* 图片上传 */}
        {
            selectImgVisible && <SelectImg visible={selectImgVisible} hideModel={() => { setSelectImgVisible(false) }} num={1} onChange={(value) => {
                if (value.length > 0) {
                    setData({ ...data, topImg: value[0].content })
                }
            }}></SelectImg>
        }
        {/* 头像图片上传 */}
        {
            mpImgShow && <SelectImg visible={mpImgShow} hideModel={() => { setMpImgShow(false) }} num={1} onChange={(value) => {
                console.log(value)
                if (value.length > 0) {
                    setData({ ...data, mpImg: value[0].content })
                }
            }}></SelectImg>
        }
        {/* 引导图片上传 */}
        {
            guideImgShow && <SelectImg visible={guideImgShow} hideModel={() => { setGuideImgShow(false) }} num={1} onChange={(value) => {
                console.log(value)
                if (value.length > 0) {
                    setData({ ...data, expand: { ...data.expand, guideImg: value[0].content } })
                }
            }}></SelectImg>
        }
        {/* 视频封面图片上传 */}
        {
            coverImgShow && <SelectImg visible={coverImgShow} hideModel={() => { setCoverImgShow(false) }} num={1} onChange={(value) => {
                console.log(value)
                if (value.length > 0) {
                    setData({ ...data, expand: { ...data.expand, coverImg: value[0].content } })
                }
            }}></SelectImg>
        }
        {/* 漫画图片上传 */}
        {
            mpCartoonShow && <SelectImg visible={mpCartoonShow} hideModel={() => { setMpCartoonShow(false) }} editData={data?.cartoonUrl?.split(',').map((i: any) => ({ content: i }))} num={100} onChange={(value) => {
                if (value.length > 0) {
                    let str = ''
                    for (let img of value) {
                        if (str && str?.length > 0) {
                            str += ',' + img?.content
                        } else {
                            str += img?.content
                        }
                    }
                    console.log('str', str)
                    setData({ ...data, cartoonUrl: str })
                }
            }}></SelectImg>
        }
        {/* 视频上传 */}
        {
            mpVideoShow && <SelectImg visible={mpVideoShow} hideModel={() => { setMpVideoShow(false) }} listParams={{ type: 2 }} num={1} onChange={(value) => {
                console.log(value)
                if (value.length > 0) {
                    setData({ ...data, videoUrl: value[0].content })
                }
            }}></SelectImg>
        }
    </Drawer >

}
export default CreactPage