import { Col, Input, Modal, Radio, Row, Space } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'
import SmMaterialModal from '@/components/MaterialModal/smModalBox';
import style from './index.less'
import { PlusOutlined } from '@ant-design/icons';
interface Props {
    visible: boolean,
    onCancel: () => void,
    onOk: (v: any) => void,
    title: string,
    weCathType: 'img' | 'card',
    defaultData?: { appid: string, appPath: string, cardTitle: string, img: string, imgInfo: any },
    isOnUserId?: boolean
}
function WeChatImgCard(props: Props) {
    const { visible = false, title, onCancel, weCathType, onOk, isOnUserId = true } = props
    const [imgVisible, setImgVisible] = useState<boolean>(false)
    const [appid, setAppid] = useState<string>('')
    const [href, setHref] = useState<string>('')
    const [appPath, setAppPath] = useState<string>('')
    const [img, setImg] = useState<string>('')
    const [cardTitle, setCardTitle] = useState<string>('')
    const [imgInfo, setImgInfo] = useState<any>(null)
    const [userId, setUserId] = useState<any>(0)//小程序路径插入userID
    /**确定 */
    const handleOk = useCallback(() => {
        let newAp = appPath
        if (!!userId) {
            if (userId === 1) {
                newAp = !newAp.includes('#USER_ID#') ? newAp.replace('#QC_USER_ID#', '') + '#USER_ID#' : newAp
            }
            if (userId === 2) {
                newAp = !newAp.includes('#QC_USER_ID#') ? newAp.replace('#USER_ID#', '') + '#QC_USER_ID#' : newAp
            }
        } else {
            newAp = newAp.includes('#USER_ID#') || newAp.includes('#QC_USER_ID#') ? newAp?.replace(/(#USER_ID#)|(#QC_USER_ID#)/g, '') : newAp
        }
        let obj: any = isOnUserId ? {
            appid,
            appPath: newAp,
            img,
            imgInfo
        } : {
                appid,
                appPath,
                img,
                imgInfo
            }
        if (weCathType === 'img') {
            obj = { ...obj, href }
        } else {
            obj = { ...obj, cardTitle }
        }
        if (!obj?.imgInfo) {
            obj.imgInfo = props?.defaultData?.imgInfo
        }
        onOk(obj)
    }, [appid, href, appPath, img, weCathType, cardTitle, imgInfo, userId, isOnUserId])
    /**回填 */
    useEffect(() => {
        if (props?.defaultData) {
            setAppPath(props?.defaultData?.appPath)
            setAppid(props?.defaultData?.appid)
            setCardTitle(props?.defaultData?.cardTitle)
            setImg(props?.defaultData?.img)
            let path = props?.defaultData?.appPath
            setUserId(path.includes('#QC_USER_ID#') ? 2 : path.includes('#USER_ID#') ? 1 : 0)
        }
    }, [props?.defaultData])
    return <div>
        <Modal
            visible={visible}
            title={title}
            onCancel={onCancel}
            onOk={handleOk}
            maskClosable={false}
        >
            <Row gutter={[10, 20]}>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>AppId：</span>
                        <Input
                            placeholder={'填写小程序AppID，跳转小程序需与当前公众号绑定关联关系'}
                            size='small'
                            style={{ width: '100%' }}
                            value={appid}
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setAppid(event.target.value) }}
                        />
                    </Space>
                </Col>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>小程序路径：</span>
                        <Input
                            placeholder={'填写小程序路径，例如：pages/index'}
                            size='small'
                            style={{ width: '100%' }}
                            value={appPath}
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setAppPath(event.target.value) }}
                        />
                    </Space>
                </Col>
                {isOnUserId && <Col span={24}>
                    <Space className={style.row_style}>
                        <span>插入用户：</span>
                        <Radio.Group onChange={(e: any) => { setUserId(Number(e.target.value)) }} value={userId} >
                            <Radio value={1}>普通用户</Radio>
                            <Radio value={2}>趣程用户</Radio>
                            <Radio value={0}>否</Radio>
                        </Radio.Group>
                    </Space>
                </Col>}
                <Col span={24}>
                    {
                        weCathType === 'img' ?
                            <Space className={style.row_style}>
                                <span>备用网页：</span>
                                <Input
                                    placeholder={'备用网页，以http://或https://开头'}
                                    size='small'
                                    style={{ width: '100%' }}
                                    value={href}
                                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setHref(event.target.value) }}
                                />
                            </Space> :
                            <Space className={style.row_style}>
                                <span>卡片标题：</span>
                                <Input
                                    placeholder={'请填写卡片标题'}
                                    size='small'
                                    style={{ width: '100%' }}
                                    value={cardTitle}
                                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setCardTitle(event.target.value) }}
                                />
                            </Space>
                    }

                </Col>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>选择图片：</span>
                        <div onClick={() => setImgVisible(true)} style={{ width: '100%', height: 200, border: '1px dashed #d8d8d8', position: 'relative', cursor: 'pointer' }}>
                            {
                                img ?
                                    <img src={img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                    :
                                    <span className={`${style.add} ${img ? style.pos : ''} `}>
                                        <PlusOutlined style={{ fontSize: 32 }} />
                                    </span>
                            }
                          {weCathType !== 'img' &&  <strong style={{color:'red'}}>注：图片尺寸1080 * 864，不然无法创建成功！</strong>}
                        </div>
                    </Space>
                    {
                        imgVisible && <SmMaterialModal
                            visible={imgVisible}
                            onCancel={() => setImgVisible(false)}
                            title='选择图片'
                            onOk={(props: any) => {
                                console.log('props===>', props)
                                let obj: any = {}
                                if (props?.mediaId) {//微信素材
                                    obj.wxMediaId = props?.id
                                    obj.thumbUrl = props?.url
                                } else {
                                    obj.thumbUrl = props?.url
                                }
                                setImg(obj?.thumbUrl)
                                setImgInfo(props)
                                setImgVisible(false)
                            }}
                            mediaType={1}
                            isShowWx={false}
                            isAllData
                            noFile={false}
                        />
                    }
                </Col>
            </Row>
        </Modal>
    </div>
}
export default WeChatImgCard