from dash import dcc, html
import feffery_antd_components as fac
from flask import session

from . import profile
from api.modmag import get_cluster_info_api

from config.global_config import ApiBaseUrlConfig

# import callbacks.system_c.user_c.user_c
import callbacks.model_c.modmag_c
from utils.common import process_string
from utils.mod_mag import get_supervisor_info

def render(*args, **kwargs):
    button_perms = kwargs.get('button_perms')
    cluster_info = get_cluster_info_api()
    supervisor_data = get_supervisor_info(cluster_info)
    return [
        # dcc.Store(id='model-infos', data=card_data),
        html.Div(
            [
                fac.AntdSpace(
                    [
                        fac.AntdDivider('Supervisor', innerTextOrientation='left'),
                        fac.AntdSpace(
                            fac.AntdTable(
                            columns=[
                                {
                                    'dataIndex': '字段1',
                                    'title': 'item',
                                    'width': '20%'
                                    # 'renderOptions': {
                                    #     'renderType': 'ellipsis'
                                    # },
                                },
                                {
                                    'dataIndex': '字段2',
                                    'title': 'value/Usage',
                                    'width': '20%'
                                    # 'renderOptions': {
                                    #     'renderType': 'ellipsis'
                                    # },
                                },
                                {
                                    'dataIndex': '字段3',
                                    'title': 'other/total',
                                    'width': '40%'
                                    # 'renderOptions': {
                                    #     'renderType': 'ellipsis'
                                    # },
                                },
                            ],
                            data = supervisor_data,
                            pagination = {'hideOnSinglePage': True},
                            style={
                                'cursor': 'pointer',
                                'width': "100%",  # 使表格宽度适应父容器
                                'height': '20vh',  # 使表格高度占视口高度的 40%
                                # 'overflowY': 'auto'  # 使表格在高度超过容器时可滚动
                            },
                        )),
                        fac.AntdDivider('Workers', innerTextOrientation='left', style={'marginTop': '10px'}),  # 设置顶部的外边距为10px
                        # fac.AntdTable(
                        #     columns=[
                        #         {'title': f'字段{i}', 'dataIndex': f'字段{i}', 'width': width}
                        #         for i, width in zip(
                        #             range(1, 6), ['10%', '20%', '30%', '25%', '15%']
                        #         )
                        #     ],
                        #     data=[{f'字段{i}': '示例内容' for i in range(1, 6)}] * 3,
                        #     pagination = {'hideOnSinglePage': True},
                        #     style={
                        #         'cursor': 'pointer',
                        #         'width': "100%",  # 使表格宽度适应父容器
                        #         'height': '25vh',  # 使表格高度占视口高度的 40%
                        #         # 'overflowY': 'auto'  # 使表格在高度超过容器时可滚动
                        #     },
                        # ),
                        # fac.AntdDivider('Worker-Details', innerTextOrientation='left'),
                        # fac.AntdTable(
                        #     columns=[
                        #         {'title': f'字段{i}', 'dataIndex': f'字段{i}', 'width': width}
                        #         for i, width in zip(
                        #             range(1, 6), ['10%', '20%', '30%', '25%', '15%']
                        #         )
                        #     ],
                        #     data=[{f'字段{i}': '示例内容' for i in range(1, 6)}] * 3,
                        #     pagination = {'hideOnSinglePage': True},
                        #     style={
                        #         'cursor': 'pointer',
                        #         'width': "100%",  # 使表格宽度适应父容器
                        #         'height': '25vh',  # 使表格高度占视口高度的 40%
                        #         # 'overflowY': 'auto'  # 使表格在高度超过容器时可滚动
                        #     },
                        # ),
                    ],
                    direction='vertical',
                    style={
                        'width': '100%',
                    }
                )
            ],
            style={
                # 'padding': '50px 100px',
                'width': '100%',
                'height': '100vh',  # 使布局高度适配屏幕高度
                'boxSizing': 'border-box',  # 确保 padding 不影响整体宽度计算
                'display': 'flex',
                # 'flexDirection': 'column',
                # 'justifyContent': 'space-between'
            }
        )

    ]