<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';
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.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('globals.name'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        label: t('worker'),
        name: 'workerFk',
        create: true,
        component: 'select',
        attrs: {
            url: 'Workers/search',
            optionLabel: 'nickname',
            optionValue: 'id',
        },
        format: (row) => row.worker?.user?.name,
        cardVisible: true,
        columnField: { component: null },
        columnFilter: {
            attrs: {
                url: 'Workers/activeWithInheritedRole',
                fields: ['id', 'name'],
                where: { role: 'buyer' },
                optionFilter: 'firstName',
                optionLabel: 'name',
                optionValue: 'id',
                useLike: false,
            },
            inWhere: true,
        },
    },
    {
        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"
        redirect="item/item-type"
    >
        <template #column-workerFk="{ row }">
            <span class="link" @click.stop>
                {{ row.worker?.user?.name }}
                <WorkerDescriptorProxy :id="row.workerFk" />
            </span>
        </template>
    </VnTable>
</template>

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