import { useAjax } from '@/Hook/useAjax';
import { getLandingPageCustomerGroupListApi, GetPageCustomerGroupListProps } from '@/services/adqV3/global';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Input, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import AddLandingPageTieUp from './addLandingPageTieUp';

/**
 * 原生落地页与客服组关系
 * @returns 
 */
const LandingPageTieUp: React.FC<{ adAccountId?: number }> = ({ adAccountId }) => {

    /*******************************/
    const [queryParamsNew, setQueryParamsNew] = useState<GetPageCustomerGroupListProps>({ pageNum: 1, pageSize: 50 })
    const [visible, setVisible] = useState<boolean>(false)
    const [initialValues, setInitialValues] = useState<any>();

    const getLandingPageCustomerGroupList = useAjax((params) => getLandingPageCustomerGroupListApi(params))
    /*******************************/

    /** 获取关系列表 */
    useEffect(() => {
        if (adAccountId) {
            getLandingPageCustomerGroupList.run({ ...queryParamsNew, accountId: adAccountId })
        }
    }, [adAccountId, queryParamsNew])


    return <>
        <div className="flexStart" style={{ gap: 8, marginBottom: 16 }}>
            <Input.Search
                style={{ width: 220 }}
                enterButton
                placeholder='请输入原生推广页名称'
                onSearch={(e) => setQueryParamsNew({ ...queryParamsNew, pageName: e, pageNum: 1 })}
                allowClear
            />
            <Input.Search
                style={{ width: 220 }}
                enterButton
                placeholder='请输入原生推广页ID'
                onSearch={(e) => setQueryParamsNew({ ...queryParamsNew, pageId: e, pageNum: 1 })}
                allowClear
            />
            <Button type="primary" icon={<SearchOutlined />} loading={getLandingPageCustomerGroupList.loading} onClick={() => getLandingPageCustomerGroupList.refresh()}>刷新</Button>
            <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => {
                    setVisible(true)
                }}
            >新增</Button>
        </div>

        <Table
            columns={[
                {
                    title: '原生推广页名称',
                    dataIndex: 'pageName',
                    key: 'pageName',
                    width: 120,
                    ellipsis: true,
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value}</span>
                    },
                },
                {
                    title: '原生推广页ID',
                    dataIndex: 'pageId',
                    key: 'pageId',
                    width: 100,
                    ellipsis: true,
                    align: 'center',
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value}</span>
                    },
                },
                {
                    title: '客服组名称',
                    dataIndex: 'localCsgroupName',
                    key: 'localCsgroupName',
                    width: 120,
                    ellipsis: true,
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '客服组ID',
                    dataIndex: 'localCsgroupId',
                    key: 'localCsgroupId',
                    align: 'center',
                    width: 100,
                    ellipsis: true,
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    width: 300,
                    render(_, record) {
                        return <a
                            style={{ fontSize: 12 }}
                            onClick={() => {
                                setInitialValues(record)
                                setVisible(true)
                            }}
                        >修改</a>
                    },
                },
            ]}
            dataSource={getLandingPageCustomerGroupList.data?.records || []}
            loading={getLandingPageCustomerGroupList.loading}
            scroll={{ x: 1000 }}
            pagination={{
                current: queryParamsNew.pageNum,
                pageSize: queryParamsNew.pageSize,
                total: getLandingPageCustomerGroupList.data?.total,
                onChange: (pageNum, pageSize) => setQueryParamsNew({ ...queryParamsNew, pageNum, pageSize }),
            }}
            size="small"
            bordered
            rowKey="id"
        />

        {/* 新增 */}
        {visible && <AddLandingPageTieUp
            adAccountId={adAccountId as number}
            visible={visible}
            initialValues={initialValues}
            onChange={() => {
                getLandingPageCustomerGroupList.refresh()
                setInitialValues(undefined)
                setVisible(false)
            }}
            onClose={() => {
                setInitialValues(undefined)
                setVisible(false)
            }}
        />}
    </>;
};

export default React.memo(LandingPageTieUp);