<template>
  <el-slider
    class="property-proportion-slider"
    :modelValue="showValue"
    @update:model-value="(val: any) => changeHandler(val)"
    size="small"
    @change="$emit('change')"
    height="200px"
    width="50px"
    style="cursor: pointer"
    :step="step || 0.01"
    :min="0"
    :max="scale"
  />
</template>

<script lang="ts" setup>
import { ElSlider } from "element-plus";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    value?: number[];
    step?: number;
    scale?: number;
  }>(),
  { scale: 1 }
);
const emit = defineEmits<{
  (e: "update:value", val: number[]): void;
  (e: "change"): void;
}>();

const showValue = computed(() => {
  if (!props.value) {
    return 1 * props.scale;
  }
  return props.value[0];
});

const changeHandler = (val: number) => {
  emit("update:value", [val, props.scale - val]);
};
</script>

<style lang="scss">
.property-proportion-slider {
  .el-input__wrapper {
    padding: 0 !important;
  }
  .el-slider__input {
    width: 50px;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    display: none;
  }
  .el-slider__runway.show-input {
    margin-right: 10px;
  }
}
</style>
