<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import ItemTypeSearchbar from '../ItemType/ItemTypeSearchbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';

const route = useRoute();
const { t } = useI18n();
const tableRef = ref();
const entityId = computed(() => route.params.id);

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('id'),
        isId: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'code',
        label: t('code'),
        isTitle: true,
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('name'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('worker'),
        create: true,
        component: 'select',
        attrs: {
            url: 'Workers',
            optionLabel: 'firstName',
            optionValue: 'id',
        },
        cardVisible: false,
        visible: false,
    },
    {
        align: 'left',
        name: 'categoryFk',
        label: t('ItemCategory'),
        create: true,
        component: 'select',
        attrs: {
            url: 'ItemCategories',
            fields: ['id', 'name'],
        },
        cardVisible: false,
        visible: false,
    },
    {
        align: 'left',
        name: 'Temperature',
        label: t('Temperature'),
        create: true,
        component: 'select',
        attrs: {
            url: 'Temperatures',
            fields: ['id', 'name'],
        },
        cardVisible: false,
        visible: false,
    },
]);
</script>

<template>
    <ItemTypeSearchbar />
    <VnTable
        ref="tableRef"
        data-key="ItemTypeList"
        :url="`ItemTypes`"
        :create="{
            urlCreate: 'ItemTypes',
            title: 'Create ItemTypes',
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
        order="code ASC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="false"
        :use-model="true"
    />
</template>

<i18n>
    es:
        id: Id
        code: Código
        name: Nombre
        worker: Encargado
        ItemCategory: Categoría
        Temperature: Temperatura
        Create ItemTypes: Crear familia
    en:
        code: Code
        name: Name
        worker: Worker
        ItemCategory: ItemCategory
        Temperature: Temperature
</i18n>
