import useNewToken from "@/Hook/useNewToken"
import { Divider, Typography } from "antd"
import React from "react"
import style from './index.less'
import miniImg from '@/public/image/mini3.png'

export interface Props {
    miniprogramTitle: string,
    miniprogramPicurl: string,
    miniprogramAppid: string,
    miniprogramPage: string,
    isDetails?: boolean
}
/**
 * 消息小程序
 * @param param0 
 */
const MiniprogramNews: React.FC<Props | any> = ({ miniprogramTitle, miniprogramPicurl, miniprogramAppid, miniprogramPage, isDetails }) => {

    /*****************************/
    const { token } = useNewToken()
    /*****************************/

    return <div
        className={style.miniprogramNews}
        style={{
            backgroundColor: token.colorBgContainer,
            borderRadius: token.borderRadius,
            padding: 12,
            border: `1px solid ${token.colorBorder}`
        }}
    >
        <Typography.Paragraph type="secondary" ellipsis={{ rows: 1 }}>{miniprogramTitle}</Typography.Paragraph>
        <div className={style.imgBack}>
            <img src={miniprogramPicurl} />
            {isDetails && <div className={style.details} style={{ backgroundColor: token.colorBgMask }}>
                <div>
                    {miniprogramAppid && <Typography.Paragraph style={{ color: token.colorTextWhite, marginBottom: 0, wordBreak: 'break-all' }} type="secondary" ellipsis={{ rows: 1, tooltip: true }}>AppId: {miniprogramAppid}</Typography.Paragraph>}
                    {miniprogramPage && <Typography.Paragraph style={{ color: token.colorTextWhite, marginBottom: 0, wordBreak: 'break-all' }} type="secondary">路径: {miniprogramPage}</Typography.Paragraph>}
                </div>
            </div>}
        </div>
        <Divider style={{ margin: '5px 0' }} />
        <div className={style.footer}>
            <img src={miniImg} width={16} height={16} />
            <Typography.Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>小程序</Typography.Paragraph>
        </div>
    </div>
}

export default React.memo(MiniprogramNews)