<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view class="page" id="page">
      <page-head :title="title"></page-head>
      <button class="btn btn-get-all-node-info" @click="getBoundingClientRectAsync">getBoundingClientRectAsync</button>
      <view id="rect-test" ref="rect-test" class="rect-test"></view>
      <view class="rect-info" v-if="rectInfo">
        <view class="node-info-item">
          <text class="node-info-item-k">x: </text>
          <text class="node-info-item-v">{{rectInfo.x}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">y: </text>
          <text class="node-info-item-v">{{rectInfo.y}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">width: </text>
          <text class="node-info-item-v">{{rectInfo.width}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">height: </text>
          <text class="node-info-item-v">{{rectInfo.height}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">left: </text>
          <text class="node-info-item-v">{{rectInfo.left}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">top: </text>
          <text class="node-info-item-v">{{rectInfo.top}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">right: </text>
          <text class="node-info-item-v">{{rectInfo.right}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">bottom: </text>
          <text class="node-info-item-v">{{rectInfo.bottom}}</text>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  type DomRectType = {
    x : number,
    y : number,
    left : number,
    top : number,
    right : number,
    bottom : number,
    width : number,
    height : number,
  }

  export default {
    data() {
      return {
        title: 'getBoundingClientRectAsync',
        rectInfo: {
          x: 0,
          y: 0,
          width: 0,
          height: 0,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        } as DomRectType,
      }
    },
    methods: {
      getBoundingClientRectAsync() {
        (this.$refs["rect-test"] as UniElement).getBoundingClientRectAsync()!.then((rect : DOMRect) => {
          this.rectInfo = {
            x: rect.x,
            y: rect.y,
            width: rect.width,
            height: rect.height,
            left: rect.left,
            top: rect.top,
            right: rect.right,
            bottom: rect.bottom,
          } as DomRectType;;
        })
      }
    }
  }
</script>

<style>
  .page {
    padding: 15px;
  }

  .btn {
    margin-top: 15px;
  }

  .rect-test {
    margin-top: 15px;
    height: 100px;
    background-color: dodgerblue;
  }

  .rect-info {
    margin-top: 15px;
    flex-direction: column;
  }

  .node-info-item {
    flex-direction: row;
  }

  .node-info-item-k {
    width: 72px;
    line-height: 2;
  }

  .node-info-item-v {
    font-weight: bold;
    line-height: 2;
  }
</style>