import Tables from "@/components/Tables"
import { Button, Input, Modal, Space } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import columns from './tableConfig'
import LookLanding from '../lookLanding'
import { useModel } from "umi"

type Props = {
    show?: boolean,
    onClose?: () => void
    onChange?: (data: any) => void,
    pageData?: any
    account?: {   // 用账户筛选落地页
        accountId?: number,
        accountType?: 'mp' | 'adq'
    },
    type?: string//'311' | '1707' | '928' | '929'
}

function SelectPageNew(props: Props) {
    let { show, onClose, onChange, pageData, account, type } = props
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, activeSync: boolean, title?: string | undefined, novelName?: string, name?: string, accountId?: number, accountType?: 'mp' | 'adq' }>({ pageNum: 1, pageSize: 20, activeSync: true, ...account })
    const [lookVisible, setLookVisible] = useState<boolean>(false) // 查看弹窗控制
    const [typesetting, setTypesetting] = useState<any>() // 查看数据
    const [data, setData] = useState<any>()
    const { getSharePage } = useModel('useLaunch.useAdAuthorize')
    /** 首次进来加载 */
    useEffect(() => {
        getData()
    }, [])

    /** 回填 */
    useEffect(() => {
        pageData && setData(pageData)
    }, [pageData])

    /** 确定按钮 */
    const handleOk = useCallback(() => {
        onChange && onChange(data)
    }, [data])

    /** 搜索落地页 */
    const onSearch = useCallback((value: string) => {
        setQueryForm({ ...queryForm, name: value, pageNum: 1 })
        getSharePage?.run({ ...queryForm, name: value, pageNum: 1 })
    }, [queryForm])

    /** 获取数据 */
    const getData = useCallback(() => {
        getSharePage?.run(queryForm)
    }, [queryForm])

    /**分页 */
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {
        setQueryForm({ ...queryForm, pageNum: page as number, pageSize: pageSize as number })
        getSharePage?.run({ ...queryForm, pageNum: page, pageSize: pageSize })
    }, [queryForm])

    /** 查看 */
    const look = useCallback((e: any) => {
        setTypesetting(e)
        setLookVisible(true)
    }, [lookVisible, typesetting])

    return <>
        {lookVisible && <LookLanding visible={lookVisible} hideModal={() => { setLookVisible(false) }} typesetting={typesetting}></LookLanding>}
        <Modal
            title="选择推广页"
            visible={show}
            onOk={handleOk}
            onCancel={() => { onClose && onClose() }}
            width={1200}
        >
            <Space style={{ marginBottom: 20 }}>
                <Input.Search placeholder="请输入落地页名称" allowClear enterButton="搜索" size="middle" onSearch={onSearch} />
                <Button type='link' onClick={() => { getData() }}>刷新</Button>
            </Space>

            <Tables
                columns={columns(look)}
                dataSource={getSharePage?.data?.data?.records}
                total={getSharePage?.data?.data?.total}
                loading={getSharePage?.loading}
                pageChange={pageChange}
                sizeChange={pageChange}
                size="small"
                bordered
                scroll={{ x: 1100, y: 500 }}
                rowSelection={{
                    type: 'radio',
                    selectedRowKeys: data?.map((item: any) => item?.id.toString()),
                    onChange: (selectedRowKeys: any, selectedRows: any) => {
                        setData(selectedRows)
                    },
                    getCheckboxProps: (record: { topCanvasType: number, pageContextList: any }) => {
                        // topCanvasType 41--->顶部图片 61 142--->顶部视频 101--->顶部轮播图
                        // adLocation sns--->朋友圈信息流 gh--->公众号及其他
                        // viewType "0"--->常规广告 "1"--->卡片广告
                        // styleType "0"---> 横板视频 "1"---> 竖版视频
                        let adLocation = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.adLocation
                        let viewType = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.viewType
                        if(type === '311') { // 常规大图
                            if(record?.topCanvasType === 41 && adLocation === 'sns' && viewType === '0') {
                                return { disabled: false }
                            } else {
                                return { disabled: true }
                            }
                        } else if (type === '1707') { // 卡片横板大图
                            if(record?.topCanvasType === 142 || record?.topCanvasType === 61) { // 视频不给选
                                return { disabled: true }
                            } else {
                                return { disabled: false }
                            }
                        } else if (type === '641' || type === '642' || type === '643') {
                            if(record?.topCanvasType === 101) { // 视频不给选
                                let componentGroup = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup
                                if(type === '641' && componentGroup.length === 3) {
                                    return { disabled: false }
                                } else if(type === '642' && componentGroup.length === 4) {
                                    return { disabled: false }
                                } else if(type === '643' && componentGroup.length === 6) {
                                    return { disabled: false }
                                } else {
                                    return { disabled: true }
                                }
                            } else {
                                return { disabled: true }
                            }
                        } else if (type === '1708') { // 卡片横版视频 图片轮播不给选
                            if (record?.topCanvasType === 142 || record?.topCanvasType === 61) {
                                return { disabled: false }
                            } else {
                                return { disabled: true }
                            }
                        } else if (type === '618') { // 视频4:3
                            let styleType = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.styleType
                            if ((record?.topCanvasType === 142 || record?.topCanvasType === 61) && adLocation === 'sns' && styleType === '0') {
                                let initWidth = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initWidth
                                let initHeight = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initHeight
                                if((initWidth && initHeight) && initWidth / initHeight == 4 / 3) {
                                    return { disabled: false }
                                } else {
                                    return { disabled: true }
                                }
                            } else {
                                return { disabled: true }
                            }
                        } else if (type === '1465') { // 视频16:9
                            let styleType = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.styleType
                            if ((record?.topCanvasType === 142 || record?.topCanvasType === 61) && adLocation === 'sns' && styleType === '0') {
                                let initWidth = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initWidth
                                let initHeight = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initHeight
                                if((initWidth && initHeight) && initWidth / initHeight == 16 / 9) {
                                    return { disabled: false }
                                } else {
                                    return { disabled: true }
                                }
                            } else {
                                return { disabled: true }
                            }
                        } else if (type === '1480') {
                            let styleType = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.styleType
                            if ((record?.topCanvasType === 142 || record?.topCanvasType === 61) && adLocation === 'sns' && styleType === '1') {
                                console.log('------->', JSON.stringify(JSON.parse(record?.pageContextList[0]?.pageContextList)[0]))
                                let initWidth = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initWidth
                                let initHeight = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.initHeight
                                if(initWidth == 750 && initHeight == 1334) {
                                    return { disabled: false }
                                } else {
                                    return { disabled: true }
                                }
                            } else {
                                return { disabled: true }
                            }
                        }
                        return { disabled: false }
                    }
                }}
            />

        </Modal>
    </>
}

export default React.memo(SelectPageNew)