import { AdcreativeTemplateEnum, EndPageTypeEnum, LinkPageNameTypeEnum, LinkPageTypeEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
import React from "react"
import { Image, Space } from "antd"
import { overrideCanvasHeadOptionEnum } from "./creative/modal/config"


export const adcreativeTemplate = [
    { adcreativeTemplateAppellation: "常规大图 1:1", adcreativeTemplateId: 311 },
    { adcreativeTemplateAppellation: "常规视频  4:3", adcreativeTemplateId: 618 },
    { adcreativeTemplateAppellation: "常规多图 1:1 三图", adcreativeTemplateId: 641 },
    { adcreativeTemplateAppellation: "常规多图 1:1 四图", adcreativeTemplateId: 642 },
    { adcreativeTemplateAppellation: "常规多图 1:1 六图", adcreativeTemplateId: 643 },
    { adcreativeTemplateAppellation: "横版视频 16:9", adcreativeTemplateId: 720 },
    { adcreativeTemplateAppellation: "竖版视频 9:16", adcreativeTemplateId: 721 },
    { adcreativeTemplateAppellation: "常规视频 750×1536", adcreativeTemplateId: 1064 },
    { adcreativeTemplateAppellation: "常规视频 16:9", adcreativeTemplateId: 1465 },
    { adcreativeTemplateAppellation: "常规视频 9:16", adcreativeTemplateId: 1480 },
    { adcreativeTemplateAppellation: "卡片广告 横版大图 16:9", adcreativeTemplateId: 1707 },
    { adcreativeTemplateAppellation: "卡片广告 横版视频 16:9", adcreativeTemplateId: 1708 },
    { adcreativeTemplateAppellation: "破框形态 视频合约广告", adcreativeTemplateId: 1885 },
    { adcreativeTemplateAppellation: "横版大图 16:9", adcreativeTemplateId: 711 },
    { adcreativeTemplateAppellation: "竖版大图 9:16", adcreativeTemplateId: 712 },
    { adcreativeTemplateAppellation: "横版视频 16:9", adcreativeTemplateId: 720 },
    { adcreativeTemplateAppellation: "竖版视频 9:16", adcreativeTemplateId: 721 },
    { adcreativeTemplateAppellation: "激励浏览广告", adcreativeTemplateId: 910 },
    { adcreativeTemplateAppellation: "Banner图片 20:7", adcreativeTemplateId: 925 },
    { adcreativeTemplateAppellation: "出框形态 视频合约广告", adcreativeTemplateId: 1945 }
]

/**
 * 创意详情
 */
interface Props {
    data: any
}
const AdcreativeCol: React.FC<Props> = (props) => {

    /***************************/
    const { data } = props
    const { adcreativeName, promotedObjectType, siteSet, adcreativeTemplateId, adcreativeElements, profile, overrideCanvasHeadOption, linkNameType, linkPageType, linkPageSpec } = data
    /***************************/

    return <>
        <div><strong>创意名称：</strong><span style={{ color: "#5a5a5a" }}>{adcreativeName}</span></div>
        <div><strong>推广目标：</strong> <span style={{ color: "#5a5a5a" }}>{PromotedObjectType[promotedObjectType]}</span></div>
        <div><strong>广告版位：</strong> <span style={{ color: "#5a5a5a" }}>{siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</span></div>
        <div><strong>创意形式： </strong><span style={{ color: "#5a5a5a" }}>{AdcreativeTemplateEnum[adcreativeTemplateId]}</span></div>
        {(profile && Object.keys(profile)?.length > 0) ?
            <div><strong>头像及昵称跳转页：</strong> <span style={{ color: "#5a5a5a" }}><img src={adcreativeElements?.brand?.brandImgUrl} style={{ width: 20, marginRight: 5 }} />{adcreativeElements?.brand?.brandName}</span></div> :
            adcreativeElements?.brand ? <div><strong>品牌形象：</strong> <span style={{ color: "#5a5a5a" }}><img src={adcreativeElements?.brand?.brandImgUrl} style={{ width: 20, marginRight: 5 }} />{adcreativeElements?.brand?.brandName}</span></div> : null}
        {adcreativeElements?.description && <div><strong>创意文案：</strong> <span style={{ color: "#5a5a5a" }}>{adcreativeElements?.description}</span></div>}
        {adcreativeElements?.title && <div><strong>文案：</strong> <span style={{ color: "#5a5a5a" }}>{adcreativeElements?.title}</span></div>}
        {linkNameType && <div><strong>按钮文案：</strong> <span style={{ color: "#5a5a5a" }}>{LinkPageNameTypeEnum[linkNameType]}</span></div>}
        {linkPageType && <div><strong>跳转落地页：</strong> <span style={{ color: "#5a5a5a" }}>{LinkPageTypeEnum[linkPageType]}</span></div>}
        {linkPageSpec?.pageUrl && <div><strong>落地页地址：</strong> <span style={{ color: "#5a5a5a" }}>{linkPageSpec?.pageUrl}</span></div>}
        {linkPageSpec?.miniProgramSpec && linkPageSpec?.miniProgramSpec?.miniProgramId && <div><strong>小程序ID：</strong> <span style={{ color: "#5a5a5a" }}>{linkPageSpec?.miniProgramSpec?.miniProgramId}</span></div>}
        {linkPageSpec?.miniProgramSpec && linkPageSpec?.miniProgramSpec?.miniProgramPath && <div><strong>小程序地址：</strong> <span style={{ color: "#5a5a5a" }}>{linkPageSpec?.miniProgramSpec?.miniProgramPath}</span></div>}
        {adcreativeElements?.endPage && <div><strong>视频结束页类型：</strong> <span style={{ color: "#5a5a5a" }}>{EndPageTypeEnum[adcreativeElements?.endPage?.endPageType]}</span></div>}
        {adcreativeElements?.endPage && <div><strong>视频结束页文案：</strong> <span style={{ color: "#5a5a5a" }}>{adcreativeElements?.endPage?.endPageDesc}</span></div>}
        {adcreativeElements?.imageUrl && <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 4 }}><strong>创意素材：</strong> <Image width={80} src={adcreativeElements?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden', marginLeft: 5 }} /></div>}
        {adcreativeElements?.imageUrlList && <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <Image.PreviewGroup>
            <Space wrap>
                {adcreativeElements?.imageUrlList?.map((url: string, index: number) => <Image width={50} src={url} style={{ borderRadius: 4 }} key={'TOP_SLIDER' + index} />)}
            </Space>
        </Image.PreviewGroup></div>}
        {adcreativeElements?.elementStory && <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <Image.PreviewGroup>
            <Space wrap>
                {adcreativeElements?.elementStory?.map((item: { imageUrl: string }, index: number) => <Image width={50} src={item.imageUrl} style={{ borderRadius: 4 }} key={'TOP_SLIDER' + index} />)}
            </Space>
        </Image.PreviewGroup></div>}
        {overrideCanvasHeadOption && <div><strong>素材选项：</strong> <span style={{ color: "#5a5a5a" }}>{overrideCanvasHeadOptionEnum[overrideCanvasHeadOption]}</span></div>}
        {adcreativeElements?.shortVideoStruct?.shortVideo1Url && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <video src={adcreativeElements?.shortVideoStruct?.shortVideo1Url} width={130} controls></video></div>}
        {adcreativeElements?.videoUrl && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}><strong>创意素材：</strong></span> <video src={adcreativeElements?.videoUrl} width={130} controls></video></div>}
    </>
}

export default React.memo(AdcreativeCol)