<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Steedos</title>

    <script src="https://unpkg.steedos.cn/@steedos-widgets/amis@6.3.0-patch.7/sdk/sdk.js"></script>

    <link rel="stylesheet" href="https://unpkg.steedos.cn/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" />
    <link rel="stylesheet" href="https://unpkg.steedos.cn/@salesforce-ux/design-system@2.22.2/assets/styles/salesforce-lightning-design-system.min.css">

    <link rel="stylesheet" href="https://unpkg.steedos.cn/@steedos-widgets/amis@6.3.0-patch.3/lib/themes/antd.css">
    <link rel="stylesheet" href="https://unpkg.steedos.cn/@steedos-widgets/amis@6.3.0-patch.3/lib/helper.css">
    <link rel="stylesheet" href="https://unpkg.steedos.cn/@steedos-widgets/amis@6.3.0-patch.3/sdk/iconfont.css">
    
    <script src="https://unpkg.steedos.cn/lodash@4.17.21/lodash.js"></script>
    <script src="https://unpkg.steedos.cn/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.steedos.cn/crypto-js@4.1.1/crypto-js.js"></script>
    <script async="">
      window['React'] = amisRequire('react');
      window['ReactDOM'] = amisRequire('react-dom');
      window['moment'] = amisRequire('moment');
      window['Amis'] = amisRequire('amis');
      window['AmisCore'] = amisRequire('amis-core');
      window['AmisUI'] = amisRequire('amis-ui');

      window['Amis'].registerFilter('t', function (key,param) {
          return typeof key === 'string' ? window.t(key,param) : key;
        })

      // 监听窗口的 load 事件，确保所有脚本都加载完成
      window.addEventListener('load', function() {
          window.lodash = window._; // 将 window.lodash 设置为 window._
      });

      const loadJs = (url, callback)=>{
        let scriptTag = document.createElement("script");
        scriptTag.type = "text/javascript";
        scriptTag.src = url;
        scriptTag.async = false;
        document.getElementsByTagName("head")[0].appendChild(scriptTag);
        scriptTag.onload = function(script){
            if(callback){
                callback(script)
            }
        }
    }

    const loadCss = (url)=>{
        let styleTag = document.createElement("link");
        styleTag.setAttribute("rel", "stylesheet");
        styleTag.setAttribute("type", "text/css");
        styleTag.setAttribute("href", url);
        document.getElementsByTagName("head")[0].appendChild(styleTag);
    }

    window.loadJs = loadJs;
    window.loadCss = loadCss;

    </script>
  </head>
  <body class="skin-blue-light fixed steedos sidebar-mini three-columns" >
    <div id="root" class="steedos skin-blue-light creator h-full flex flex-col relative overflow-hidden sm:bg-gray-50 amis-scope"></div>
    <script>
        const pageSchema = {
        "type": "page",
        "body": [
            {
            "type": "button",
            "label": "打印1",
            "level": "primary",
            "className": "mr-2",
            "onEvent": {
                "click": {
                    "actions": [
                        {
                        "actionType": "print",
                        "args": {
                            "id": "mycrud"
                        }
                        }
                    ]
                    }
                }
            },
            // {
            //     "type": "form",
            //     "id": "myform",
            //     "body": [
            //     {
            //         "type": "input-text",
            //         "name": "name",
            //         "label": "姓名："
            //     },
            //     {
            //         "name": "email",
            //         "type": "input-email",
            //         "label": "邮箱："
            //     }
            //     ]
            // },
            {
      "type": "crud",
      "id": "mycrud",
      "syncLocation": false,
      "columns": [
        {
          "name": "id",
          "label": "ID"
        },
        {
          "name": "engine",
          "label": "Rendering engine"
        },
        {
          "name": "browser",
          "label": "Browser"
        },
        {
          "name": "platform",
          "label": "Platform(s)"
        },
        {
          "name": "version",
          "label": "Engine version"
        },
        {
          "name": "grade",
          "label": "CSS grade"
        }
      ]
    }
        ]
        };
        const amis = amisRequire('amis/embed');
        amis.embed('#root', pageSchema, {locale: 'zh-CN'}, {
            theme: 'antd'
        })
    </script>
  </body>
</html>
