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,
    localtion?: number,
    productType?: string,
    crtSize?: number,
    onClose?: () => void
    onChange?: (data: any) => void,
    pageData?: any
    account?: {   // 用账户筛选落地页
        accountId?: number,
        accountType?: 'mp' | 'adq'
    }
}

function SelectPage(props: Props) {
    let { show, onClose, onChange, pageData, account, localtion, crtSize, productType = 'PRODUCTTYPE_WECHAT' } = 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
                        if (productType === 'PRODUCTTYPE_WECHAT') {
                            if (localtion === 0 && record?.topCanvasType === 142) {
                                return { disabled: false }
                            }
                            if (record?.topCanvasType === 142 && localtion !== 999 ) {  // 视频不给选
                                return { disabled: true }
                            }
                            if (record?.topCanvasType === 142 && localtion === 999 &&  crtSize && crtSize === 1480 && adLocation =='gh') {  // 朋友圈不给选卡片视频
                                return { disabled: true }
                            }
                            if (localtion || localtion === 0) {
                                if ((localtion === 0 || localtion === 101) && record?.topCanvasType === 101) {
                                    return { disabled: true }
                                }
                                let pageContextList = JSON.parse(record?.pageContextList[0].pageContextList)
                                if (crtSize && localtion === 999 && crtSize !== 1707 && record?.topCanvasType === 41 && pageContextList[0]?.viewType == 1) {
                                    return { disabled: true }
                                }
                                return { disabled: false }
                            }
                        } else if (productType === 'PRODUCTTYPE_LEAD_AD') {
                            let topCanvasType = record?.topCanvasType
                            if (localtion === 999) {
                                if ((topCanvasType === 41 || topCanvasType === 142) && adLocation =='gh') {
                                    return { disabled: true }
                                }
                            } else if (localtion === 0 || localtion === 101 || localtion === 8) {
                                let styleType = JSON.parse(record?.pageContextList[0]?.pageContextList)[0]?.styleType
                                if (topCanvasType === 101 || (topCanvasType === 142 && adLocation === 'sns' && styleType === '1')) {
                                    return { disabled: true }
                                }
                            }
                        }
                        
                        return { disabled: false }
                    }
                }}
            />

        </Modal>
    </>
}

export default React.memo(SelectPage)