<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import ItemTypeSearchbar from 'src/pages/Item/ItemType/ItemTypeSearchbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import FetchData from 'components/FetchData.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import ItemTypeFilter from './ItemType/ItemTypeFilter.vue';

const { t } = useI18n();
const tableRef = ref();
const itemCategoriesOptions = ref([]);
const temperatureOptions = ref([]);

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',
        label: t('worker'),
        create: true,
        component: 'select',
        attrs: {
            url: 'Workers/search',
            optionLabel: 'nickname',
            optionValue: 'id',
        },
        cardVisible: true,
        visible: true,
        columnField: {
            component: 'userLink',
            attrs: ({ row }) => {
                return {
                    workerId: row?.worker?.id,
                    name: row.worker?.user?.name,
                    defaultName: true,
                };
            },
        },
        columnFilter: {
            name: 'workerFk',
        },
    },
    {
        align: 'left',
        name: 'categoryFk',
        label: t('ItemCategory'),
        create: true,
        component: 'select',
        attrs: {
            options: itemCategoriesOptions.value,
        },
        cardVisible: false,
        visible: false,
    },
    {
        align: 'left',
        name: 'Temperature',
        label: t('Temperature'),
        create: true,
        component: 'select',
        attrs: {
            options: temperatureOptions.value,
        },
        cardVisible: false,
        visible: false,
    },
]);
</script>

<template>
    <FetchData
        url="ItemCategories"
        :filter="{ fields: ['id', 'name'], order: ['name ASC'] }"
        @on-fetch="(data) => (itemCategoriesOptions = data)"
        auto-load
    />
    <FetchData
        url="Temperatures"
        :filter="{ fields: ['id', 'name'], order: ['name ASC'] }"
        @on-fetch="(data) => (temperatureOptions = data)"
        auto-load
    />
    <RightMenu>
        <template #right-panel>
            <ItemTypeFilter data-key="ItemTypeList" />
        </template>
    </RightMenu>
    <ItemTypeSearchbar />
    <VnTable
        ref="tableRef"
        data-key="ItemTypeList"
        url="ItemTypes"
        :create="{
            urlCreate: 'ItemTypes',
            title: t('Create ItemTypes'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
        :user-filter="{
            include: {
                relation: 'worker',
                scope: {
                    fields: ['id'],
                    include: {
                        relation: 'user',
                        scope: {
                            fields: ['id', 'name'],
                        },
                    },
                },
            },
        }"
        order="name ASC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="false"
        :use-model="true"
        redirect="item/item-type"
    />
</template>

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