<template>
  <div>
    <embed
        :id="embedId"
        type="native/slider"
        :width="width"
        :height="height"
    />
  </div>
</template>

<script>
const weexModule = weex.requireModule("weexModule");

export default {
  name: "HlSlider",
  props: {
    width: {
      type: Number,
      required: false,
      default: 300,
    },
    height: {
      type: Number,
      required: false,
      default: 120,
    },
    value: {
      type: Number,
      required: 1
    },
    min: {
      type: Number,
      require: 0
    },
    max:{
      type: Number,
      required: 100,
    },
    step: {
      type: Number,
      required: 1,
    },
  },
  data() {
    return {
      embedId: `slider_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
    };
  },
  destroyed() {
    // TO-DO embed监听移除实现
  },
  created() {
    console.log("[weex] hl-slider created!");
    this.transferPropsAndListeners(); // 组件创建时调用
  },
  methods: {
    transferPropsAndListeners() {
      console.log("[weex] transferPropsAndListeners ", this.onChange);
      // 构建一个包含所需信息的对象
      const args = {
        componentId: this.embedId,
        width: this.width,
        height: this.height,
        value: this.value,
        min:this.min,
        max:this.max,
        step:this.step,
        onChange: this.handleonChange,
      };
      // 调用JSbridge方法，传递属性和监听方法到原生组件
      native.transferSameLayerArgs(args);
    },
    scheduleTransfer() {
      if (!this.isTransferScheduled) {
        this.isTransferScheduled = true;
        this.$nextTick(() => {
          this.transferPropsAndListeners();
          this.isTransferScheduled = false;
        });
      }
    },
    handleonChange(res) {
      console.log("[weex] handleonChange ", res);
      this.$emit("onChange", res);
    },
  },
  watch: {
    value(oldValue, newValue) {
      if (newValue !== oldValue) {
        this.scheduleTransfer(); // 当value属性变化时重新调用
      }
    },
    min(newText, oldText) {
      if (newText !== oldText) {
        this.scheduleTransfer(); // 当min属性变化时重新调用
      }
    },
    max(newText, oldText) {
      if (newText !== oldText) {
        this.scheduleTransfer(); // 当max属性变化时重新调用
      }
    },
    width(newWidth, oldWidth) {
      if (newWidth !== oldWidth) {
        this.scheduleTransfer(); // 当width属性变化时重新调用
      }
    },
    height(newHeight, oldHeight) {
      if (newHeight !== oldHeight) {
        this.scheduleTransfer(); // 当height属性变化时重新调用
      }
    },
    step(newStep, oldStep) {
      if (newStep !== oldStep) {
        this.scheduleTransfer(); // 当step属性变化时重新调用
      }
    }

  },
};
</script>

<style scoped>
</style>