{
  "controller": "MistExpressionDemoController",
  "styles": {
    "title": {
      "font-style": "bold",
      "font-size": 15,
      "padding-top": 15,
      "padding-left": 10,
      "padding-bottom": 1,
      "color": "#666",
      "background-color": "#ddd"
    },
    "subtitle": {
      "lines": 0,
      "font-size": 12,
      "font-style": "light",
      "padding-bottom": 4,
      "padding-left": 10,
      "color": "#999",
      "background-color": "#ddd"
    },
    "header": {
      "color": "white",
      "background-color": "#6FE24810",
      "width": "50%",
      "font-size": 12,
      "font-style": "light",
      "lines": 0,
      "alignment": "center"
    },
    "code": {
      "font-size": 12,
      "font-name": "Courier New",
      "lines": 0,
      "line-spacing": 1,
      "padding": 6
    }
  },
  "layout": {
    "vars": {
      "themeColor": "#E24810",
      "groups": [
        {
          "title": "字符串 (NSString)",
          "exps": [
            "'123'",
            "'\"quoted\"'",
            "\"123\"",
            "\"Tom's cat\"",
            "'new\\nline'",
            "'\\\\,\\',\\t,\\u4E2D'"
          ]
        },
        {
          "title": "数字 (NSNumber)",
          "exps": [
            "5",
            "1.23",
            "0.12",
            "1.3e-2",
            "0.1E2",
            "1.0E+2"
          ]
        },
        {
          "title": "布尔值 (NSNumber)",
          "exps": [
            "true",
            "false"
          ]
        },
        {
          "title": "空值 (nil)",
          "exps": [
            "null",
            "nil"
          ]
        },
        {
          "title": "数组 (NSArray)",
          "exps": [
            "[1, 2, 3]",
            "['a', 2, [1, 2]]"
          ]
        },
        {
          "title": "字典 (NSDictionary)",
          "exps": [
            "{'a': 1, 'b': 2}",
            "{1: 1, 2: 2}"
          ]
        }
      ]
    },
    "style": {
      "direction": "vertical",
      "height": "${_height_ - 44 - screen.statusBarHeight - screen.safeArea.bottom}",
      "background-color": "#ddd"
    },
    "children": [
      {
        "tag": 1,
        "type": "scroll",
        "style": {
          "direction": "vertical",
          "scroll-direction": "vertical",
          "flex-grow": 1
        },
        "children": [
          {
            "repeat": "${groups}",
            "style": {
              "direction": "vertical"
            },
            "children": [
              {
                "type": "text",
                "class": "title",
                "style": {
                  "text": "${_item_.title}"
                }
              },
              {
                "type": "text",
                "class": "subtitle",
                "style": {
                  "html-text": "${_item_.desc}"
                }
              },
              {
                "style": {
                  "height": "1px",
                  "background-color": "#888"
                }
              },
              {
                "style": {
                  "direction": "vertical"
                },
                "children": [
                  {
                    "style": {
                      "spacing": "1px",
                      "height": 20
                    },
                    "children": [
                      {
                        "type": "text",
                        "class": "header",
                        "style": {
                          "text": "表达式",
                        }
                      },
                      {
                        "type": "text",
                        "class": "header",
                        "style": {
                          "text": "结果"
                        }
                      }
                    ]
                  },
                  {
                    "style": {
                      "height": "1px",
                      "background-color": "#ccc"
                    }
                  },
                  {
                    "repeat": "${_item_.exps}",
                    "vars": {
                      "action": {
                        "updateState:": {
                          "exp": "${_item_}"
                        }
                      }
                    },
                    "style": {
                      "spacing": "1px"
                    },
                    "on-tap": "${state.try ? action : nil}",
                    "children": [
                      {
                        "type": "text",
                        "class": "code",
                        "style": {
                          "text": "${_item_}",
                          "width": "50%",
                          "background-color": "${_index_ % 2 == 0 ? '#1FE24810' : '#2FE24810'}"
                        }
                      },
                      {
                        "type": "text",
                        "class": "code",
                        "style": {
                          "text": "${MistExpressionDemoController.toString(eval(_item_))}",
                          "width": "50%",
                          "background-color": "${_index_ % 2 == 0 ? '#1FE24810' : '#2FE24810'}",
                          "alignment": "center"
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "style": {
                  "height": "1px",
                  "background-color": "#888"
                }
              }
            ]
          }
        ]
      },
      {
        "tag": 2,
        "on-tap": {
          "updateState:": {
            "try": "${!state.try}"
          }
        },
        "style": {
          "auto-animation": true,
          "margin-top": "auto",
          "background-color": "#E24810",
          "direction": "vertical",
          "padding-bottom": "${screen.safeArea.bottom}",
          "margin-bottom": "${-screen.safeArea.bottom}"
        },
        "children": [
          {
            "type": "text",
            "style": {
              "flex-grow": "${state.try ? 0 : 1}",
              "text": "试一试",
              "color": "white",
              "font-size": "${state.try ? 12 : 15}",
              "font-style": "bold",
              "margin-right": "auto",
              "margin-left": "${state.try ? 7 : 'auto'}",
              "margin-top": "${state.try ? 3 : 8}",
              "margin-bottom": "${state.try ? 3 : 8}"
            }
          },
          {
            "gone": "${!state.try}",
            "on-update-appear": {
              "type": "animation",
              "params": {
                "delay": 0.2,
                "duration": 0.2,
                "fill-mode": "backwards",
                "key-path": "opacity",
                "from": 0
              }
            },
            "on-update-disappear": {
              "type": "animation",
              "params": {
                "duration": 0.2,
                "animations": [
                  {
                    "key-path": "hidden",
                    "from": false,
                    "duration": 0.4
                  },
                  {
                    "key-path": "opacity",
                    "to": 0
                  }
                ]
              }
            },
            "tag": 1,
            "style": {
              "direction": "vertical"
            },
            "children": [
              {
                "type": "textview",
                "on-display": {
                  "onDisplay:sender:": ""
                },
                "on-change": {
                  "onTextChange:body:": ""
                },
                "style": {
                  "height": 60,
                  "background-color": "white",
                  "corner-radius-top-left": 3,
                  "corner-radius-top-right": 3,
                  "text": "${state.exp}",
                  "placeholder": "在此输入表达式",
                  "keyboard-type": "ascii-capable",
                  "font-size": 12,
                  "font-name": "Courier New",
                  "lines": 0,
                  "line-spacing": 1,
                  "padding": 4,
                  "padding-left": -1,
                  "padding-right": -1,
                  "margin-left": 5,
                  "margin-right": 5
                }
              },
              {
                "type": "text",
                "style": {
                  "background-color": "white",
                  "corner-radius-bottom-left": 3,
                  "corner-radius-bottom-right": 3,
                  "html-text": "<font color='#aaa' size='12'>结果：</font>${MistExpressionDemoController.toString(eval(state.exp))}",
                  "font-name": "Courier New",
                  "font-size": 12,
                  "line-spacing": 1,
                  "lines": 0,
                  "padding": 4,
                  "margin": 5,
                  "margin-top": "1px"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}