<template>
  <a-popover title="选择颜色" trigger="click">
    <template slot="content">
      <Chrome :value="colors" @input="updateValue"></Chrome>
    </template>

    <div class="color-block">
      <div class="block" :style="{backgroundColor:colors}"></div>
    </div>
  </a-popover>
</template>

<script>
import { Chrome } from 'vue-color'

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  components: {
    Chrome
  },
  data () {
    return {
      colors: '#ffffff'
    }
  },
  methods: {
    updateValue (e) {
      const { r, g, b, a } = e.rgba
      this.colors = `rgba(${r},${g},${b},${a})`
      this.$emit('input', this.colors)
    }
  },
  watch: {
    value: {
      handler (val) {
        this.colors = val || '#ffffff'
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.color-block {
  display: inline-block; padding: 5px;  border: 1px solid #ddd; border-radius: 5px;
  .block {
    width: 20px;height: 20px; box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
  }
}

</style>
