<template>
  <div id="ext_progress" @mousedown="onDragStart">
    <el-progress
        style="margin-top: 12px; cursor: pointer"
        :percentage="state.progress"
        :text-inside="true"
        :stroke-width="16"
        status="success"
    ></el-progress>
  </div>
</template>
<script setup lang="ts" name="ExtProgress">
import {onMounted, reactive} from 'vue';

const emit = defineEmits(['on-change', 'update:modelValue','on-choose','on-remove']);

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
})

onMounted(() => {
  state.progress = props.modelValue || 0;
})

const state = reactive({
  isDragEnd: false,
  progress: 0
})

const onDragStart = (event: any) => {
  state.isDragEnd = true;
  let progressBox = document.querySelector("#ext_progress");
  progressBox.addEventListener("mouseup", onDragEnd);
  progressBox.addEventListener("mousemove", onDrag);
}

const onDragEnd = () => {
  state.isDragEnd = false;
}

const onDrag = (event: any) => {
  if (state.isDragEnd) {
    const progressBox = document.querySelector("#ext_progress");
    const rect = progressBox.getBoundingClientRect();
    const width = rect.width;
    const offsetX = event.clientX - rect.left;
    let percentage = Math.round((offsetX / width) * 100);
    percentage = Math.max(0, Math.min(percentage, 100));
    state.progress = percentage;
    emit("update:modelValue",percentage)
  }
}

</script>
