<template>
  <BaseSameLayer
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/midea-seek-bar"
    :defaultWidth="300"
    :defaultHeight="40"
  ></BaseSameLayer>
</template>

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

export default {
  data() {
    return {
      width: 0,
      height: 0
    }
  },
  name: "MideaSeekBar",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    min: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      required: true,
    },
    value: {
      type: Number,
      required: false,
    },
    unit: {
      type: String,
      required: false,
    },
    step: {
      type: Number,
      required: false,
    },
    showTip: {
      type: Boolean,
      required: false,
    },
    axisH: {
      type: Number,
      required: false,
    },
    pointH: {
      type: Number,
      required: false,
    },
    pointColor: {
      type: String,
      required: false,
    },
    axisColor: {
      type: String,
      required: false,
    },
    axisStartColor: {
      type: String,
      required: false,
    },
    axisEndColor: {
      type: String,
      required: false,
    },
    axisBgColor: {
      type: String,
      required: false,
    },
    disable: {
      type: Boolean,
      required: false,
    },
    sliderImage: {
      type: String,
      required: false,
    },
    rotate:{
      type: Object,
      default:()=>{}
    },
    axisAlpha: {
      type: Number,
      required: false,
    },
    axisBgAlpha: {
      type: Number,
      required: false,
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        min: this.min,
        max: this.max,
        value: this.value,
        unit: this.unit,
        step: this.step,
        showTip: this.showTip,
        axisH: this.axisH,
        pointH: this.pointH,
        pointColor: this.pointColor,
        axisColor: this.axisColor,
        axisStartColor: this.axisStartColor,
        axisEndColor: this.axisEndColor,
        axisBgColor: this.axisBgColor,
        disable: this.disable,
        sliderImage: this.sliderImage,
        handleOnChange: this.handleOnChange,
        rotate: this.rotate,
        axisAlpha: this.axisAlpha,
        axisBgAlpha: this.axisBgAlpha
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    // 自定义拓展其它逻辑
    handleOnChange(res) {
      if (res.mode == 2) {  //停止滑动
          this.$emit("stopChange", res);
          this.$emit("slideEnd", res);
      } else {
          this.$emit("change", res);
          this.$emit("slideChange", res);
      }
    },
  },
};
</script>
