import { Button, Modal, Radio, Input, message, Space, Image } from "antd"
import { RadioChangeEvent } from "antd/lib/radio";
const { TextArea } = Input
import React, { useCallback, useEffect, useState } from "react";
import { useModel } from "umi";
import { BcForm } from '../AdBasicConfig'
import style from '../AdBasicConfig/index.less'
import ClerkAide from './components/ClerkAide'
import SelectImg from '../../../../../components/selectImg'
import dic from '../Dic'
import { wechatRoutineAd, wechatCardAd } from '../adData'

export interface State {
    name?: string,//创意名称
    pattern?: string, // 创意模式
}

interface Props {
    visible: boolean,
    hideModel: () => void,
    callback: (value: State) => void,
    localtion: number
    defaultValue: State | null,
    pageData?: any[]
}
function AdOriginality(props: Props) {
    const { visible, hideModel, callback, defaultValue, pageData, localtion } = props
    const [adName] = useState<string>('<落地页(小说)>-<当前时间>') // 广告基本信息名称
    const [pattern, setPattern] = useState<string>('') // 投放模式
    const [name, setName] = useState<string>('<落地页(小说)>-<当前时间>') // 设置自定义名称
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [data_show, setData_show] = useState<string>('1')
    const [fieldType, setFieldType] = useState<'one' | 'two'>('one') // 文案字段
    const [buttonParam, setButtonParam] = useState<string>('阅读小说')  // 按钮文案
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [imgSize, setImgSize] = useState<{
        aspectRatio?: string, //宽高比
        minWidth?: string,   //最小宽度
        maxWidth?: string,   //最大宽度
        minHeight?: string,  //最小高度
        maxHeight?: string,  //最大高度
        minMediaSize?: number, // 最小媒体大小
        maxMediaSize?: number, // 最大媒体大小
        minVideoLength?: number, // 最小视频时长
        maxVideoLength?: number, // 最大视频时长
        minVideoBitRate?: number, // 最小视频比特率
        maxVideoBitRate?: number, // 最大视频比特率
        type?: 1 | 2,  // 内容类型 1 图片 2 视频
    }>({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 81920, type: 1 })   // 307200 要选择的素材信息
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string }[]>([])  // 保存回填数据
    const [isCanvasTop, setIsCanvasTop] = useState<boolean>(false)   // 是否禁止选择 使用原生推广页顶部素材
    const [textLength, settextLength] = useState<number>(40)
    const { state: launState, dispatch: launDispatch } = useModel('useLaunch.useAdAuthorize')
    let { materials, product } = launState?.second
    let { desc, link_name, link_page_type, sns_dynamic_show_type, crt_info, title, crt_size, out_material_use_canvas_top, button_param } = materials[0]
    let { product_type } = product

    // 处理是否禁止选择 使用原生推广页顶部素材
    useEffect(() => {
        settextLength(() => (pageData && pageData[0]?.topCanvasType === 142) ? 30 : 40)
        if (localtion === 999) {
            if (pageData && pageData?.length > 0 && pageData[0]?.topCanvasType === 41) {
                let pageContext = pageData[0]?.pageContextList[0]?.pageContextList
                if (pageContext) {
                    pageContext = JSON.parse(pageContext)
                    let { adLocation, viewType } = pageContext[0]
                    if (adLocation === 'sns' && viewType === '1') {
                        setIsCanvasTop(() => false)
                        if (crt_size === 1480) {
                            setAdStyle(1707)
                        }
                    } else {
                        setIsCanvasTop(() => true)
                        if (out_material_use_canvas_top === 1) {
                            setOuterMaterial(0)
                        }
                    }
                }
            } else if (pageData && pageData?.length > 0 && pageData[0]?.topCanvasType === 142) {
                let pageContext = pageData[0]?.pageContextList[0]?.pageContextList
                if (pageContext) {
                    pageContext = JSON.parse(pageContext)
                    let { adLocation } = pageContext[0]
                    if (adLocation === 'gh') {
                        setIsCanvasTop(() => false)
                        setAdStyle(1707)
                    } else {
                        setIsCanvasTop(() => true)
                        if (out_material_use_canvas_top === 1) {
                            setOuterMaterial(0)
                        }
                    }
                }
            } else {
                setIsCanvasTop(() => true)
                if (out_material_use_canvas_top === 1) {
                    setOuterMaterial(0)
                }
            }
        }
    }, [pageData])

    // 处理按钮文案
    useEffect(() => {
        if (button_param) {
            let title = JSON.parse(button_param)?.title
            setButtonParam(() => title)
        }
    }, [button_param])

    // 禁止卡片视频在朋友圈内使用
    /** 判断数据展示是否启用 */
    useEffect(() => {
        if (sns_dynamic_show_type === 0) {
            setData_show(() => '1')
        } else {
            setData_show(() => '2')
        }
    }, [])

    //编辑回填数据
    useEffect(() => {
        if (defaultValue) {
            if (localtion === 999) { // 朋友圈
                setImgSize({ ...imgSize, minWidth: '800', maxWidth: '800', minHeight: '450', maxHeight: '450', maxMediaSize: 307200 });
            } else if (localtion === 0 && crt_size === 538) {
                // 要16比9
                setImgSize(() => ({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
            }
            defaultValue?.name && setName(() => defaultValue.name as string)
            if (defaultValue?.pattern) {
                setPattern(defaultValue?.pattern)
            } else {
                if (localtion === 999) {
                    setPattern('常规广告')
                } else if (localtion === 0 || localtion === 101) {
                    setPattern('大图式卡片')
                } else if (localtion === 8) {
                    setPattern('激励浏览')
                }
            }
        }
    }, [defaultValue, localtion])

    const hideHandle = useCallback(() => {
        hideModel()
    }, [hideModel])

    const handleOk = useCallback(() => {
        if (localtion === 999) {
            if (!desc) {
                message.error('请输入文案')
                return
            }
            if (crt_size === 1707) {
                if (!title) {
                    message.error('请输入外层文案')
                    return
                }
                if (out_material_use_canvas_top === 0) {
                    if (!crt_info.image_url) {
                        message.error('请选择外层图片')
                        return
                    }
                    let new_crt_info = { ...crt_info }
                    launDispatch({
                        type: 'setSecond',
                        params: {
                            ...launState,
                            second: {
                                ...launState.second,
                                materials: [{
                                    ...materials[0],
                                    crt_info: new_crt_info
                                }]
                            }
                        }
                    })
                }
            }
        } else if (localtion === 0 || localtion === 101) {
            if (crt_size === 538) {
                if (!crt_info?.short_video?.video_url) {
                    message.error('请选择视频')
                    return
                }
            } else {
                if (!crt_info.image_url) {
                    message.error('请选择图片')
                    return
                }
            }

            if (crt_info.card_info.head_desc_type === 2 && !crt_info.card_info?.description) {
                message.error('请输入信息栏文案')
                return
            }
            if (localtion === 101) {
                if (!title) {
                    message.error('请输入图文标题')
                    return
                }
                if (!crt_info.card_info?.desc[0] || !crt_info.card_info?.desc[1]) {
                    message.error('请输入广告文案')
                    return
                }
            }
        }
        if (localtion === 101) {
            let new_crt_info = { ...crt_info }
            let descData: string[] = []
            let crtInfoDesc = new_crt_info.card_info?.desc
            descData[0] = crtInfoDesc[0]
            descData[1] = crtInfoDesc[1]
            if (crtInfoDesc[2]) {
                descData[2] = crtInfoDesc[2]
            }
            new_crt_info.card_info.desc = descData
            launDispatch({
                type: 'setSecond',
                params: {
                    ...launState,
                    second: {
                        ...launState.second,
                        materials: [{
                            ...materials[0],
                            crt_info: new_crt_info
                        }]
                    }
                }
            })

        }
        callback({ name, pattern })
        hideModel()
    }, [name, desc, crt_info, title, launState, localtion, pattern, isCanvasTop, out_material_use_canvas_top, crt_size])

    /** 设置文字链跳转 */
    const setTextLink = useCallback((value: 6 | 4) => {
        launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], link_page_type: value, link_page_id: value === 4 ? 2225950003 : 0 }] } } })
    }, [launState])

    // 输入文案时判断
    const txtLength = (value: string) => {
        if (value) {
            let length = value?.length
            let text = value?.replace(/[\x00-\xff]/g, '')
            return text?.length + Number(((length - text?.length) / 2).toFixed())
        } else {
            return 0
        }
    }

    /** 设置crt_info */
    const setCrtInfo = useCallback((param: string, value: any, index?: number) => {
        /**
         * {
         *  image_url: '',
         *  card_info: {
         *    head_desc_type: 1 | 2,
         *    description?: ''
         *  }
         * }
        */
        let new_crt_info = { ...crt_info }
        if (param === 'image_url') {
            new_crt_info[param] = value
        } else if (param === 'short_video') {
            new_crt_info[param] = value
        } else {
            if (param === 'head_desc_type' && value === 1) {
                if (localtion === 101) {
                    new_crt_info.card_info = {
                        head_desc_type: 1,
                        desc: new_crt_info.card_info?.desc
                    }
                } else {
                    new_crt_info.card_info = {
                        head_desc_type: 1
                    }
                }
            } else if (param === 'desc') {
                if (typeof index === 'number') {
                    let desc = new_crt_info.card_info.desc
                    desc[index] = value
                }
            } else {
                new_crt_info.card_info[param] = value
            }
        }
        launDispatch({
            type: 'setSecond',
            params: {
                ...launState,
                second: {
                    ...launState.second,
                    materials: [{
                        ...materials[0],
                        crt_info: new_crt_info
                    }]
                }
            }
        })
    }, [launState, crt_info, localtion])

    /** 设置title */
    const setTitle = useCallback((value: string) => {
        launDispatch({
            type: 'setSecond',
            params: {
                ...launState,
                second: {
                    ...launState.second,
                    materials: [{
                        ...materials[0],
                        title: value
                    }]
                }
            }
        })
    }, [launState])

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        if (localtion === 0 && crt_size === 538) {
            setCrtInfo('short_video', {
                video_url: value[0].content,
                thumb_width: 960,
                thumb_height: 540,
                video_duration: value[0].videoLength,
                media_id: value[0].mediaSize
            })
        } else {
            if (value?.length > 0) {
                setCrtInfo('image_url', value[0].content)
            }
        }
    }, [launState, crt_info, crt_size])

    /** 选择图片 */
    const selectImg = useCallback(() => {
        if (crt_info?.image_url) {
            setSliderImgContent([{ content: crt_info?.image_url }])
        }
        setSelectImgVisible(true)
    }, [selectImgVisible, crt_info, sliderImgContent])

    /** 朋友圈设置广告样式 */
    const setAdStyle = useCallback((style: number) => {
        launDispatch({
            type: 'setSecond',
            params: {
                ...launState,
                second: {
                    ...launState.second,
                    materials: style === 1480 ? [{ ...wechatRoutineAd, link_name: product_type === 'PRODUCTTYPE_WECHAT' ? "阅读小说" : "查看详情" }] : [wechatCardAd as any]
                }
            }
        })
    }, [launState])
    /** 设置外层素材 */
    const setOuterMaterial = useCallback((material: number) => {
        launDispatch({
            type: 'setSecond',
            params: {
                ...launState,
                second: {
                    ...launState.second,
                    materials: [{
                        ...materials[0],
                        out_material_use_canvas_top: material,
                        crt_info: material === 0 ? '' : {
                            image_url: ''
                        }
                    }]
                }
            }
        })
    }, [launState])

    /** 设置按钮文案 */
    const setButtonParamHandle = useCallback((value: string) => {
        setButtonParam(value)
        launDispatch({
            type: 'setSecond',
            params: {
                ...launState,
                second: {
                    ...launState.second,
                    materials: [{
                        ...materials[0],
                        button_param: value === '阅读小说' ? "{\"title\":\"阅读小说\"}" : value === '关注公众号' ? "{\"title\":\"关注公众号\"}" : value === '查看详情' ? "{\"title\":\"查看详情\"}" : ""
                    }]
                }
            }
        })
    }, [launState, buttonParam])
    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title={`${dic.localtion[localtion]}创意基本信息`}
        visible={visible}
        onCancel={hideHandle}
        onOk={handleOk}
        width={900}
        className={style.AdBasicConfig}
    >
        {clerkAideVisible && <ClerkAide
            fieldType={fieldType}
            visible={clerkAideVisible}
            hideModel={() => { setClerkAideVisible(false) }}
            onChange={(value1, value2) => {
                if (fieldType === 'one') {
                    launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], desc: value1 }] } } })
                } else {
                    launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], title: value1, desc: value2 || '' }] } } })
                }
            }}
        ></ClerkAide>}
        {/* 选择图片 视频 */}
        {selectImgVisible && <SelectImg visible={selectImgVisible} hideModel={() => { setSelectImgVisible(false) }} num={1} onChange={setImg} listParams={imgSize} sliderImgContent={sliderImgContent}></SelectImg>}

        <div className={style.title}>创意形式</div>
        {
            // 朋友圈信息流
            localtion === 999 ? <>
                <BcForm name="投放模式">
                    <Radio.Group className={style.radio} value={crt_size} onChange={(e) => { setAdStyle(e.target.value) }}>
                        <Radio value={1480} disabled={!isCanvasTop}>常规广告</Radio>
                        <Radio value={1707}>卡片式广告</Radio>
                    </Radio.Group>
                </BcForm>
                {crt_size === 1480 ? <>
                    <BcForm name="外层文案" flex='flex-start'>
                        <div className={style.flexStart}>
                            <div>
                                <TextArea
                                    value={desc}
                                    onChange={(e) => { launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], desc: e.target.value }] } } }) }}
                                    className={style.textArea}
                                    style={{ width: 300 }}
                                    placeholder="请输入文案(可直接编辑，或点击文案助手选择合适文案)"
                                    autoSize={{ minRows: 2, maxRows: 4 }}
                                />
                                <div className={style.maxLength}>
                                    <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{txtLength(desc) > textLength && `广告文案不得超过${textLength}字，请缩短输入内容`}</div>
                                    <div>{txtLength(desc)}/{textLength}</div>
                                </div>
                            </div>
                            <Button onClick={() => { setFieldType('one'); setClerkAideVisible(true) }}>文案助手</Button>
                        </div>
                    </BcForm>
                    <BcForm name="外层素材跳转">
                        <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                            <Radio value="1">原生推广页</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="原生推广页">
                        <div className={style.flexStart} style={{ alignItems: 'center' }}>
                            {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                        </div>
                    </BcForm>
                    {pageData && pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                        <div className={style.flexStart}>
                            {pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                                <Space>
                                    {JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                        return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                    })}
                                </Space>
                                :
                                pageData[0]?.topCanvasType === 41 ? // 顶部图片
                                    <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                                    :
                                    <span>无此类型预览，请联系管理员</span>}
                        </div>
                    </BcForm>}
                    <BcForm name="文字链文案">
                        <Radio.Group className={style.radio} value={link_name} onChange={(e) => { setData_show("1"); launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], link_name: e.target.value, sns_dynamic_show_type: 0, sns_dynamic_show_text: "" }] } } }) }}>
                            {product_type === 'PRODUCTTYPE_WECHAT' ? <>
                                <Radio value="关注公众号">关注公众号</Radio>
                                <Radio value="了解更多">了解更多</Radio>
                                <Radio value="阅读小说">阅读小说</Radio>
                            </> : product_type === 'PRODUCTTYPE_LEAD_AD' ? <>
                                <Radio value="查看详情">查看详情</Radio>
                                <Radio value="了解更多">了解更多</Radio>
                            </> : <></>}
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="文字链跳转">
                        <Radio.Group className={style.radio} value={link_page_type} onChange={(e) => { setTextLink(e.target.value) }}>
                            <Radio value={6}>公众号详情页</Radio>
                            <Radio value={4}>原生推广页</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="数据展示">
                        <Radio.Group value={data_show} className={style.radio} onChange={(e) => {
                            setData_show(e.target.value);
                            if (e.target.value === '1') {
                                launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], sns_dynamic_show_type: 0, sns_dynamic_show_text: "" }] } } })
                            }

                        }}>
                            <Radio.Button value="1">未启用</Radio.Button>
                            <Radio.Button value="2">启用</Radio.Button>
                        </Radio.Group>
                    </BcForm>
                    {data_show === '2' && <>
                        <BcForm name="数据展示">
                            <Radio.Group value={sns_dynamic_show_type} className={style.radio} onChange={(e: RadioChangeEvent) => {
                                launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], sns_dynamic_show_type: e.target.value, sns_dynamic_show_text: e.target.value === 0 ? "" : link_name === '阅读小说' ? '阅读' : '关注' }] } } })
                            }}>
                                <Radio value={0}>不转化目标量</Radio>
                                <Radio value={6}>转化目标量</Radio>
                            </Radio.Group>
                        </BcForm>
                        {
                            sns_dynamic_show_type === 6 && <BcForm name="转化行为">
                                <Radio.Group defaultValue='1' className={style.radio}>
                                    <Radio value="1">{link_name === '阅读小说' ? '阅读' : '关注'}</Radio>
                                </Radio.Group>
                            </BcForm>
                        }

                    </>}
                </> : <>
                    <BcForm name="点击跳转">
                        <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                            <Radio value="1">原生推广页</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="原生推广页">
                        <div className={style.flexStart} style={{ alignItems: 'center' }}>
                            {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                        </div>
                    </BcForm>
                    {pageData && pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                        <div className={style.flexStart}>
                            {pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                                <Space>
                                    {JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                        return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                    })}
                                </Space>
                                :
                                pageData[0]?.topCanvasType === 41 ? // 顶部图片
                                    <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                                    :
                                    <span>无此类型预览，请联系管理员</span>}
                        </div>
                    </BcForm>}
                    <BcForm name="外层素材">
                        <Radio.Group className={style.radio} value={out_material_use_canvas_top} onChange={(e) => { setOuterMaterial(e.target.value) }}>
                            <Radio value={1} disabled={isCanvasTop}>使用原生推广页顶部素材</Radio>
                            <Radio value={0}>上传素材</Radio>
                        </Radio.Group>
                    </BcForm>
                    {
                        out_material_use_canvas_top === 0 && <BcForm name="外层图片" flex="flex-start">
                            <div>
                                <Button onClick={() => { selectImg() }}>{crt_info?.image_url ? '修改图片' : '上传图片'}</Button>
                                <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小800像素x450像素，不超过300KB</div>
                                {crt_info?.image_url && <div style={{ marginTop: 20 }}><Image width={100} src={crt_info?.image_url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                            </div>
                        </BcForm>
                    }

                    <BcForm name="外层文案标题" flex='flex-start'>
                        <div className={style.flexStart}>
                            <div>
                                <TextArea
                                    value={title}
                                    onChange={(e) => { launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], title: e.target.value }] } } }) }}
                                    className={style.textArea}
                                    style={{ width: 300 }}
                                    placeholder="请填广告标题"
                                    autoSize={{ minRows: 1, maxRows: 2 }}
                                />
                                <div className={style.maxLength}>
                                    <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{txtLength(title) > 10 && '广告文案不得超过10字，请缩短输入内容'}</div>
                                    <div>{txtLength(title)}/10</div>
                                </div>
                            </div>
                            <Button onClick={() => { setFieldType('two'); setClerkAideVisible(true) }}>文案助手</Button>
                        </div>
                    </BcForm>
                    <BcForm name="外层文案" flex='flex-start'>
                        <div className={style.flexStart}>
                            <div>
                                <TextArea
                                    value={desc}
                                    onChange={(e) => { launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...materials[0], desc: e.target.value }] } } }) }}
                                    className={style.textArea}
                                    style={{ width: 300 }}
                                    placeholder="文案友好、易阅读和理解，建议与图片设计、详情页内容关联。"
                                    autoSize={{ minRows: 2, maxRows: 4 }}
                                />
                                <div className={style.maxLength}>
                                    <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{txtLength(desc) > 30 && '广告文案不得超过30字，请缩短输入内容'}</div>
                                    <div>{txtLength(desc)}/30</div>
                                </div>
                            </div>
                        </div>
                    </BcForm>
                </>}

            </> :
                /**
                 * 底部 
                 * 信息栏类型  card_info -> head_desc_type  头像昵称型 1 文案型 2 (添加description 信息栏文案)
                 * 文案型 title 要添加 和 tname 一样
                 */
                localtion === 0 || localtion === 101 ? <>
                    <BcForm name="创意样式">
                        <Radio.Group className={style.radio} value={crt_size}>
                            {
                                crt_size === 928 ?
                                    <Radio value={928}>大图式卡片</Radio> :
                                    crt_size === 538 ?
                                        <Radio value={538}>视频式卡片</Radio> :
                                        <Radio value={666}>大图式卡片</Radio>
                            }
                        </Radio.Group>
                    </BcForm>
                    {localtion === 0 && crt_size === 538 ? <BcForm name="广告位视频" flex="flex-start">
                        <div>
                            <Button onClick={() => { selectImg() }}>{crt_info?.short_video?.video_url ? '修改视频' : '上传视频'}</Button>
                            {/* ≥ */}
                            <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频尺寸960x540，不超过100MB，视频时长6-30秒</div>
                            {crt_info?.short_video?.video_url && <div style={{ marginTop: 20 }}><video width={100} src={crt_info?.short_video?.video_url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                        </div>
                    </BcForm> : <BcForm name="广告位图片" flex="flex-start">
                        <div>
                            <Button onClick={() => { selectImg() }}>{crt_info?.image_url ? '修改图片' : '上传图片'}</Button>
                            <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小960像素x540像素，不超过80KB</div>
                            {crt_info?.image_url && <div style={{ marginTop: 20 }}><Image width={100} src={crt_info?.image_url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                        </div>
                    </BcForm>}

                    <BcForm name="信息栏类型">
                        <Radio.Group className={style.radio} value={crt_info?.card_info?.head_desc_type} onChange={(e) => { setCrtInfo('head_desc_type', e.target.value) }}>
                            <Radio value={1}>头像昵称型</Radio>
                            <Radio value={2}>文案型</Radio>
                        </Radio.Group>
                    </BcForm>
                    {crt_info.card_info.head_desc_type === 2 && <BcForm name="信息栏文案" flex="flex-start">
                        <Input.TextArea showCount maxLength={12} value={crt_info.card_info.description} onChange={(e) => { setCrtInfo('description', e.target.value) }} placeholder="信息栏文案" autoSize />
                    </BcForm>}
                    {localtion === 101 && <>
                        <BcForm name="图文标题" flex="flex-start">
                            <Input.TextArea showCount maxLength={12} value={title} onChange={(e) => { setTitle(e.target.value) }} autoSize />
                        </BcForm>
                        <BcForm name="广告文案" flex="flex-start">
                            <>
                                <Input.TextArea showCount maxLength={16} value={crt_info.card_info?.desc[0]} onChange={(e) => { setCrtInfo('desc', e.target.value, 0) }} autoSize placeholder="请输入首行文案" />
                                <Input.TextArea showCount maxLength={16} value={crt_info.card_info?.desc[1]} onChange={(e) => { setCrtInfo('desc', e.target.value, 1) }} autoSize placeholder="次行文案" />
                                <Input.TextArea showCount maxLength={16} value={crt_info.card_info?.desc[2]} onChange={(e) => { setCrtInfo('desc', e.target.value, 2) }} autoSize placeholder="请输入第三行文案（选填）" />
                            </>
                        </BcForm>
                    </>}
                    <BcForm name="标签展示">
                        <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                            <Radio value="1">不启用</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="点击跳转">
                        <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                            <Radio value="1">原生推广页</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="点击按钮跳转">
                        <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                            <Radio value="1">原生推广页</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="原生推广页">
                        <div className={style.flexStart} style={{ alignItems: 'center' }}>
                            {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                        </div>
                    </BcForm>
                    {pageData && pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                        <div className={style.flexStart}>
                            {pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                                <Space>
                                    {JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                        return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                    })}
                                </Space>
                                :
                                pageData[0]?.topCanvasType === 41 ? // 顶部图片
                                    <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                                    :
                                    <span>无此类型预览，请联系管理员</span>}
                        </div>
                    </BcForm>}
                    <BcForm name="按钮文案">
                        <Radio.Group className={style.radio} value={buttonParam} onChange={(e) => { setButtonParamHandle(e.target.value) }}>
                            {product_type === 'PRODUCTTYPE_WECHAT' ? <>
                                <Radio value='关注公众号'>关注公众号</Radio>
                                <Radio value='阅读小说'>阅读小说</Radio>
                            </> : product_type === 'PRODUCTTYPE_LEAD_AD' ? <>
                                <Radio value='查看详情'>查看详情</Radio>
                            </> : <></>}
                        </Radio.Group>
                    </BcForm>
                </> : localtion === 8 ? <>
                    <BcForm name="创意样式">
                        <Radio.Group className={style.radio} value={crt_size}>
                            <Radio value={910}>激励浏览</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="原生推广页">
                        <div className={style.flexStart} style={{ alignItems: 'center' }}>
                            {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                        </div>
                    </BcForm>
                    {pageData && pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                        <div className={style.flexStart}>
                            {pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                                <Space>
                                    {JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                        return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                    })}
                                </Space>
                                :
                                pageData[0]?.topCanvasType === 41 ? // 顶部图片
                                    <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                                    :
                                    <span>无此类型预览，请联系管理员</span>}
                        </div>
                    </BcForm>}
                </> : <></>}

        <div className={style.form}>
            <div className={style.content}>
                <div className={style.label}><label>创意名称</label></div>
                <div className={style.control}>
                    <div className={style.children}>
                        <div className={style.inputGroup}>
                            <span>{`${adName} + `}</span>
                            <Input maxLength={10} className={`${style.input}`} placeholder='自定义标记' value={name?.substr(17)} onChange={(e) => {
                                setName(adName + '-' + e.target.value)
                            }} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
}

export default React.memo(AdOriginality)