<template>
 <view :class="cls()">
  <slot :dict="dictStore.get(props.name,Number(props.value))">{{ dictStore.get(props.name,Number(props.value))?.label }}</slot>
 </view>
</template>

<script setup>

import { useDictStore } from '@/store'

const dictStore = useDictStore();

const props = defineProps({
  name:{
    type:String,
    required:true
  },
  value:{
    type:[String,Number],
    required:true
  },
  border: {
    type:Boolean,
    default:false
  }
});

const cls = ()=>{
  let list = [];
  list.push("c-tag");
  list.push('w-'+dictStore.get(props.name,Number(props.value))?.type);
  if(!props.border){
    list.push("c-tag-text");
  }
  return list;
}



</script>

<style lang="scss" scoped>
.c-tag {
  margin: var(--margin,0);
	display: inline-block;
  line-height: 1;
  border:solid 1px currentColor;
  padding: .2em .3em;
  border-radius: .2em;
  position: relative;

  &::before{
    content: "";
    position: absolute;
    top:0;left:0;right:0;bottom: 0;
    background-color: currentColor;
    opacity: 0.1;
  }
  &-text {
    border:none;
    &::before {
      content: none;
    }
  }
}
</style>
