<template>
  <el-text :type="type">
    {{ getValueText() }}
  </el-text>
</template>
<script setup lang="ts">
import {ref} from "vue";
import store from "../../state/ItemList";

const props = defineProps({
  sourceType: {
    type: String,
    default: 'blueprint'
  },
  targetType: {
    type: String,
    default: 'label'
  },
  value: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'info'
  }
})

let ItemMap = ref<Map<string, string>>(new Map<string, string>());

function getMapByType() {
  if (props.sourceType === 'blueprint') {
    ItemMap.value = store.state.ItemMap.blueprintMap;
  }
  if (props.sourceType === 'label') {
    ItemMap.value = store.state.ItemMap.labelMap;
  }
  if (props.sourceType === 'name') {
    ItemMap.value = store.state.ItemMap.nameMap;
  }
  if (props.sourceType === 'category') {
    ItemMap.value = store.state.ItemMap.categoryMap;
  }
}

getMapByType()

function getValueText() {
  let item = ItemMap.value.get(props.value);
  if (!item) return '';
  switch (props.targetType) {
    case 'blueprint':
      return item.blueprint;
    case 'name':
      return item.name;
    case 'label':
      return item.label;
    case "category":
      return item.category;
  }
}


</script>
<style scoped lang="scss">

</style>

