<style scoped lang="scss">
.color-box {
  display: inline-flex;
  align-items: center;
  align-content: center;
}

.refresh-btn {
  margin-left: 8px;
  color:#409EFF ;
}

.refresh-animate{
  transform: rotate(180deg);
  transition: all 0.5s;
}
</style>
<template>
  <div class="color-box">
    <el-color-picker  v-model="state.modelValue" :predefine="state.colors" @change="handleColorChange"/>
    <SvgIcon class="refresh-btn" name="ele-Refresh" @click="handleRandomColor" :class="{'refresh-animate':state.anim}"/>
  </div>
</template>
<script setup lang="ts" name="ExtDLabel">
import {onMounted, reactive} from 'vue';

const emit = defineEmits(['update:modelValue','on-change']);

const props = defineProps({
  modelValue: {
    type: String
  },
})

const state = reactive({
  modelValue: '#67C23A' as string,
  colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#CDD0D6', '#8230A6','#EA2517','#DA72C7','#342F3B'],
  anim:false
})

// const modelVal = computed(() => props.value)

const handleRandomColor = () => {
  let rand = Math.floor(Math.random() * state.colors.length);
  state.modelValue = state.colors[rand];
  emit('update:modelValue', state.modelValue)
  emit('on-change')
  state.anim = true;
  setTimeout(()=>{
    state.anim = false;
  },600)
}

const handleColorChange = () => {
  emit('update:modelValue', state.modelValue)
  emit('on-change')
}

onMounted(() => {
  state.modelValue = props.modelValue || '#000000';
  emit('update:modelValue', state.modelValue)
  emit('on-change')
});
</script>
