<template>
  <div
    v-for="(item, index) in colorList"
    :key="item.color"
    class="color-list"
    @click="changeColor(index)"
  >
    <div class="card" :class="{ select: index === selectColorIndex }">
      <div :style="{ background: item.color }" />
    </div>
    <div
      style="text-align: center"
      :class="{ text: index === selectColorIndex }"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emit = defineEmits(['update:value'])

let colorList: any = ref([
  { color: '#1965FF', title: '默认', name: 'theme-default' },
  { color: '#409EFF', title: '蓝色', name: 'theme-blue' },
  { color: '#67C23A', title: '绿色', name: 'theme-green' },
  { color: '#FF9326', title: '橙色', name: 'theme-orange' },
  { color: '#F56C6C', title: '红色', name: 'theme-red' },
  { color: '#A126FF', title: '紫色', name: 'theme-purple' },
  { color: '#6C6F91', title: '深夜', name: 'theme-black' }
])

const selectColorIndex = ref(0)
const selectColor = ref('#1965FF')

// 赋默认值
const setColor = (value) => {
  for (let i = 0; i < colorList.value.length; i++) {
    if (colorList.value[i].name === value) {
      selectColorIndex.value = i
      selectColor.value = colorList.value[i].name
      break
    }
  }
}

// 切换颜色
const changeColor = (i) => {
  selectColor.value = colorList.value[i].color
  selectColorIndex.value = i
  emit('update:value', colorList.value[i].name)
}
defineExpose({ setColor })
</script>

<style lang="less" scoped>
.color-list {
  display: flex;
  display: inline-flex;
  width: 50px;
  padding: 0 15px 10px 0;
  flex-direction: column;
  .card {
    width: 35px;
    height: 35px;
    padding: 3px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    div {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .select {
    border-color: v-bind(selectColor);
  }
  .text {
    color: v-bind(selectColor);
  }
}
</style>
