import { Badge, Button, Input, Modal, Space, Table, Tag, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import '../../tencentAdPutIn/index.less'
import { getAdqLandingPageOfficialListApi } from '@/services/adqV3/global';
import { useAjax } from '@/Hook/useAjax';
import { SyncOutlined } from '@ant-design/icons';
import { PageStatusEnum } from '@/services/launchAdq/enum';
const { Text } = Typography;

/**
 * 选择落地页
 * @returns 
 */
const SelectPage: React.FC<{ accountId: number, value?: any, onChange?: (e: any) => void }> = ({ accountId, value, onChange }) => {

    /***********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
    const [queryForm, setQueryForm] = useState<{ accountId?: number, pageName?: string, ownerUid?: number, pageSize: number, pageNum: number, isSqDownPage: boolean }>({ pageNum: 1, pageSize: 20, isSqDownPage: false })
    const listAjax = useAjax((params) => getAdqLandingPageOfficialListApi(params))
    /***********************************/

    useEffect(() => {
        if (accountId) {
            const params: any = {
                ...queryForm,
                // pageStatus: 'NORMAL',
                pageType: 'PAGE_TYPE_OFFICIAL',
                accountId
            }
            delete params.isSqDownPage
            listAjax.run(params)
        }
    }, [accountId, queryForm])

    const handleOk = () => {
        onChange?.(selectedRowKeys?.[0])
        setVisible(false)
    }

    return <>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {value && <div style={{ flex: 1, overflow: 'hidden' }}><Text ellipsis>{Array.isArray(value) ? value.map((item: { pageName: any; pageId: any; }) => `${item.pageName}（${item.pageId}）`) : `${value?.pageName}（${value?.pageId}）`}</Text></div>}
            <Button type="primary" onClick={() => {
                setVisible(true)
                if (value) setSelectedRowKeys(Array.isArray(value) ? value : [value])
                else setSelectedRowKeys([])
            }}>选择官方落地页</Button>
        </div>
        {visible && <Modal
            title={<strong>官方落地页</strong>}
            open={visible}
            onOk={handleOk}
            onCancel={() => {
                setVisible(false)
            }}
            className='modalResetCss'
            width={750}
        >
            <Space style={{ marginBottom: 10 }}>
                <Input value={queryForm?.pageName} style={{ width: 150 }} allowClear placeholder='请输入落地页名称' onChange={(e) => setQueryForm({ ...queryForm, pageNum: 1, pageName: e.target.value })} />
                <Button style={{ padding: 0, margin: 0 }} icon={<SyncOutlined />} type='link' loading={listAjax?.loading} onClick={() => { listAjax?.refresh() }}><span style={{ fontSize: 12 }}>刷新</span></Button>
            </Space>

            <Table
                columns={[
                    {
                        title: '落地页ID',
                        dataIndex: 'pageId',
                        key: 'pageId',
                        align: 'center',
                        width: 85
                    },
                    {
                        title: '落地页名称',
                        dataIndex: 'pageName',
                        key: 'pageName',
                        ellipsis: true,
                        width: 300
                    },
                    {
                        title: '落地页状态',
                        dataIndex: 'pageStatus',
                        key: 'pageStatus',
                        align: 'center',
                        width: 90,
                        render: (a: string | number) => {
                            return <Badge status={a === 'NORMAL' ? "success" : a === 'DELETED' ? "error" : 'processing'} text={PageStatusEnum[a as keyof typeof PageStatusEnum]} />
                        }
                    },
                ]}
                dataSource={listAjax?.data?.records}
                size="small"
                loading={listAjax?.loading}
                scroll={{ y: 400 }}
                bordered
                rowKey={'pageId'}
                pagination={{
                    total: listAjax?.data?.total,
                    defaultPageSize: 20,
                    current: listAjax?.data?.current,
                    pageSize: listAjax?.data?.size
                }}
                onChange={(pagination) => {
                    const { current, pageSize } = pagination
                    setQueryForm({ ...queryForm, pageNum: current as number, pageSize: pageSize as number || 20 })
                }}
                rowSelection={{
                    selectedRowKeys: selectedRowKeys?.map((item: any) => item?.pageId),
                    type: 'radio',
                    onChange(selectedRowKeys, selectedRows, info) {
                        setSelectedRowKeys(selectedRows)
                    },
                }}
            />
        </Modal>}
    </>;
};

export default SelectPage;