import React, { useCallback, useMemo, useState } from 'react'
import { Divider, Input, InputNumber, Tabs, Tag } from 'antd'
import style from './index.less'
import { PlusOutlined } from '@ant-design/icons';
import SmMaterialModal from '@/components/MaterialModal/smModalBox';
import { useModel } from 'umi';
import WxSelect from '@/components/WxSelect';
const { TabPane } = Tabs;

let Right = React.memo((props: any) => {
    const { drawerDispatch, drawerState: { actionId, dataArr, sort } } = useModel('useOperating.useMaterialDrawer', model => ({
        drawerDispatch: model.dispatch,
        drawerState: model.state
    }))
    const { show, hide, state: { visible } } = useModel('useOperating.useMaterialModal')
    const [digest, setDigest] = useState<string>('') //摘要
    const [authorStr, setAuthor] = useState<string>('') //作者
    const [contentSourceUrlStr, setContentSourceUrl] = useState<string>('') //原文链接

    //点击上传打开弹窗获取数据
    let upload = useCallback(() => {
        show()
    }, [])
    //跟随选择更新图片
    const defaultValue: any = useMemo(() => {
        let obj = {}
        dataArr.forEach((item: any) => {
            if (item.menuId === actionId) {
                setDigest(item.digest || '')
                setAuthor(item.author || '')
                setContentSourceUrl(item.contentSourceUrl || '')
                obj = item
            }
        })
        return obj
    }, [dataArr, actionId, sort])
    //字数并插入dataArr
    let strLeng = useCallback((v: React.ChangeEvent<HTMLTextAreaElement>) => {
        drawerDispatch({ type: 'pushData', params: { menuId: actionId, digest: v.target.value, } })
        setDigest(v.target.value)
    }, [actionId])
    //作者插入
    let author = useCallback((v: React.ChangeEvent<HTMLInputElement>) => {
        drawerDispatch({ type: 'pushData', params: { menuId: actionId, author: v.target.value, } })
        setAuthor(v.target.value)
    }, [actionId])
    //原文链接插入
    let contentSourceUrl = useCallback((v: React.ChangeEvent<HTMLTextAreaElement>) => {
        drawerDispatch({ type: 'pushData', params: { menuId: actionId, contentSourceUrl: v.target.value } })
        setContentSourceUrl(v.target.value)
    }, [actionId])
    return <>
        <Tabs type="line">
            <TabPane tab="发布" key="1" className={style.right_fb}>
                <div className={style.right_img}>
                    {
                        actionId === 1 ? <span>封面（建议尺寸900*500像素）</span> : <span>封面（建议尺寸200*200像素）</span>
                    }
                    <span
                        className={`${style.upload} ${actionId === 1 ? style.max : style.min}`}
                        onClick={upload}
                    >
                        {
                            (defaultValue?.thumbMediaUrl || defaultValue?.thumbUrl) && <img src={defaultValue?.thumbMediaUrl || defaultValue?.thumbUrl} alt="" />
                        }
                        <span className={`${style.add} ${(defaultValue?.thumbMediaUrl || defaultValue?.thumbUrl) && style.pos}`}>
                            <PlusOutlined style={{ fontSize: 16 }} />
                            上传封面
                        </span>
                    </span>
                    {/* <span><Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={false} />封面显示在正文</span> */}
                </div>
                <Divider dashed />
                <div className={style.right_textArea}>
                    <span>摘要(选填)</span>
                    <Input.TextArea rows={5} allowClear maxLength={120} onChange={strLeng} value={digest} />
                    <span>{digest.length}/120</span>
                </div>
                <Divider dashed />
                <div className={style.right_author}>
                    <span>作者(选填)</span>
                    <Input allowClear onChange={author} value={authorStr} />
                </div>
                <Divider dashed />
                <div className={style.right_src}>
                    <span>原文链接(必填)</span>
                    <Input.TextArea rows={2} placeholder='请勿添加其他公众号的主页链接' allowClear onChange={contentSourceUrl} value={contentSourceUrlStr} />
                </div>
                <div className={style.right_src} style={{ marginTop: 10 }}>
                    <span>排序(必填)<Tag color='warning'>数值越大越靠前</Tag></span>
                    <InputNumber
                        style={{ width: '100%' }}
                        value={sort}
                        placeholder='请输入序号, 数值越大越靠前'
                        onChange={(e: number) => {
                            drawerDispatch({ type: 'setSort', params: { sort: e } })
                        }}
                    />
                </div>
                <div>
                    <WxSelect />
                </div>
            </TabPane>
        </Tabs>
        {
            visible && <SmMaterialModal
                visible={visible}
                onCancel={hide}
                title='选择图片'
                onOk={(props: any) => {
                    console.log(props)
                    let obj: any = {}
                    if (props?.mediaId) {
                        obj.wxMediaId = props?.id
                        obj.thumbUrl = props?.url
                    } else {
                        obj.thumbUrl = props?.url
                    }
                    drawerDispatch({ type: 'pushData', params: { menuId: actionId, thumbMediaUrl: props.url, ...obj } })
                    hide()
                }}
                mediaType={1}
                isShowWx={props?.isShowWx}
                isAllData
                noFile={false}
            />
        }
    </>
})
export default Right