import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined } from '@ant-design/icons'
import { Badge, Empty, message, Popconfirm } from 'antd'
import React, { useCallback, useRef } from 'react'
import { useModel } from 'umi'
import style from './synthetic.less'

/**合成器 */
let offset = { topRight: [-42, 50], topLeft: [-8, 50], bottomRight: [-42, 0], bottomLeft: [-8, 0] }
function Synthetic(props: { show: any }) {
    const divRef: { current: HTMLDivElement | null } = useRef(null)
    const { dispatchDrawer } = useModel('useOperating.useMaterialDrawer', model => ({ dispatchDrawer: model.dispatch }))
    const { state, dispatch } = useModel('useOperating.useSynthetic')
    const { isHover, fx, dataArr, actionId } = state
    /**合成事件 */
    let handleOk = useCallback(() => {
        if (dataArr.length > 0) {
            props.show()
            // dispatchDrawer({ type: 'initData', params: { data: { dataArr, actionId: 1 } } })
            dispatchDrawer({ type: 'actionData', params: { data: { dataArr: dataArr, actionId: 1} } })//设置编辑器的内容
        } else {
            message.error('请添加素材');
        }
    }, [dataArr, props.show])
    /**按下移动事件 */
    let handleMouseDown = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        event.preventDefault()
        event.persist();
        if (event.button === 0) {
            let div = divRef.current
            if (div) {
                let disX = event.pageX - parseInt(div.offsetLeft + '');
                let disY = event.pageY - parseInt(div.offsetTop + '');
                document.onmousemove = function (e) {
                    if (div) {
                        let documentW = document.body.clientWidth
                        let documentH = document.body.clientHeight
                        let letf = e.pageX - disX
                        let top = e.pageY - disY
                        if (letf > documentW / 2 && top < documentH / 2 && fx !== 'topRight') {
                            dispatch({ type: 'fx', params: { fx: 'topRight' } })
                        }
                        if (letf > documentW / 2 && top > documentH / 2 && fx !== 'bottomRight') {
                            dispatch({ type: 'fx', params: { fx: 'bottomRight' } })
                        }
                        if (letf < documentW / 2 && top < documentH / 2 && fx !== 'topLeft') {
                            dispatch({ type: 'fx', params: { fx: 'topLeft' } })
                        }
                        if (letf < documentW / 2 && top > documentH / 2 && fx !== 'bottomLeft') {
                            dispatch({ type: 'fx', params: { fx: 'bottomLeft' } })
                        }
                        if (letf < 0) {
                            div.style.left = "0px";
                            return
                        }
                        if (letf > documentW - 25) {
                            div.style.left = documentW - 50 + "px";
                            return
                        }
                        if (top < 0) {
                            div.style.top = "0px";
                            return
                        }
                        if (top > documentH - 50) {
                            div.style.top = documentH - 50 + "px";
                            return
                        }
                        div.style.left = letf + "px";
                        div.style.top = top + "px";
                    }
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
            }
        }
    }, [divRef, fx])
    return <div
        className={`${style.synthetic_body} ${isHover ? style.hover : ''} `}
        onClick={() => { }}
        onMouseDown={handleMouseDown}
        ref={divRef}
    >
        <Popconfirm
            placement={fx === 'topRight' ? 'bottomRight' : fx === 'topLeft' ? 'bottomLeft' : fx === 'bottomRight' ? 'topRight' : 'topLeft'}
            title={
                <ul className={style.synthetic_body_ul}>
                    {
                        dataArr.length > 0 ? dataArr?.map((item: any, index: number) => {
                            return index === 0
                                ?
                                <li
                                    className={`${style.first} ${actionId === item.menuId && style.action}`}
                                    key={item.menuId}
                                    onClick={() => dispatch({ type: 'action', params: { menuId: item.menuId } })}
                                >
                                    <p>
                                        {/* <img src='https://mmbiz-qpic-cn.weituibao.com/mmbiz_png/o0slOoU0qk1qibibvCYeHB7tCwW6HGia7wntuqFtE7IYfqkp8lsCegVicBdRNQTFgZdQRLctqVIebWqu5EOib5ejHMQ/0?wx_fmt=png&wxb_id=4so7eVwgLV_RCXsMR1e4Y4hgYPtVj_qfNimo_frijeI' /> */}
                                        <img src={item?.thumbUrl || item?.thumbMediaUrl || 'https://s.weituibao.com/static/1552098829922/bigfm.png'} alt="" />
                                    </p>
                                    <span className={style.title}>{item.title || '标题'}</span>
                                    <div>
                                        <span>
                                            <ArrowUpOutlined onClick={() => dispatch({ type: 'mobile', params: { eq: index, up: true } })} />
                                            <ArrowDownOutlined onClick={() => dispatch({ type: 'mobile', params: { eq: index } })} />
                                        </span>
                                        <DeleteOutlined onClick={() => dispatch({ type: 'delDataArr', params: { menuId: item.menuId } })} />
                                    </div>
                                </li>
                                :
                                <li
                                    className={`${index === dataArr.length - 1 && style.last} ${actionId === item.menuId && style.action}`}
                                    key={item.menuId}
                                    onClick={() => dispatch({ type: 'action', params: { menuId: item.menuId } })}
                                >
                                    <p>
                                        <span className={style.title1}>{item.title || '标题'}</span> <img src={item?.thumbUrl || item?.thumbMediaUrl || 'https://s.weituibao.com/static/1552098829922/bigfm.png'} alt="" />
                                    </p>
                                    <span />
                                    <div>
                                        <span>
                                            <ArrowUpOutlined onClick={() => dispatch({ type: 'mobile', params: { eq: index, up: true } })} />
                                            <ArrowDownOutlined onClick={() => dispatch({ type: 'mobile', params: { eq: index } })} />
                                        </span>
                                        <DeleteOutlined onClick={() => dispatch({ type: 'delDataArr', params: { menuId: item.menuId } })} />
                                    </div>
                                </li>
                        }) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    }
                </ul>
            }
            onConfirm={handleOk}
            onCancel={() => { dispatch({ type: 'init' }) }}
            okText="合成"
            cancelText="清空"
            icon={null}
        >
            <Badge count={state.dataArr.length} offset={offset[fx]} size='small'>
                <span
                    className={style.synthetic_body_hot}
                >
                    合成器
            </span>
            </Badge>
        </Popconfirm>
    </div>
}

export default Synthetic