<script lang="ts" setup>
// 颜色  插槽
import colorUtil from '@/utils/color'

const props: any = withDefaults(
  defineProps<{
    title: string
    type?: string
    color?: string
  }>(),
  {
    title: '标题',
    type: 'primary'
  }
)

const bgColor = computed(() => {
  return props.color ? colorUtil.lighten(props.color, 0.6) : `var(--el-color-${props.type}-light-9)`
})

const titleColor = computed(() => {
  return props.color ?? `var(--el-color-${props.type})`
})
</script>

<template>
  <div
    class="w-full rounded-md py-[2px] px-[10px] font-bold"
    :style="{
      backgroundColor: bgColor,
      color: titleColor
    }"
  >
    <slot>
      <span class="title pl-25px relative">{{ title }}</span>
    </slot>
  </div>
</template>

<style lang="scss" scoped>
.title {
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    background-color: v-bind(titleColor);
    border-radius: 50%;
  }
}
</style>
