<template>
  <div class="audio-size">
    <div class="title">{{ title }}</div>
    <div class="slider">
      <div class="btn" @click="reduce">
        <i class="el-icon-minus"/>
      </div>
      <el-slider v-model="data" :show-tooltip="false" class="slider"/>
      <div class="btn" @click="add">
        <i class="el-icon-plus"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      data: 1,
    }
  },
  watch: {
    value(value) {
      this.data = value
    },
    data(value) {
      this.$emit('input', value)
      this.$emit('on-change', value)
    },
  },
  created() {
    this.data = this.value
  },
  methods: {
    reduce() {
      const value = this.data - 10
      this.data = value >= 0 ? value : 0
    },
    add() {
      const value = this.data + 10
      this.data = value <= 100 ? value : 100
    },
  },
}
</script>

<style lang="scss" scoped>
.audio-size {
  .title {
    margin: 4px 0;
    text-align: left;
  }
  .slider {
    display: flex;
    .btn {
      flex: none;
      display: flex;
      align-items: center;
      width: 50px;
      text-align: center;
      justify-content: center;
    }
    .slider {
      flex: 1;
    }
    /deep/ {
      .el-slider__bar {
        background-color: #17c2cc;
      }
      .el-slider__button {
        border: solid 2px #17c2cc;
        background-color: #17c2cc;
      }
    }
  }
}
</style>
