<template>
  <el-select
      v-model="value"
      filterable
      placeholder="Select"
      style="width: 240px">
    <el-option
        v-for="item in dinoList"
        :key="getData(item,keyType)"
        :label="getData(item,labelType)"
        :value="getData(item,valueType)"
    />
  </el-select>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {ArkDinoInfo} 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 dinoList = ref<ArkDinoInfo[]>([]);
let value = defineModel("value")

function getData(item: ArkDinoInfo, type: string) {
  switch (type) {
    case 'blueprint':
      return item.blueprint;
    case 'entityId':
      return item.entityId;
    case 'nameTag':
      return item.nameTag;
    case 'name':
      return item.name;
    case 'label':
      return item.label;
    case "category":
      return item.category;
    default:
      return item.blueprint;
  }
}

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

replay()

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

</style>