import { message, Modal, Select, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"

interface Props {
    previewId: number | undefined, // 预览素材ID
    visible?: boolean,
    onClose?: () => void
}

/**
 * 本地素材预览
 * @returns 
 */
const PreviewLocalModal: React.FC<Props> = (props) => {

    /**==================*/
    const { previewId, visible, onClose } = props
    const { localPreview } = useModel('useOperating.useNews')
    const { searchFans } = useModel('useOperating.useFans')
    const { state: { filterWxs } } = useModel('useOperating.useWxGroupList')
    const [fansId, setFansId] = useState<number | undefined>() // 粉丝ID
    const [selectWx, setSelectWx] = useState<number>()
    const [fansData, setFansData] = useState<any[]>([])
    /**==================*/

    /**存放昵称 */
    const PreviewChange = (value: number, option: any) => {
        setFansId(value)
    }
    const onSearch = (val: string) => {
        searchFans.run({ mpId: selectWx, nickname: val })
    }

    useEffect(() => {
        let data = searchFans.data
        if (data?.length > 0) {
            setFansData(data?.map((item: any) => { return { id: item?.id, nickname: item?.nickname, headimgurl: item?.headimgurl } }))
        }
    }, [searchFans.data])

    const handleOk = () => {
        console.log(fansId, previewId, selectWx)
        if (!selectWx) {
            message.error('请选择公众号')
            return
        }
        if (!fansId) {
            message.error('请选择粉丝')
            return
        }
        localPreview.run({ sysMediaId: previewId, mpId: selectWx, fansId }).then(res => {
            if (res) {
                onClose && onClose()
            }
        })
    }

    return <Modal title="本地素材预览" okText='发送预览' confirmLoading={localPreview?.loading} visible={visible} onOk={handleOk} onCancel={() => onClose && onClose()}>
        <Select
            showSearch
            style={{ width: '100%', marginTop: 15 }}
            placeholder="选择公众号"
            optionFilterProp="children"
            onChange={(value) => { setSelectWx(value); setFansId(undefined); setFansData([]) }}
            allowClear
            filterOption={(input, option) =>
                option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            value={selectWx}
        >
            {filterWxs?.map((item: any) => <Select.Option value={item?.id} key={item?.id}>{item?.nickName}</Select.Option>)}
        </Select>
        <Select
            showSearch
            style={{ margin: '10px 0', width: '100%' }}
            placeholder="请输入微信号名称自动模糊搜索匹配"
            optionFilterProp="children"
            onChange={PreviewChange}
            onSearch={onSearch}
            allowClear={true}
            disabled={!selectWx}
            value={fansId}
        >
            {
                fansData?.map((item: { id: number, nickname: string, headimgurl: string }) => {
                    return <Select.Option key={item.id} value={item.id}>
                        <img src={item?.headimgurl} alt="" style={{ width: 20 }} />&nbsp;{item?.nickname}
                    </Select.Option>
                })
            }
        </Select>
        <Tag color='warning'>预览功能仅用于公众号查看文章效果，不适用于公众传播，预览链接会在短期内失效</Tag>
    </Modal>
}

export default React.memo(PreviewLocalModal)