<template>
  <el-tag v-if="tag.isType" :type="tag.listClass" :effect="tag.theme">{{ tag.label }}</el-tag>
  <el-tag v-else :color="tag.listClass" :effect="tag.theme">{{ tag.label }}</el-tag>
</template>

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

const cacheStore = useCacheStore();
import {defineProps} from "vue";

const props = defineProps({
  dictType: {
    type: String,
    default: ""
  },
  value: {
    type: Object,
    default: null
  }
});

const tag = reactive({
  listClass: "primary",
  isType: true,
  label: "",
  theme: ""
});
const dictList = cacheStore.getDict(props.dictType);
const dictFormat = () => {
  if (dictList === undefined) return;
  let dictValue = ''
  if (props.value === true || props.value === false) {
    dictValue = JSON.stringify(props.value)
  } else {
    dictValue = props.value
  }
  for (let i = 0; i < dictList.length; i++) {
    if (dictList[i].value == dictValue) {
      tag.label = dictList[i].label;
      tag.listClass = dictList[i].listClass;
      tag.isType = dictList[i].isType;
      tag.theme = dictList[i].theme;
    }
  }
  // for (let item of dictList) {
  //   if (item.value == props.value) {
  //     tag.label = item.label;
  //     tag.listClass = item.listClass;
  //     tag.isType = item.isType;
  //   }
  // }
};

dictFormat();
</script>
