import dash
from server import app
from dash import html
import feffery_antd_components as fac
import feffery_utils_components as fuc
from feffery_dash_utils.style_utils import style
from dash.dependencies import Input, ClientsideFunction,Output, State


def render(*args, **kwargs):  

    return [
            # 使用cdn引入X6所需资源
        # html.Div('该网页是一个测试页面，谢谢访问！'),

        html.Div(
                [
                    fac.AntdSpace(
                        [
                            fac.AntdRow(
                                [
                                    fac.AntdCol(
                                        fac.AntdFormItem(
                                            fac.AntdSelect(
                                                id='er-select',
                                                placeholder='数据域',
                                                options=[
                                                    {
                                                        'label': '资讯域',
                                                        'value': '资讯域'
                                                    },
                                                    {
                                                        'label': '客户域',
                                                        'value': '客户域'
                                                    }
                                                ],
                                                style={
                                                    'width': 200
                                                }
                                            ),
                                            label='数据域'
                                        ),
                                    ),
                                    fac.AntdCol(
                                        fac.AntdFormItem(
                                            fac.AntdButton(
                                                '加载模型',
                                                id='render-er',
                                                type='primary'
                                            )
                                        )
                                    ),

                                ],
                                style=style(width="100%"),
                            ),
                            
                                
                        ],
                        direction="vertical",
                        style=style(width="80%"), #,height="1%"
                    ),
                
                    fac.AntdSpace(
                        [
                            html.Div(
                                id="er-container",
                                style=style( height=1000, border="1px solid transparent"),
                            ),
                        ],
                        direction="vertical",
                        style=style(width="100%"),

                    )
                ],
                style=style(padding="10px 10px",height=800),
            ),


fuc.FefferyExternalJs(
            id='external-js-er',
            jsUrl='https://registry.npmmirror.com/@antv/x6/2.18.1/files/dist/index.js'
),


    ]



# 定义客户端函数
clientside_func = ClientsideFunction(
    namespace="clientside",
    function_name="renderER"
)


app.clientside_callback(
    clientside_func,
    Input("render-er", "nClicks"),
    State('er-select', 'value'),
    prevent_initial_call=True
)