import { useAjax } from '@/Hook/useAjax';
import { getUserAccountListApi } from '@/services/launchAdq/adAuthorize';
import { Input, Table } from 'antd';
import React, { useEffect, useState } from 'react';

interface Props {
    accountId: number
    value?: number[]
    onChange?: (value: number[]) => void
}
const SelectShareAccount: React.FC<Props> = ({ accountId, value, onChange }) => {

    /*********************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, accountIdList?: string }>({ pageNum: 1, pageSize: 20 })
    const [selectedRows, setSelectedRows] = useState<number[]>([])

    const getUserAccountList = useAjax((params) => getUserAccountListApi(params))
    /*********************************/

    useEffect(() => {
        if (value && JSON.stringify(value) !== JSON.stringify(selectedRows)) {
            setSelectedRows([...value])
        }
    }, [value, selectedRows])

    useEffect(() => {
        const { accountIdList, ...params} = queryForm
        const query: any = { ...params, adUnitAccountId: accountId }
        if (accountIdList) {
            query.accountIdList = accountIdList.split(/[,，\n\s]+/ig).filter((item: any) => item)
        }
        getUserAccountList.run(query)
    }, [accountId, queryForm])

    return <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <Input.TextArea
            rows={1}
            autoSize={{ minRows: 1, maxRows: 1 }}
            placeholder="账户(多个，,空格换行)"
            style={{ width: 180 }}
            allowClear
            value={queryForm?.accountIdList}
            onChange={(e) => setQueryForm({ ...queryForm, accountIdList: e.target.value })}
        />
        <Table
            size={'small'}
            bordered
            dataSource={getUserAccountList?.data?.records}
            rowKey={'accountId'}
            scroll={{ y: 220 }}
            pagination={{
                pageSize: getUserAccountList?.data?.size || 50,
                current: getUserAccountList?.data?.current || 1,
                showTotal: total => `总共 ${total} 账户`,
                total: getUserAccountList?.data?.total,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 50,//默认初始的每页条数
                onChange: (page, pageSize) => {
                    setQueryForm({ ...queryForm, pageNum: page, pageSize })
                }
            }}
            loading={getUserAccountList.loading}
            columns={[
                {
                    title: '账号',
                    dataIndex: 'accountId',
                    key: 'accountId',
                    width: 80,
                    align: 'center',
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value}</span>
                    }
                },
                {
                    title: '业务单元账号',
                    dataIndex: 'adUnitAccountId',
                    key: 'adUnitAccountId',
                    render(value) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    }
                }
            ]}
            rowSelection={{
                selectedRowKeys: selectedRows,
                onSelect: (record: { accountId: number }, selected: boolean) => {
                    if (selected) {
                        selectedRows.push(record.accountId)
                        setSelectedRows([...selectedRows])
                        onChange?.([...selectedRows])
                    } else {
                        const newSelectAccData = selectedRows.filter((item: number) => item !== record.accountId)
                        setSelectedRows([...newSelectAccData])
                        onChange?.([...newSelectAccData])
                    }
                },
                onSelectAll: (selected: boolean, selectedRowss: { accountId: number }[], changeRows: { accountId: number }[]) => {
                    
                    if (selected) {
                        const newSelectAccData = [...selectedRows]
                        changeRows.forEach((item: { accountId: number }) => {
                            const index = newSelectAccData.findIndex((ite: number) => ite === item.accountId)
                            if (index === -1) {
                                newSelectAccData.push(item.accountId)
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                        onChange?.([...newSelectAccData])
                    } else {
                        const newSelectAccData = selectedRows.filter((item: number) => {
                            const index = changeRows.findIndex((ite: { accountId: number }) => ite.accountId === item)
                            if (index !== -1) {
                                return false
                            } else {
                                return true
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                        onChange?.([...newSelectAccData])
                    }
                }
            }}
        />
    </div>
};

export default SelectShareAccount;