import { Button, Card, Input, Select, Table } from "antd"
import React, { useEffect, useState } from "react"
import '../../tencentAdPutIn/index.less'
import { getAdqLandingPageListApi, getWXDownPageAuthInfoListApi } from "@/services/adqV3/global";
import { useAjax } from "@/Hook/useAjax";
import { useModel } from "umi";
import { SearchOutlined } from "@ant-design/icons";
import columns from "./tableConfig";
import CopyPage from "./copyPage";

interface AjaxProps {
    pageNum: number;
    pageSize: number;
    accountId?: number;
    pageName?: string;
    pageType?: string;
    pageStatus?: string;
    ownerUid?: number;
}
/**
 * 原生推广页
 * @returns 
 */
const WechatCanvasPage: React.FC = () => {

    /********************************/
    const { getAllUserAccount } = useModel('useLaunchAdq.useAdAuthorize')
    const [queryParamsNew, setQueryParamsNew] = useState<AjaxProps>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [pageData, setPageData] = useState<any>()

    const getAdqLandingPageList = useAjax((params) => getAdqLandingPageListApi(params))
    const getWXDownPageAuthInfoList = useAjax((params) => getWXDownPageAuthInfoListApi(params))
    /********************************/

    useEffect(() => {
        // 获取账户列表
        getAllUserAccount.run().then(res => {
            setQueryParamsNew({ ...queryParamsNew, accountId: res?.data?.[0]?.accountId })
        })
    }, [])

    // 落地页列表
    useEffect(() => {
        if (queryParamsNew?.accountId) {
            getAdqLandingPageList.run(queryParamsNew)
        }
    }, [queryParamsNew])

    // 授权落地页
    useEffect(() => {
        if (queryParamsNew?.accountId) {
            getWXDownPageAuthInfoList.run(queryParamsNew.accountId)
        }
    }, [queryParamsNew.accountId])

    // 批量复制
    const handleCopy = (data: any) => {
        setVisible(true)
        setPageData(data)
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Select
                placeholder="请先选择媒体账户"
                maxTagCount={1}
                style={{ width: 250 }}
                autoClearSearchValue={false}
                filterOption={(input: any, option: any) => {
                    let newInput: string[] = input ? input?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
                    return newInput?.some(val => option!.children?.toString().toLowerCase()?.includes(val))
                }}
                value={queryParamsNew.accountId}
                onChange={(e) => {
                    setQueryParamsNew({ ...queryParamsNew, accountId: e, ownerUid: undefined })
                }}
                showSearch
            >
                {getAllUserAccount?.data?.data?.map((item: any) => <Select.Option value={item.accountId} key={item.id}>{item.remark ? item.accountId + '_' + item.remark : item.accountId}</Select.Option>)}
            </Select>
            {queryParamsNew?.accountId && <>
                <Select
                    placeholder='选择原生页授权方信息'
                    style={{ width: 210 }}
                    showSearch
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    onChange={(value) => {
                        setQueryParamsNew({ ...queryParamsNew, pageNum: 1, ownerUid: value })
                    }}
                    loading={getWXDownPageAuthInfoList.loading}
                    value={queryParamsNew?.ownerUid}
                    dropdownMatchSelectWidth={false}
                >
                    {getWXDownPageAuthInfoList.data?.map((item: { accountId: number; accountName: string }) => {
                        return <Select.Option value={item.accountId} key={item.accountId}>{item.accountName}({item.accountId})</Select.Option>
                    })}
                </Select>
                <Input value={queryParamsNew?.pageName} style={{ width: 180 }} allowClear placeholder='请输入落地页名称' onChange={(e) => setQueryParamsNew({ ...queryParamsNew, pageNum: 1, pageName: e.target.value })} />
            </>}

            <Button type="primary" icon={<SearchOutlined />} loading={getAdqLandingPageList.loading} onClick={() => getAdqLandingPageList.refresh()}>刷新</Button>
        </div>}
    >
        <Table
            columns={columns(handleCopy)}
            dataSource={getAdqLandingPageList.data?.records}
            size="small"
            loading={getAdqLandingPageList?.loading || getAllUserAccount.loading}
            scroll={{ y: 600 }}
            bordered
            rowKey={'pageId'}
            pagination={{
                total: getAdqLandingPageList.data?.total,
                defaultPageSize: 20,
                current: getAdqLandingPageList.data?.current,
                pageSize: getAdqLandingPageList.data?.size
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryParamsNew({ ...queryParamsNew, pageNum: current as number, pageSize: pageSize as number || 20 })
            }}
        />

        {visible && <CopyPage
            accountId={queryParamsNew.accountId as number}
            pageData={pageData}
            visible={visible}
            onClose={() => {
                setVisible(false)
                setPageData(undefined)
            }}
            onChange={() => {
                setVisible(false)
                setPageData(undefined)
                getAdqLandingPageList.refresh()
            }}
        />}
    </Card>
}

export default WechatCanvasPage