<template>
  <div class="tool-bar" id="toolBar">
    <div class="color-bar" id="colorBar">
      <span class="mic-btn" id="micBtn"></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      colorBar: null,
      isTarget: false,
      originalStart: 0,
      originalEnd: 0,
      start: 0,
      end: 0,
      percentage: 0,
      totalWidth: 266,
    }
  },
  mounted() {
    this.colorBar = document.getElementById("colorBar")
    this.toolBar = document.getElementById("toolBar")
    document.onmousedown = this.onmousedownEvent
    document.onmouseup = this.onmouseupEvent
    document.onmousemove = this.onmousemoveEvent
    document.onclick = this.onclickEvent
    let rect = this.toolBar.getBoundingClientRect()
    this.originalStart = rect.left
    this.originalEnd = rect.left + this.totalWidth
  },
  methods: {
    onmousedownEvent(e) {
      if (e.target.id === "micBtn") {
        this.isTarget = true
      }
    },
    onmousemoveEvent(e) {
      if (this.isTarget) {
        let { clientX } = e
        if (clientX > this.originalEnd) {
          this.colorBar.style.width = "100%"
        } else if (clientX < this.originalStart) {
          this.colorBar.style.width = "0%"
        } else {
          this.percentage = (
            (clientX - this.originalStart) /
            this.totalWidth
          ).toFixed(2)
          this.colorBar.style.width = this.percentage * 100 + "%"
        }
      }
    },
    onmouseupEvent(e) {
      if (this.isTarget) {
        this.isTarget = false
        this.$emit("percentChange", this.percentage)
      }
    },
    onclickEvent(e) {
      let target = e.target.id
      if (target === "toolBar" || target === "colorBar") {
        let { clientX } = e
        this.percentage = (
          (clientX - this.originalStart) /
          this.totalWidth
        ).toFixed(2)
        this.colorBar.style.width = this.percentage * 100 + "%"
        this.$emit("percentChange", this.percentage)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.tool-bar {
  width: 266px;
  margin-left: 15px;
  height: 5px;
  background: #ebebeb;
  border-radius: 3px;
  position: relative;
  .color-bar {
    position: absolute;
    height: 5px;
    top: 0;
    left: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, #4edc66 0%, #00c55d 100%);
    width: 0%;
  }
  .mic-btn {
    width: 12px;
    height: 12px;
    background: #ffffff;
    box-shadow: 0px 0px 4px 0px rgba(0, 197, 93, 0.63);
    border: 1px solid #00c55d;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
  }
}
</style>