<script setup lang="ts">
import { evepraisalAxiosInstance } from '@/market/appraisal/evepraisal';
import { useVModel } from '@vueuse/core';

interface Props {
    name: string;
    modelValue?: string;
}

interface Emits {
    (e: 'update:modelValue', value: string): void;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
});
const emit = defineEmits<Emits>();

const value = useVModel(props, 'modelValue', emit);

const loadFromId = async (e: Event) => {
    const input = e.target as HTMLInputElement;
    const id = input.value;

    if (!id) {
        return;
    }
    const response = await evepraisalAxiosInstance.get(`/a/${id}.json`);

    if (response.status !== 200) {
        return;
    }

    value.value = JSON.stringify(response.data);
    input.value = '';
}
</script>

<template>
    <div class="flex-1 mx-1">
        <span>{{ name }}</span><input type="text" class="ms-2" @change="loadFromId" placeholder="id evepraisal" />
        <textarea class="mt-1" v-model="value" />
    </div>
</template>