<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1;padding-bottom: 20px;">
  <!-- #endif -->
    <view>
      <page-head title="getApp"></page-head>
      <view class="uni-padding-wrap">
        <text class="uni-common-mt">globalProperties string: {{ globalPropertiesStr }}</text>
        <text class="uni-common-mt">globalProperties number: {{ globalPropertiesNum }}</text>
        <text class="uni-common-mt">globalProperties boolean: {{ globalPropertiesBool }}</text>
        <text class="uni-common-mt">globalProperties object: {{ globalPropertiesObj }}</text>
        <text class="uni-common-mt">globalProperties null: {{ globalPropertiesNull }}</text>
        <text class="uni-common-mt">globalProperties array: {{ globalPropertiesArr }}</text>
        <text class="uni-common-mt">globalProperties set: {{ globalPropertiesSet }}</text>
        <text class="uni-common-mt">globalProperties map: {{ globalPropertiesMap }}</text>
        <text class="uni-common-mt">globalProperties reactiveObj.str: {{ globalPropertiesReactiveObj['str'] }}</text>
        <text class="uni-common-mt">globalProperties reactiveObj.num: {{ globalPropertiesReactiveObj['num'] }}</text>
        <text class="uni-common-mt">globalProperties reactiveObj.boolean: {{ globalPropertiesReactiveObj['bool'] }}</text>
        <text class="uni-common-mt">globalProperties fun 返回值: {{ globalPropertiesFn() }}</text>
        <button @click="updateGlobalProperties" class="uni-common-mt">update globalProperties</button>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  type MyGlobalProperties = {
    str: string;
    num: number;
    bool: boolean;
    obj: UTSJSONObject;
    null: string | null;
    arr: number[];
    set: Set<string>;
    map: Map<string, number>;
    reactiveObj: UTSJSONObject;
  }
  export default {
    data() {
      return {
        myGlobalProperties: {
          str: '',
          num: 0,
          bool: false,
          obj: {},
          null: null,
          arr: [],
          set: new Set<string>(),
          map: new Map<string, number>(),
          reactiveObj: {
            str: '',
            num: 0,
            bool: false,
          } as UTSJSONObject,
        } as MyGlobalProperties,
        globalPropertiesFnRes: '',
        bbb: 'my bbb'
      }
    },
    onLoad() {
      this.getglobalProperties()
    },
    methods: {
      getglobalProperties() {
        this.myGlobalProperties.str = this.globalPropertiesStr
        this.myGlobalProperties.num = this.globalPropertiesNum
        this.myGlobalProperties.bool = this.globalPropertiesBool
        this.myGlobalProperties.obj = this.globalPropertiesObj
        this.myGlobalProperties.null = this.globalPropertiesNull
        this.myGlobalProperties.arr = this.globalPropertiesArr
        this.myGlobalProperties.set = this.globalPropertiesSet
        this.myGlobalProperties.map = this.globalPropertiesMap
        this.myGlobalProperties.reactiveObj = this.globalPropertiesReactiveObj
        this.globalPropertiesFnRes = this.globalPropertiesFn()
      },
      updateGlobalProperties() {
        this.globalPropertiesStr = 'new string'
        this.globalPropertiesNum = 100
        this.globalPropertiesBool = true
        this.globalPropertiesObj = {
          str: 'new globalProperties obj string',
          num: 100,
          bool: true,
        }
        this.globalPropertiesNull = 'not null'
        this.globalPropertiesArr = [1, 2, 3]
        this.globalPropertiesSet = new Set(['a', 'b', 'c'])
        this.globalPropertiesMap = new Map([['a', 1], ['b', 2], ['c', 3]])
        this.globalPropertiesReactiveObj['str'] = 'new reactive string'
        this.globalPropertiesReactiveObj['num'] = 200
        this.globalPropertiesReactiveObj['bool'] = true
        this.getglobalProperties()
      }
    },
  }
</script>
