<template>
    <BaseSameLayer
      :hosSameLayerArgs="hosSameLayerArgs"
      embedType="native/midea-vslider-bar"
      :defaultWidth="60"
      :defaultHeight="300"
    ></BaseSameLayer>
  </template>
  
  <script>
  import BaseSameLayer from "./baseSameLayer.vue";
  
  export default {
    data() {
      return {
        width: 0,
        height: 0
      }
    },
    name: "MideaVsliderBar",
    components: {
      BaseSameLayer,
    },
    props: {
      hosUniqueProps: {
        type: Object,
        default() {
          return {};
        },
      },
      min: {
        type: Number,
        required: true,
      },
      max: {
        type: Number,
        required: true,
      },
      value: {
        type: Number,
        required: false,
      },
      enable: {
        type: Boolean,
        required: false,
      },
      image: {
        type: String,
        required: false,
      },
      size: {
        type: Number,
        required: false,
      },
    },
    computed: {
      hosSameLayerArgs() {
        return {
          ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
          width: this.width,
          height: this.height,
          min: this.min,
          max: this.max,
          value: this.value,
          enable: this.enable,
          image: this.image,
          size: this.size,
          handleOnChange: this.handleOnChange,
        };
      },
    },
    mounted() {
      this.width = this.$el.clientWidth;
      this.height = this.$el.clientHeight;
    },
  
    methods: {
      // 自定义拓展其它逻辑
      handleOnChange(res) {
        if (res.mode == 1) {  //停止滑动
            this.$emit("slideEnd", res);
        } else {
            this.$emit("slideChange", res);
        }
      },
    },
  };
  </script>
  