<template>
  <div class="ele-color-predefine">
    <div
      v-for="(item, index) in colors"
      :key="index"
      class="ele-color-predefine-item"
      @click="handleSelect(item)">
      <div :style="{'background-color': item}"></div>
      <check-outlined v-if="color ? (color.toLowerCase() === item.toLowerCase()) : false"/>
    </div>
  </div>
</template>

<script>
import {CheckOutlined} from '@ant-design/icons-vue';

export default {
  name: 'ElePredefine',
  components: {CheckOutlined},
  emits: ['update:color'],
  props: {
    // 颜色列表
    colors: {
      type: Array,
      required: true
    },
    // 选中的颜色
    color: String
  },
  methods: {
    /* 颜色选中 */
    handleSelect(color) {
      this.$emit('update:color', color);
    }
  }
};
</script>

<style>
.ele-color-picker .ele-color-predefine {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ele-color-picker .ele-color-predefine .ele-color-predefine-item {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  margin: 8px 0 0 8px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  position: relative;
  overflow: hidden;
}

.ele-color-picker .ele-color-predefine .ele-color-predefine-item > div {
  height: 100%;
  cursor: pointer;
}

.ele-color-picker .ele-color-predefine .ele-color-predefine-item:nth-child(10n + 1) {
  margin-left: 4px;
}

.ele-color-picker .ele-color-predefine .ele-color-predefine-item > .anticon {
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px auto auto -6px;
}
</style>
