<template>
  <div class="colorPicker">
    <label
      class="colorWrap"
      v-for="(color,index) in colorList"
      :key="index"
    >
      <span
        class="colorBlock"
        :class="{selected:selectedColor===color.name}"
        :style="{background:color.name}"
      >
        <a-icon
          type="check"
          style="font-size:30px"
        />
        <!-- <span class="edit-wrap">
          <a-icon
            type="edit"
            @click.prevent.stop="showEdit"
          />
        </span> -->
      </span>
      <input
        type="radio"
        v-model="selectedColor"
        :value="color.name"
        @change="handleChange"
      >
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '#ffa530'
    },
    colorList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selectedColor: '',
      colors: [
        '#ffa530', // 黄橙色
        '#9f612b', // 咖啡色
        '#ff6860', // 朱砂红
        '#c32bdd', // 紫色
        '#00c9d0', // 孔雀绿
        '#0090fd', // 湖蓝色
        '#233642' // 黛色
      ]
    }
  },
  methods: {
    handleChange (val) {
      this.$emit('input', val.target.value)
    },
    showEdit () {

    }
  },
  watch: {
    value: {
      handler (val) {
        if (!val) {
          this.$emit('input', '#ffa530')
        }
        this.selectedColor = val || '#ffa530'
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.colorPicker {
  display: flex; justify-content: space-between;
}
.colorBlock {
  position: relative;  display: flex;  width: 60px;height: 60px; color: #fff; cursor: pointer; border-radius: 10px; justify-content: center;align-items: center;
  .anticon-check {
    display: none;
  }

  &.selected .anticon-check {
    display: block;
  }
}

.edit-wrap {
  position: absolute; right: -30px; transform: scale(0); padding-left: 10px; transition: all 0.3s;
  .anticon-edit {
    padding: 5px;  background: #0099a0; border-radius: 50%;
  }
}
.colorBlock:hover {
  .edit-wrap {
    transform: scale(1)
  }
}
.colorWrap {
  input {
    display: none;
  }
}

</style>
