<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-list">
          <view class="uni-list">
            <view
              class="uni-list-cell"
              v-for="(item, _) in items"
              style="align-items: center"
            >
              <view class="uni-pd">
                <view class="uni-label" style="width: 180px">{{
                  item.label
                }}</view>
              </view>
              <view class="uni-list-cell-db">
                <textarea
                  :auto-height="true"
                  :disabled="true"
                  placeholder="未获取"
                  :value="item.value"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="uni-btn-v">
            <button type="primary" @tap="getDeviceInfo">获取设备信息</button>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script>
type Item = {
	label : string,
	value : string,
}
export default {
	data() {
		return {
			title: 'getDeviceInfo',
			items: [] as Item[],
		}
	},
	onUnload:function(){
	},
	methods: {
		getDeviceInfo: function () {
			const res = uni.getDeviceInfo();
      this.items = [] as Item[];
      for(const key in res){
        const value = res[key];
        if(value != null){
          const item = {
          	label: key,
          	value: "" + ((typeof value == "object")? JSON.stringify(value) : value)
          } as Item;
          this.items.push(item);
        }
      }
		}
	}
}
</script>

<style>
.uni-pd {
  padding-left: 30rpx;
}
</style>
