<template>
  <div style="display: flex;justify-content: center;position:relative;">
    <span class="stateIcon" :style="{backgroundColor: filterDictClass(cacheStore.getDict(dictType), value)}"></span>
    <span >{{ tagConfig.label }}</span>
    <span  :style="{color: filterDictClass(cacheStore.getDict(dictType), value)}"> {{ filterDict(cacheStore.getDict(dictType), value) }}</span>
  </div>
</template>

<script setup>
import {defineProps} from "vue";
import {useCacheStore} from "@/stores/cache.js";

const cacheStore = useCacheStore();
const props = defineProps({
  dictType: {
    type: String,
    default: ""
  },
  value: {
    type: Object,
    default: null
  }
});
const tagConfig = reactive({
  listClass: "green",
  isType: true,
  label: ""
});
const filterDictClass = (data, value) => {
  if (!data) return
  if (data instanceof Array) {
    tagConfig.value = data.find(item => item.value == value)
    if (!tagConfig.value) {
      return '#409EFF'
    } else {
      if (tagConfig.value?.isType) {
        return changeParams(tagConfig.value.listClass)
      } else {
        return tagConfig.value.listClass
      }
    }
  }
}
const filterDict = (data, value) => {
  if (!data || value == null) return
  if (data instanceof Array) {
    if (value == true || value == false) {
      tagConfig.value = data.find(item => item.value == value.toString())
    } else if (typeof value === "object") {
      if (value !== null) {
        tagConfig.value = data.find(item => item.value == value[0])
      } else {
        tagConfig.value = {}
      }
    } else {
      tagConfig.value = data.find(item => item.value == value)
    }
  }
  return tagConfig.value?.label || '未知'
}
/**
 * 根据接口返回的listClass切换成对应的颜色
 * @param listClass 后端返回的listClass字段
 * @returns {string}
 */
const changeParams = (listClass) => {
  switch (listClass) {
    case 'danger':
      return 'red'
    case 'success':
      return '#67C23A'
    case 'info':
      return '#909399'
    case 'primary':
      return '#409EFF'
    case 'warning':
      return '#E6A23C'
    default:
      return listClass
  }
}
</script>

<style scoped lang="scss">
//.dot{
//  width:8px;
//  height: 20px;
//  margin-left: -5px;
//  background-color: green;
//  z-index: 99999;
//}
:deep(.el-tag) {
  position: relative;
  margin-top: 9px;
  margin-right: 7px;
  height: 8px;

}
</style>
