<template>
  <div
    class="hu-color-picker"
    :style="{ width: totalWidth + 'px' }"
  >
    <div class="color-set">
      <Saturation
        ref="saturation"
        :color="rgbString"
        :hsv="hsv"
        :saturation-width="saturationWidth"
        :saturation-height="saturationHeight"
        @selectSaturation="selectSaturation"
      />
      <Hue
        ref="hue"
        :hsv="hsv"
        :height="saturationHeight"
        @selectHue="selectHue"
      />
    </div>
  </div>
</template>

<script lang="ts">
/* eslint-disable */
import { defineComponent } from 'vue'
import { setColorValue, rgb2hex } from './composible'

import Saturation from './Saturation.vue'
import Hue from './Hue.vue'

export default defineComponent({
  components: {
    Saturation,
    Hue
  },
  props: {
    color: {
      type: String,
      default: '#000000'
    },
    colorsDefault: {
      type: Array,
      default: () => [
        '#000000',
        '#FFFFFF',
        '#FF1900',
        '#F47365',
        '#FFB243',
        '#FFE623',
        '#6EFF2A',
        '#1BC7B1',
        '#00BEFF',
        '#2E81FF',
        '#5D61FF',
        '#FF89CF',
        '#FC3CAD',
        '#BF3DCE',
        '#8E00A7',
        'rgba(0,0,0,0)'
      ]
    },
    saturationWidth: {
      type: Number,
      default: 152
    },
    saturationHeight: {
      type: Number,
      default: 152
    }
  },
  emits: ['changeColor'],
  data () {
    return {
      hueWidth: 15,
      hueHeight: 152,
      modelRgba: '',
      modelHex: '',
      r: 0,
      g: 0,
      b: 0,
      a: 1,
      h: 0,
      s: 0,
      v: 0
    }
  },
  computed: {
    totalWidth (): number {
      return this.hueHeight + (this.hueWidth + 8) * 2
    },
    rgba (): object {
      return {
        r: this.r,
        g: this.g,
        b: this.b,
        a: this.a
      }
    },
    hsv (): object {
      return {
        h: this.h,
        s: this.s,
        v: this.v
      }
    },
    rgbString (): string {
      return `rgb(${this.r}, ${this.g}, ${this.b})`
    },
    rgbaStringShort (): string {
      return `${this.r}, ${this.g}, ${this.b}, ${this.a}`
    },
    rgbaString (): string {
      return `rgba(${this.rgbaStringShort})`
    },
    hexString (): string {
      return rgb2hex(this.rgba, true)
    }
  },
  created () {
    Object.assign(this, setColorValue(this.color))
    this.setText()

    this.$watch('rgba', () => {
      this.$emit('changeColor', {
        rgba: this.rgba,
        hsv: this.hsv,
        hex: this.modelHex
      })
    })
  },
  methods: {
    selectSaturation (color: any) {
      const { r, g, b, h, s, v } = setColorValue(color)
      Object.assign(this, { r, g, b, h, s, v })
      this.setText()
    },
    selectHue (color: any) {
      const { r, g, b, h, s, v } = setColorValue(color)
      Object.assign(this, { r, g, b, h, s, v })
      this.setText()
      this.$nextTick(() => {
        // @ts-ignore
        this.$refs.saturation.renderColor()
      })
    },
    setText () {
      this.modelHex = this.hexString
      this.modelRgba = this.rgbaStringShort
    }
  }
})
</script>

<style lang="scss">
.hu-color-picker {
  padding: 0.25rem 10px 0;
  border-radius: 4px;
  z-index: 1;
  &.light {
    background: #f7f8f9;
    .color-show {
      .sucker {
        background: #eceef0;
      }
    }
    .color-type {
      .name {
        background: #e7e8e9;
      }
      .value {
        color: #666;
        background: #eceef0;
      }
    }
    .colors.history {
      border-top: 1px solid #eee;
    }
  }
  canvas {
    vertical-align: top;
  }
  .color-set {
    display: flex;
  }
  .color-show {
    margin-top: 8px;
    display: flex;
  }
}
</style>
