<template>
  <el-color-picker class="fp-color-picker"
                   size="normal"
                   :value="value"
                   :predefine="predefineColors"
                   :show-alpha="showAlpha"
                   @change="change"
  />
</template>

<script>
export default {
  name: "FpSettingColorPicker",
  data() {
    return {
      predefineColors2: [
        '#606266', '#ffffff', '#000000', '#ff4500',
        '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
        '#1e90ff', '#c71585', '#409EFF', '#67C23A',
        '#F56C6C', '#909399', '#FF5F7E', '#142F43',
        '#94B3FD', '#17D7A0', '#A2D2FF', '#C32BAD',
      ],
      predefineColors3: [
        '#000000', '#105EF5', '#F53333', '#FFDE00',
        '#3CE025', '#3AEFF4', '#6929E1', '#E633E6',
        '#B0B0B0', '#4D7CFF', '#DDE0E3', '#FF5F7E',
        '#759FFF', '#FFFFFF', '#C7DBFF', '#142F43',
        '#94B3FD', '#17D7A0', '#A2D2FF', '#C32BAD',
      ],
      predefineColors: [
        '#FEC514', '#F04E98', '#00BFB3', '#0077CC',
        '#3CE025', '#343741', '#6929E1', '#E633E6',
        '#B0B0B0', '#4D7CFF', '#DDE0E3', '#FF5F7E',
        '#759FFF', '#FFFFFF', '#C7DBFF', '#142F43',
        '#94B3FD', '#17D7A0', '#A2D2FF', '#C32BAD',
      ]
    }
  },
  props: {
    value: {
      default: ''
    },
    showAlpha: {
      default: false
    }
  },
  methods: {
    change(v) {
      v = v == null ? '' : v;
      this.$emit('change', this.rgba2hex(v));
      this.$emit('update:value', this.rgba2hex(v));
    },
    rgba2hex(rgba) {
      if (!rgba || rgba.startsWith('#')) {
        return rgba
      }
      let str = rgba.slice(5, rgba.length - 1),
          arry = str.split(','),
          opa = parseInt(Number(arry[3].trim()) * 255),
          strHex = "#",
          r = Number(arry[0].trim()),
          g = Number(arry[1].trim()),
          b = Number(arry[2].trim());

      let a = ("0" + opa.toString(16)).slice(-2)
      strHex += ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
      strHex += a
      return strHex
    }
  }
}
</script>

<style scoped>

</style>

<style>

.fp-color-picker {
  width: 100%;
}

.fp-color-picker .el-color-picker__trigger {
  width: 100%;
  margin: 0;
  padding: 8px;
  background: #f6f7f9;
  border: unset;
  border-radius: 4px;
}

.fp-color-picker .el-color-picker__color {
  border: unset;
}

.fp-color-picker .el-color-picker__color-inner {
  box-shadow: inset 0 0 0 1px #00000027;
  border-radius: 4px;
}

.fp-color-picker .el-icon-arrow-down:before {
  content: unset;
}

.el-color-predefine__color-selector > div {
  box-shadow: inset 0 0 0 1px #00000027;
}
</style>