<template>
  <div>
    <div
      v-on:click="selectCharacter()"
      >{{name}} the <span v-html="job" /> ({{galders.toLocaleString()}}g)</div>
  </div>
</template>
<script lang="ts" setup>
const session = storage.GetSession()
const api:LTOApi = new LTOApiv0(session)

const props = defineProps(['character'])

const name = ref("")
const job = ref("")
const galders = ref(0)
const {invs, activeTable} = useStoreRef()

name.value = invs.value.get(props.character)?.name!
job.value = invs.value.get(props.character)?.wallet?.job_img!
galders.value = invs.value.get(props.character)?.wallet?.galders!

const selectCharacter = () => {
  activeTable.value = props.character
  log.info("selected char", activeTable.value)
}

</script>

<script lang="ts">
import log from 'loglevel';
import { defineComponent, computed, PropType, defineProps, defineEmits, ref} from 'vue';
import { LTOApi, LTOApiv0 } from '../lib/lifeto';
import { LoginHelper, Session } from '../lib/session';
import { storage } from '../session_storage';
import { useStore, useStoreRef } from '../state/state';
</script>
