<template>
  <el-select
      v-model="value"
      filterable
      placeholder="Select"
      style="width: 240px">
    <el-option
        v-for="item in itemList"
        :key="getData(item,keyType)"
        :label="getData(item,labelType)"
        :value="getData(item,valueType)"
    />
  </el-select>

</template>
<script setup lang="ts">
import {ref} from "vue";
import {ArkItemInfo} from "../../api/ARKItemsApi";
import store from "../../state/ItemList";

const props = defineProps({
  keyType: {
    type: String,
    default: 'blueprint'
  },
  valueType: {
    type: String,
    default: 'blueprint'
  },
  labelType: {
    type: String,
    default: 'label'
  }
})

let itemList = ref<ArkItemInfo[]>([]);
let value = defineModel("value")

function getData(item: ArkItemInfo, type: string) {
  switch (type) {
    case 'blueprint':
      return item.blueprint;
    case 'className':
      return item.className;
    case 'itemId':
      return item.itemId;
    case 'name':
      return item.name;
    case 'label':
      return item.label;
    case "category":
      return item.category;
    default:
      return item.blueprint;
  }
}

function replay() {
  itemList.value = store.state.itemList;
}

replay()

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

</style>