import { useAjax } from '@/Hook/useAjax';
import { getComponentSharingApi } from '@/services/adqV3/global';
import { Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';

interface Props {
    data: any;
    visible?: boolean;
    onClose?: () => void;
}
const ShareDetails: React.FC<Props> = ({ visible, onClose, data }) => {

    /********************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, isDeleted?: boolean }>({ pageNum: 1, pageSize: 20 })
    const getComponentSharing = useAjax((params) => getComponentSharingApi(params))
    /********************************/

    useEffect(() => {
        getComponentSharing.run({ ...queryForm, componentId: data.componentId, adAccountId: data.accountId })
    }, [queryForm])

    return <Modal
        title={<strong style={{ fontSize: 20 }}>组件共享详情</strong>}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={700}
        className={`modalResetCss`}
        maskClosable={false}
    >
        <div>
            <Table
                size={'small'}
                bordered
                dataSource={getComponentSharing?.data?.records}
                rowKey={'sharedAccountId'}
                scroll={{ y: 220 }}
                pagination={{
                    pageSize: getComponentSharing?.data?.size || 50,
                    current: getComponentSharing?.data?.current || 1,
                    showTotal: total => `总共 ${total} 账户`,
                    total: getComponentSharing?.data?.total,
                    showSizeChanger: true,
                    showLessItems: true,
                    defaultCurrent: 1,
                    defaultPageSize: 50,//默认初始的每页条数
                    onChange: (page, pageSize) => {
                        setQueryForm({ ...queryForm, pageNum: page, pageSize })
                    }
                }}
                loading={getComponentSharing.loading}
                columns={[
                    {
                        title: '账号',
                        dataIndex: 'sharedAccountId',
                        key: 'sharedAccountId',
                        width: 80,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    },
                    {
                        title: '共享状态',
                        dataIndex: 'sharedAccountType',
                        key: 'sharedAccountType',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value === 'ORGANIZATION' ? '全部共享' : '部分共享'}</span>
                        }
                    }
                ]}
            />
        </div>
    </Modal>
};

export default ShareDetails;