<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1;padding: 8px;">
  <!-- #endif -->
    <!-- #ifndef APP -->
    <view style="padding: 8px;">
    <!-- #endif -->
      <!--type-->
      <button class="margin-10 btn" :disabled="disabled_boolean">
        type-default
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="primary">
        type-primary
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="warn">
        type-warn
      </button>
      <!--size-->
      <button class="margin-10 btn" :disabled="disabled_boolean">
        size-default
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" size="mini">
        size-mini
      </button>
      <!--plain-->
      <button class="margin-10 btn" :disabled="disabled_boolean" :plain="true">
        plain=true
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="primary" :plain="true">
        plain=true type=primary
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="warn" :plain="true">
        plain=true type=warn
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean">
        plain-false
      </button>

      <button class="margin-10 btn custom-btn" :disabled="disabled_boolean" hover-class="is-hover">
        custom-btn
      </button>
      <button class="margin-10 btn custom-btn" :disabled="disabled_boolean" plain hover-class="is-hover">
        custom-btn
      </button>
      <button class="margin-10 btn" style="font-size: 15px;color: red;" type="warn" :plain="true" :disabled="disabled_boolean">
        custom-btn-plain-warn
      </button>
      <button class="margin-10" type="primary" :disabled="disabled_boolean" hover-class="none">hover-class none</button>

      <button class="margin-10" type="primary" :disabled="disabled_boolean">uni-app x</button>
      <button id="changeDisabledButton" class="margin-10" type="primary" @click="change_disabled_boolean">修改disabled为{{!disabled_boolean}}</button>
      <!--disable-->
      <button class="margin-10 btn">
        disable-false
      </button>
      <button class="margin-10 btn" :disabled="true">
        disable-true
      </button>

      <button class="margin-10 btn" :disabled="disabled_boolean">
        uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。
      </button>

      <!-- #ifdef VUE3-VAPOR -->
      <button class="margin-10 loading-class" :disabled="disabled_boolean" loading loading-class="custom-loading">
        自定义 loading 状态
      </button>
      <!-- #endif -->

      <!-- #ifdef VUE3-VAPOR && APP-IOS -->
      <button class="margin-10" :disabled="disabled_boolean" loading ios-loading-snow>
        iOS 雪花加载
      </button>
      <!-- #endif -->
    <!-- #ifndef APP -->
    </view>
    <!-- #endif -->
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  const disabled_boolean = ref(false)

  function change_disabled_boolean() {
    disabled_boolean.value = !disabled_boolean.value
  }
</script>

<style>
  .margin-10 {
    margin: 10px;
  }


  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
    border-radius: 5px;
    border-width: 0.5px;
    height: 53px;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(26, 173, 25, 0.7);
    border-color: rgba(26, 173, 25, 0.7);
  }

  /* #ifdef VUE3-VAPOR */
  .loading-class {
    color: #28cc1c;
    font-size: 20px;
  }

  .custom-loading {
    border-color: #28cc1c;
    width: 20px;
    height: 20px;
  }
  /* #endif */
</style>