<template>
  <Sketch v-bind="$attrs" :preset-colors="[...presetColors, ...recent]" @input="updateValue" />
</template>

<script>
import { Sketch } from 'vue-color'
import { sdLocalStorage } from '../services/storage-service'
import components from './_import-components/sd-color-import'
/**
 * @displayName SdColor 颜色选择器
 * @since 8.1.0.27
 */
export default {
  name: 'SdColor',
  components: { Sketch, ...components },
  data() {
    return {
      recent: [],
      presetColors: [
        '#1890ff',
        '#E02020',
        '#f5222d',
        '#faad14',
        '#e8e8e8',
        '#fafafa',
        '#000000a6',
        '#ffffff',
      ],
    }
  },
  created() {
    if (sdLocalStorage.getItem('color')) {
      this.recent = [sdLocalStorage.getItem('color')]
    }
  },
  methods: {
    updateValue(value) {
      sdLocalStorage.setItem('color', value.hex8)
      this.recent = [value.hex8]
      this.$emit('input', value)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>

<docs>
```vue
<template>
  <sd-color v-model="color" />
</template>

<script>
// 通过v-model绑定选择的颜色
export default {
  data() {
    return {
      color:{}
    };
  },
}
</script>
```
</docs>
