<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view style="padding: 15px;">
      <view id="box" ref="box">
        <text class="uni-title-text">元素的id：{{ attrId }}</text>
        <!-- #ifndef APP -->
        <text class="uni-title-text">元素的style：{{ attrStyle }}</text>
        <!-- #endif -->
        <text class="uni-title-text">元素的背景色样式值：{{ propertyValue }}</text>
        <text class="uni-subtitle-text">小程序端：getAttribute 获取元素的属性值，目前仅支持id、style</text>
        <text class="uni-subtitle-text">App端：getAttribute 不支持获取 class、style 属性</text>
      </view>
      <button @click="getAttributeId">getAttribute获取元素的id</button>
      <button @click="setStyle">setProperty设置背景色</button>
      <!-- #ifndef APP -->
      <button @click="getAttributeStyle">getAttribute获取元素的style</button>
      <!-- #endif -->
      <button @click="getPropertyValue">getPropertyValue获取背景色值</button>

      <child id="child" ref="child"></child>
      <button @click="getBoundingClientRectAsyncChild">获取自定义组件child元素信息</button>
      <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>
      <scroll-view ref="scrollView" class="scroll-view_H" direction="horizontal">
        <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
        <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
        <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
      </scroll-view>
      <!-- #ifndef WEB -->
      <button @click="scrollTo">scrollTo设置left滚动200px</button>
      <!-- #endif -->
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  import child from './child.uvue'
  type DomRectType = {
    x : number,
    y : number,
    left : number,
    top : number,
    right : number,
    bottom : number,
    width : number,
    height : number,
  }
  export default {
    components: {
      child
    },
    data() {
      return {
        boxTarget: null as null | UniElement,
        scrollViewTarget: null as null | UniElement,
        attrId: "",
        attrStyle:"",
        propertyValue:"",
        rectInfo: {
          x: 0,
          y: 0,
          width: 0,
          height: 0,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        } as DomRectType,
      }
    },
    onReady() {
      this.boxTarget = this.$refs['box'] as UniElement
      this.scrollViewTarget = this.$refs['scrollView'] as UniElement;
    },
    methods: {
      getBoundingClientRectAsyncChild(){
        const childEl = uni.getElementById('child')!
        childEl.getBoundingClientRectAsync()!.then((rect : DOMRect) => {
          console.log('rect: ',rect);
          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;;
        })
      },
      getAttributeId() {
        this.attrId = this.boxTarget!.getAttribute('id') ?? ""
      },
      setStyle() {
        this.boxTarget!.style.setProperty("background-color", "#FFF000")
      },
      getPropertyValue() {
        this.propertyValue = this.boxTarget!.style.getPropertyValue("background-color")
      },
      getAttributeStyle() {
        this.attrStyle = this.boxTarget!.getAttribute('style')?? ""
      },
      scrollTo() {
        // #ifdef MP-WEIXIN
        this.scrollViewTarget!.scrollTo({
          left: 200
        })
        // #endif
        // #ifndef MP-WEIXIN
        this.scrollViewTarget!.scrollTo(200,0)
        // #endif
      }
    }
  }
</script>
<style>
  .scroll-view_H {
    width: 100%;
    flex-direction: row;
    margin-top:15px;
  }
  .scroll-view-item_H {
    width: 100%;
    height: 150px;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 18px;
    color: #ffffff;
  }

  .rect-info {
    margin-top: 15px;
    padding: 10px;
    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>