import React from 'react'
import style from './text.less'
import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import { useModel } from 'umi'
import filePng from '../../../public/file.png'
import { Tooltip } from 'antd'
const MsgWxLeft = (props: { it: number, dataArr: any[] }) => {
    const { it } = props
    const { drawerState, dispatch } = useModel('useOperating.useMsgMaterialDrawer', model => ({ drawerState: model.state, dispatch: model.dispatch }))
    const { dataArr, actionId } = drawerState
    const handleFensDisplay = (arrv: string) => {
        return arrv ? arrv.replace(/<[/]?span[^>]*>/ig, '#').replace(new RegExp('&nbsp;', "g"), ' ') : ''
    }
    return <div className={style.left}>
        {
            it === 0 ? <div className={style.left_ul}>
                <ul>
                    {
                        props.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 || 'https://s.weituibao.com/static/1552098829922/bigfm.png'} alt="" /> */}
                                        <Tooltip placement="right" title={<div style={{ display: 'flex', flexFlow: 'column' }}>
                                            <span>名称：{item?.knewsThumbInfo?.imgTitle || '网图'}</span>
                                            <span>编号：{item?.knewsThumbInfo?.number || '网图'}</span>
                                        </div>}>
                                            {/* <img src={(item?.knewsThumbInfo?.folder ? filePng : item?.knewsThumbInfo?.id ? item?.knewsThumbInfo?.url : item?.thumbUrl) || ('https://s.weituibao.com/static/1552098829922/bigfm.png')} /> */}
                                            <img src={item?.thumbUrl || (item?.knewsThumbId ? filePng : 'https://s.weituibao.com/static/1552098829922/bigfm.png')} />
                                        </Tooltip>
                                    </p>
                                    <span className={style.title}>{handleFensDisplay(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}>{handleFensDisplay(item.title) || '标题'}</span>
                                        <Tooltip placement="right" title={<div style={{ display: 'flex', flexFlow: 'column' }}>
                                            <span>名称：{item?.knewsThumbInfo?.imgTitle || '网图'}</span>
                                            <span>编号：{item?.knewsThumbInfo?.number || '网图'}</span>
                                        </div>}>
                                            {/* <img src={(item?.knewsThumbInfo?.folder ? filePng : item?.knewsThumbInfo?.id ? item?.knewsThumbInfo?.url : item?.thumbUrl) || ('https://s.weituibao.com/static/1552098829922/bigfm.png')} /> */}
                                            <img src={item?.thumbUrl || (item?.knewsThumbId ? filePng : 'https://s.weituibao.com/static/1552098829922/bigfm.png')} />
                                        </Tooltip>
                                    </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>
                        })
                    }
                </ul>
                {
                    props.dataArr?.length < 8 && <span onClick={() => dispatch({ type: 'addDataArr' })} ><PlusOutlined />新建</span>
                }
            </div> :
                <div className={style.msgLeftD}>
                    {
                        dataArr?.map((item: any, index: number) => {
                            return <div className={`${actionId === item.menuId && style.select}`} onClick={() => dispatch({ type: 'action', params: { menuId: item.menuId } })} key={index}>
                                <h3>{handleFensDisplay(item?.title) || '标题'}</h3>
                                <div>
                                    <p>{item?.digest || '描述'}</p>
                                    <Tooltip placement="right" title={<div style={{ display: 'flex', flexFlow: 'column' }}>
                                        <span>名称：{item?.knewsThumbInfo?.imgTitle || '网图'}</span>
                                        <span>编号：{item?.knewsThumbInfo?.number || '网图'}</span>
                                    </div>}>
                                        {/* <img src={(item?.knewsThumbInfo?.folder ? filePng : item?.knewsThumbInfo?.id ? item?.knewsThumbInfo?.url : item?.thumbUrl) || ('https://s.weituibao.com/static/1552098829922/bigfm.png')} /> */}
                                        <img src={item?.thumbUrl || (item?.knewsThumbId ? filePng : 'https://s.weituibao.com/static/1552098829922/bigfm.png')} />
                                    </Tooltip>
                                </div>
                            </div>
                        })
                    }
                </div>
        }

    </div>
}
export default MsgWxLeft