<template>
  <div class="mm-color-picker-predefine">
    <div
      v-for="(color, index) of predefine"
      :key="`${color}${index}`"
      class="mm-color-picker-predefine-item"
      @click="handleChangeColor(color)">
      <div
        class="mm-color-picker-predefine-item-bg"
        :style="{
          backgroundColor: color
        }"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: Object,
      required: true,
    },
    predefine: {
      type: Array,
      required: true,
      validator(value) {
        return value.every(color => color && typeof color === "string")
      },
    },
  },
  methods: {
    handleChangeColor(color) {
      this.color.set(color)
    },
  },
}
</script>
