<template>
    <BaseSameLayer
        :hosSameLayerArgs="hosSameLayerArgs"
        embedType="native/button"
        :defaultWidth="300"
        :defaultHeight="120"
    ></BaseSameLayer>
</template>

<script>
import BaseSameLayer from "./baseSameLayer.vue";

export default {
  name: "HlButton",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      required: true,
    },
    text: {
      type: String,
      required: false,
    },
    loading: {
      type: Boolean,
      required: true
    },
    stateEffect: {
      type: Boolean,
      required: true
    }
  },

  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        text: this.text,
        loading: this.loading,
        stateEffect: this.stateEffect,
        handleOnTap: this.handleOnTap,
      }
    }
  },
  methods: {
    // 自定义拓展其它逻辑
    handleOnTap(res) {
      console.log("[web] handleOnTap ", res);
      this.$emit("onTap", res);
    },
  },
  watch: {
    loading(newText, oldText) {
      if (newText !== oldText) {
        this.scheduleTransfer(); // 当loading属性变化时重新调用
      }
    },
  },
};
</script>

<style scoped>
</style>