<template>
  <div class="ele-color-alpha-slider">
    <div
      ref="bar"
      class="ele-color-alpha-slider-bar"
      :style="{background: background}"
      @click="handleClick">
    </div>
    <div
      ref="thumb"
      class="ele-color-alpha-slider-thumb"
      :style="{left: thumbLeft + 'px'}">
    </div>
  </div>
</template>

<script>
import draggable from '../draggable';

export default {
  name: 'EleAlphaSlider',
  emits: ['update:alpha'],
  props: {
    // 颜色的rgb值
    rgb: {
      type: Object,
      required: true
    },
    // 透明度
    alpha: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      // 滑块位置
      thumbLeft: 0,
      // 滑轨背景
      background: null
    };
  },
  mounted() {
    // 获取滑块的默认位置和滑轨的默认背景
    this.thumbLeft = this.getThumbLeft();
    this.background = this.getBackground();
    // 滑块、滑轨绑定鼠标移动事件
    const {bar, thumb} = this.$refs;
    const dragConfig = {
      drag: (event) => {
        this.handleDrag(event);
      },
      end: (event) => {
        this.handleDrag(event);
      }
    };
    draggable(bar, dragConfig);
    draggable(thumb, dragConfig);
  },
  methods: {
    /* 滑轨点击事件 */
    handleClick(event) {
      if (event.target !== this.$refs.thumb) {
        this.handleDrag(event);
      }
    },
    /* 透明度选中改变事件 */
    handleDrag(event) {
      const {bar, thumb} = this.$refs,
        rect = bar.getBoundingClientRect();
      let left = event.clientX - rect.left;
      left = Math.max(thumb.offsetWidth / 2, left);
      left = Math.min(left, rect.width - thumb.offsetWidth / 2);
      const alpha = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100);
      this.$emit('update:alpha', alpha);
    },
    /* 计算滑块位置 */
    getThumbLeft() {
      const {bar, thumb} = this.$refs;
      return Math.round(this.alpha * (bar.offsetWidth - thumb.offsetWidth / 2) / 100);
    },
    /* 获取滑轨背景 */
    getBackground() {
      const {r, g, b} = this.rgb;
      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
    }
  },
  watch: {
    rgb() {
      this.background = this.getBackground();
    },
    alpha() {
      this.thumbLeft = this.getThumbLeft();
    }
  }
};
</script>

<style>
.ele-color-picker .ele-color-alpha-slider {
  height: 12px;
  margin-top: 12px;
  position: relative;
  box-sizing: border-box;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}

.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-bar {
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  position: relative;
}

.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  border: 1px solid #f0f0f0;
  border-radius: 1px;
  cursor: pointer;
  z-index: 1;
}
</style>
