<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap">
        <view :id="generalId" :class="generalClass" :name="generalName" :title="generalTitle" :data-test="generalData"
          :style="generalStyle" ref="general-target">
          <text>id: {{ generalId }}</text>
          <text>class: {{ generalClass }}</text>
          <text>name: {{ generalName }}</text>
          <text>title: {{ generalTitle }}</text>
          <text>data-test: {{ generalData }}</text>
          <text>style: {{ generalStyle }}</text>
        </view>
        <view class="btn btn-style uni-common-mt" @click="validateGeneralAttributes">
          <text class="btn-inner">{{ validateGeneralAttrText }}</text>
        </view>
        <view class="btn btn-ref uni-common-mt" @click="changeHeight">
          <text class="btn-inner">{{ changeHeightByRefText }}</text>
        </view>
        <view class="view-class" :hover-class="hoverClass" ref="view-target">
          <text class="text">按下 50 ms 后背景变红</text>
          <text class="text">抬起 400 ms 后背景恢复</text>
        </view>
        <view class="view-class" :hover-class="hoverClass" :hover-start-time="1000" :hover-stay-time="1000"
          ref="view-target">
          <text class="text">按下 1000 ms 后背景变红</text>
          <text class="text">抬起 1000 ms 后背景恢复</text>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  export default {
    data() {
      return {
        title: 'global-properties',
        generalId: 'general-id',
        generalClass: 'general-class',
        generalName: 'general-name',
        generalTitle: 'general-title',
        generalData: 'general-data',
        generalStyle: 'background-color: aqua',
        validateGeneralAttrText: '验证基础属性',
        hoverClass: 'hover-class',
        validateViewAttrText: '验证 view 属性',
        changeHeightByRefText: '通过 ref 修改高度',
      }
    },
    methods: {
      validateGeneralAttributes() {
        const generalTarget = this.$refs['general-target'] as UniElement
        const generalId = generalTarget.getAttribute('id')
        if (generalId != this.generalId) {
          this.validateGeneralAttrText = '基础属性 id 验证失败'
          return
        }
        // #ifdef APP
        if (!generalTarget.classList.includes('general-class')) {
          this.validateGeneralAttrText = '基础属性 class 验证失败'
          return
        }
        // #endif
        // #ifdef WEB
        if (!Array.from(generalTarget.classList).includes('general-class')) {
          this.validateGeneralAttrText = '基础属性 class 验证失败'
          return
        }
        // #endif
        // #ifndef MP
        const generalName = generalTarget.getAttribute('name')
        if (generalName != this.generalName) {
          this.validateGeneralAttrText = '基础属性 name 验证失败'
          return
        }
        const generalTitle = generalTarget.getAttribute('title')
        if (generalTitle != this.generalTitle) {
          this.validateGeneralAttrText = '基础属性 title 验证失败'
          return
        }
        const generalData = generalTarget.getAttribute('data-test')
        if (generalData != this.generalData) {
          this.validateGeneralAttrText = '基础属性 data-test 验证失败'
          return
        }
        // #endif
        this.validateGeneralAttrText = '基础属性验证成功'
      },
      changeHeight() {
        const generalTarget = this.$refs['general-target'] as UniElement
        this.changeHeightByRefText = '已通过 ref 修改高度'
        generalTarget.style.setProperty('height', '200px')
      }
    },
  }
</script>

<style>
  .btn {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #409eff;
    border-radius: 5px;
  }

  .btn-inner {
    color: #fff;
  }

  .general-class {
    margin-left: 40px;
    padding: 10px;
    width: 260px;
    height: 160px;
    background-color: antiquewhite;
  }

  .view-class {
    margin: 20px 0 0 50px;
    padding: 10px;
    width: 240px;
    height: 100px;
    background-color: antiquewhite;
  }

  .view-class .text {
    margin-top: 5px;
    text-align: center;
  }

  .hover-class {
    background-color: red;
  }
</style>