import React from "react";
import { ACTICITYTHEME, ACTICITYTHEMEXH, DISPLAYTYPE, LINKTYPE, LINKTYPEEle, PAGETYPE, RESOURCETTYPE } from "./const";

interface Props {
    linkType: keyof typeof LINKTYPE,
    linkContent: { [x: string]: any }
}

const Details: React.FC<Props> = ({ linkType, linkContent }) => {

    if (linkType === 1) {
        return <div>
            <div>链接类型：{LINKTYPEEle[linkType]}</div>
            <div>页面类型：<span style={{ color: '#1890ff' }}>{PAGETYPE[linkContent?.pageType] || linkContent?.pageType}</span></div>
            {linkContent?.cost && <div>消耗：<span style={{ color: '#1890ff' }}>{linkContent?.cost}</span></div>}
        </div>
    } else if (linkType === 2) {
        return <div>
            <div>链接类型：{LINKTYPEEle[linkType]}</div>
            <div>作品(书籍)ID：<span style={{ color: '#1890ff' }}>{linkContent?.bookId}</span></div>
            <div>章节ID：<span style={{ color: '#1890ff' }}>{linkContent?.chapterId}</span></div>
            <div>强关设置：<span style={{ color: '#1890ff' }}>{linkContent?.forceStyle === '1' ? '不设置强关' : linkContent?.forceStyle === '2' ? '主动强关' : '强制关注'}</span></div>
            {linkContent?.forceChapter && <div>强关章节序号：<span style={{ color: '#1890ff' }}>{linkContent?.forceChapter}</span></div>}
            <div>是否添加底部关注引导：<span style={{ color: '#1890ff' }}>{linkContent?.isOpenBottom ? '是' : '否'}</span></div>
            {linkContent?.cost && <div>消耗：<span style={{ color: '#1890ff' }}>{linkContent?.cost}</span></div>}
        </div>
    } else if (linkType === 3) {
        return <div>
            <div>链接类型：{LINKTYPEEle[linkType]}</div>
            <div>活动名称：<span style={{ color: '#1890ff' }}>{linkContent?.activityName}</span></div>
            <div>活动主题：<span style={{ color: '#1890ff' }}>{ACTICITYTHEME[linkContent?.activityTheme]}</span></div>
            <div>充值挡位：<span style={{ color: '#1890ff' }}>充值{linkContent?.rechargeAmount}元，送{linkContent?.giftAmount}书卷</span></div>
            <div>活动次数：<span style={{ color: '#1890ff' }}>{linkContent?.rechargeCount}</span></div>
            <div>是否每日充值活动：<span style={{ color: '#1890ff' }}>{linkContent?.isDayRepeat ? '是' : '否'}</span></div>
            <div>活动时间：<span style={{ color: '#1890ff' }}>{linkContent?.startTime}~{linkContent?.endTime}</span></div>
            <div>活动时间状态：<span style={{ color: '#1890ff' }}>{linkContent?.timeIsShow ? '开启' : '关闭'}</span></div>
            {linkContent?.display && <div>活动展示位：<span style={{ color: '#1890ff' }}>{linkContent.display.split(',').map(item => DISPLAYTYPE[item]).join('、')}</span></div>}
        </div>
    } else if (linkType === 4) {
        return <div>
            <div>链接类型：{LINKTYPEEle[linkType]}</div>
            <div>活动名称：<span style={{ color: '#1890ff' }}>{linkContent?.activityName}</span></div>
            <div>赠送道具：<span style={{ color: '#1890ff' }}>{RESOURCETTYPE[linkContent?.resourceType]}</span></div>
            <div>赠送书卷量：<span style={{ color: '#1890ff' }}>{linkContent?.freeAmount}</span></div>
            <div>书卷有效期：<span style={{ color: '#1890ff' }}>{linkContent?.expire}天</span></div>
            <div>赠送名额：<span style={{ color: '#1890ff' }}>{linkContent?.totalGift}</span></div>
            <div>活动时间：<span style={{ color: '#1890ff' }}>{linkContent?.startTime}~{linkContent?.endTime}</span></div>
            {linkContent?.display && <div>活动展示位：<span style={{ color: '#1890ff' }}>{linkContent.display.split(',').map(item => DISPLAYTYPE[item]).join('、')}</span></div>}
        </div>
    } else if (linkType === 5) {
        return <div>
            <div>链接类型：{LINKTYPEEle[linkType]}</div>
            <div>活动名称：<span style={{ color: '#1890ff' }}>{linkContent?.activityName}</span></div>
            <div>活动主题：<span style={{ color: '#1890ff' }}>{ACTICITYTHEMEXH[linkContent?.activityTheme]}</span></div>
            <div>购买章节数量：<span style={{ color: '#1890ff' }}>{linkContent?.unlockChapter}</span></div>
            <div>生效书籍：<span style={{ color: '#1890ff' }}>{linkContent?.bookId || '全部'}</span></div>
            <div>赠送书卷数量：<span style={{ color: '#1890ff' }}>{linkContent?.giftAmount}</span></div>
            <div>赠送名额：<span style={{ color: '#1890ff' }}>{linkContent?.totalGift}</span></div>
            <div>活动时间：<span style={{ color: '#1890ff' }}>{linkContent?.startTime}~{linkContent?.endTime}</span></div>
            {linkContent?.display && <div>活动展示位：<span style={{ color: '#1890ff' }}>{linkContent.display.split(',').map(item => DISPLAYTYPE[item]).join('、')}</span></div>}
        </div>
    }
    return null
}

export default React.memo(Details);