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


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

export default {
  name: "HlSlider",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps:{
      type: Object,
      required: true,
    },
    value: {
      type: Number,
      required: true,
    },
    min: {
      type: Number,
      require: true,
    },
    max:{
      type: Number,
      required: true,
    },
    step: {
      type: Number,
      required: true,
    },
  },

  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        value: this.value,
        min: this.min,
        max: this.max,
        step: this.step,
        handleOnChange: this.handleOnChange,
      }
    }
  },
  created() {
    console.log("[web] hl-slider created!");
  },
  methods: {
    // 自定义拓展其它逻辑
    handleOnChange(res) {
      console.log("[web] handleOnChange ", res);
      this.$emit("onChange", res);
    },
  },
  watch: {
    step(newStep, oldStep) {
      if (newStep !== oldStep) {
        this.scheduleTransfer(); // 当step属性变化时重新调用
      }
    }
  },
};
</script>

<style scoped>
</style>