<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CrudModel from 'components/CrudModel.vue';
import axios from 'axios';

const { t } = useI18n();

const crudModelRef = ref();
const warehousesData = ref([]);
const itemPackingTypesData = ref([]);
const sectorsData = ref([]);
const trainsData = ref([]);
const machinesData = ref([]);
const route = useRoute();
const routeId = computed(() => route.params.id);

const initialData = computed(() => {
    return {
        workerFk: routeId.value,
        numberOfWagons: 2,
        trainFk: 1,
        itemPackingTypeFk: 'H',
        warehouseFk: 60,
        sectorFk: null,
        labelerFk: null,
        linesLimit: 20,
        volumenLimit: 0.5,
        sizeLimit: null,
        isOnReservationMode: 0,
        machineFk: null,
    };
});

async function insert() {
    await axios.post('Operators', initialData.value);
    crudModelRef.value.reload();
}
</script>

<template>
    <QPage class="column items-center q-pa-md centerCard">
        <FetchData url="Trains" @on-fetch="(data) => (trainsData = data)" auto-load />
        <FetchData
            url="ItemPackingTypes"
            @on-fetch="(data) => (itemPackingTypesData = data)"
            auto-load
        />
        <FetchData
            url="Warehouses"
            @on-fetch="(data) => (warehousesData = data)"
            auto-load
        />
        <FetchData url="Printers" @on-fetch="(data) => (PrintersData = data)" auto-load />
        <FetchData url="Sectors" @on-fetch="(data) => (sectorsData = data)" auto-load />
        <FetchData url="Machines" @on-fetch="(data) => (machinesData = data)" auto-load />
        <CrudModel
            data-key="workerOperator"
            url="Operators"
            primary-key="workerFk"
            :filter="{ where: { workerFk: route.params.id } }"
            :data-required="{ workerFk: route.params.id }"
            ref="crudModelRef"
            search-url="operator"
            auto-load
        >
            <template #body="{ rows }">
                <div v-if="rows.length">
                    <QCard
                        flat
                        bordered
                        :key="row.$index"
                        v-for="row of rows"
                        class="card q-px-md q-mb-sm container"
                    >
                        <VnRow>
                            <VnInput
                                :label="t('worker.operator.numberOfWagons')"
                                v-model="row.numberOfWagons"
                            />
                            <VnSelect
                                :label="t('worker.operator.train')"
                                :options="trainsData"
                                hide-selected
                                v-model="row.trainFk"
                            />
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                :label="t('worker.operator.itemPackingType')"
                                :options="itemPackingTypesData"
                                hide-selected
                                option-label="code"
                                option-value="code"
                                v-model="row.itemPackingTypeFk"
                            />
                            <VnSelect
                                :label="t('worker.operator.warehouse')"
                                :options="warehousesData"
                                hide-selected
                                v-model="row.warehouseFk"
                            />
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                :label="t('worker.operator.sector')"
                                :options="sectorsData"
                                hide-selected
                                option-label="description"
                                v-model="row.sectorFk"
                            />
                            <VnSelect
                                :label="t('worker.operator.labeler')"
                                :options="PrintersData"
                                hide-selected
                                option-label="name"
                                v-model="row.labelerFk"
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel
                                                >ID: {{ scope.opt?.id }}</QItemLabel
                                            >
                                            <QItemLabel caption>
                                                {{ scope.opt?.id }},
                                                {{ scope.opt?.name }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelect>
                        </VnRow>
                        <VnRow>
                            <VnInput
                                :label="t('worker.operator.linesLimit')"
                                v-model="row.linesLimit"
                                lazy-rules
                            />
                            <VnInput
                                :label="t('worker.operator.volumeLimit')"
                                v-model="row.volumeLimit"
                                lazy-rules
                            />
                        </VnRow>
                        <VnRow>
                            <VnInput
                                :label="t('worker.operator.sizeLimit')"
                                v-model="row.sizeLimit"
                                lazy-rules
                            />
                            <VnInput
                                :label="t('worker.operator.isOnReservationMode')"
                                v-model="row.isOnReservationMode"
                                lazy-rules
                            />
                        </VnRow>
                        <VnRow>
                            <VnSelect
                                :label="t('worker.operator.machine')"
                                :options="machinesData"
                                hide-selected
                                option-label="plate"
                                v-model="row.machineFk"
                            />
                        </VnRow>
                    </QCard>
                </div>
            </template>
        </CrudModel>
        <QPageSticky position="bottom-right" :offset="[25, 25]">
            <QBtn
                fab
                color="primary"
                icon="add"
                @click="insert()"
                v-if="!crudModelRef?.formData?.length"
            />
        </QPageSticky>
    </QPage>
</template>
<style lang="scss" scoped>
.btn-delete {
    max-width: 4%;
    margin-top: 30px;
}
</style>
<i18n>
es:
    Model: Modelo
    Serial number: Número de serie
    Current SIM: SIM actual
    Add new device: Añadir nuevo dispositivo
    PDA deallocated: PDA desasignada
    Remove PDA: Eliminar PDA
    Do you want to remove this PDA?: ¿Desea eliminar este PDA?
    You can only have one PDA: Solo puedes tener un PDA si no eres autonomo
    This PDA is already assigned to another user: Este PDA ya está asignado a otro usuario
</i18n>
