import { Button, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import '../../tencentAdPutIn/index.less'
import { useAjax } from '@/Hook/useAjax';
import { getCorpRelationAllApi, getCustomerServiceGroupListApi } from '@/services/adqV3/global';
import { SearchOutlined } from '@ant-design/icons';
import columns from './tableConfig';
import SettingsEnterprise from './settingsEnterprise';

const Group: React.FC<{ adAccountId?: number }> = ({ adAccountId }) => {

    /**********************************/
    const [queryParamsNew, setQueryParamsNew] = useState<{ adAccountId: number, pageNum: number, pageSize: number, tencentCorpId?: string }>({ pageNum: 1, pageSize: 20, adAccountId: adAccountId || 0 })
    const [settingsData, setSettingsData] = useState<{ visible: boolean, data: any }>({ visible: false, data: {} })

    const getCustomerServiceGroupList = useAjax((params) => getCustomerServiceGroupListApi(params))
    const getCorpRelationAll = useAjax((params) => getCorpRelationAllApi(params))
    /**********************************/

    useEffect(() => {
        if (adAccountId) {
            getCorpRelationAll.run({ adAccountId })
        }
    }, [adAccountId])

    useEffect(() => {
        if (adAccountId) {
            getCustomerServiceGroupList.run({ ...queryParamsNew, adAccountId })
        }
    }, [queryParamsNew, adAccountId])

    const handleEdit = (data: any) => {
        setSettingsData({ visible: true, data })
        // setQueryParamsNew({ ...queryParamsNew, tencentCorpId: data.tencentCorpId })
    }

    return <>
        <div className="flexStart" style={{ gap: 8, marginBottom: 16 }}>
            <Select
                showSearch
                placeholder="请选择企业"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                }
                style={{ width: 200 }}
                allowClear
                value={queryParamsNew?.tencentCorpId}
                loading={getCorpRelationAll.loading}
                onChange={(e) => {
                    setQueryParamsNew({ ...queryParamsNew, tencentCorpId: e, pageNum: 1 })
                }}
                options={getCorpRelationAll?.data?.map((item: { corpName: string; tencentCorpId: string; }) => ({ label: item.corpName, value: item.tencentCorpId }))}
            />
            <Button type="primary" icon={<SearchOutlined />} loading={getCustomerServiceGroupList.loading} onClick={() => getCustomerServiceGroupList.refresh()}>刷新</Button>
        </div>
        <Table
            columns={columns(handleEdit)}
            dataSource={getCustomerServiceGroupList.data?.records}
            size="small"
            loading={getCustomerServiceGroupList?.loading}
            scroll={{ y: 600, x: 1000 }}
            rowKey={'groupId'}
            pagination={{
                total: getCustomerServiceGroupList.data?.total,
                defaultPageSize: 20,
                current: getCustomerServiceGroupList.data?.current,
                pageSize: getCustomerServiceGroupList.data?.size
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryParamsNew({ ...queryParamsNew, pageNum: current as number, pageSize: pageSize as number || 20 })
            }}

        />

        {/* 设置修改 */}
        {settingsData.visible && <SettingsEnterprise
            {...settingsData}
            adAccountId={adAccountId as number}
            onClose={() => setSettingsData({ visible: false, data: {} })}
            onChange={() => {
                getCustomerServiceGroupList.refresh()
                setSettingsData({ visible: false, data: {} })
            }}
        />}
    </>
};

export default React.memo(Group);