<script setup>
import axios from 'axios';
import { watch, ref, computed, onUnmounted, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import CrudModel from 'components/CrudModel.vue';
import { useState } from 'src/composables/useState';

import { toDate } from 'src/filters';

const quasar = useQuasar();
const state = useState();
const { t } = useI18n();
const selected = ref([]);
const claimRmaRef = ref();
const claim = computed(() => state.get('ClaimDescriptor'));

const claimRmaFilter = {
    include: {
        relation: 'worker',
        scope: {
            include: {
                relation: 'user',
            },
        },
    },
    order: 'created DESC',
    where: {
        code: claim.value?.rma,
    },
};

async function addRow() {
    if (!claim.value.rma) {
        return quasar.notify({
            message: `This claim is not associated to any RMA`,
            type: 'negative',
        });
    }
    const formData = {
        code: claim.value.rma,
    };

    await axios.post(`ClaimRmas`, formData);
    await claimRmaRef.value.reload();

    quasar.notify({
        type: 'positive',
        message: t('globals.rowAdded'),
        icon: 'check',
    });
}

onMounted(() => {
    if (claim.value) claimRmaRef.value.reload();
});
watch(
    claim,
    () => {
        claimRmaRef.value.reload();
    },
    { deep: true }
);
</script>
<template>
    <div class="column items-center">
        <div class="list">
            <CrudModel
                data-key="ClaimRma"
                url="ClaimRmas"
                model="ClaimRma"
                :filter="claimRmaFilter"
                v-model:selected="selected"
                ref="claimRmaRef"
                :default-save="false"
                :default-reset="false"
                :default-remove="false"
            >
                <template #body="{ rows }">
                    <QCard>
                        <template v-for="(row, index) of rows" :key="row.id">
                            <QItem class="q-pa-none items-start">
                                <QItemSection class="q-pa-md">
                                    <QList>
                                        <QItem class="q-pa-none">
                                            <QItemSection>
                                                <QItemLabel caption>
                                                    {{ t('claim.rma.user') }}
                                                </QItemLabel>
                                                <QItemLabel>
                                                    {{ row?.worker?.user?.name }}
                                                </QItemLabel>
                                            </QItemSection>
                                        </QItem>
                                        <QItem class="q-pa-none">
                                            <QItemSection>
                                                <QItemLabel caption>
                                                    {{ t('claim.rma.created') }}
                                                </QItemLabel>
                                                <QItemLabel>
                                                    {{
                                                        toDate(row.created, {
                                                            timeStyle: 'medium',
                                                        })
                                                    }}
                                                </QItemLabel>
                                            </QItemSection>
                                        </QItem>
                                    </QList>
                                </QItemSection>
                                <QCardActions vertical class="justify-between">
                                    <QBtn
                                        flat
                                        round
                                        color="orange"
                                        icon="vn:bin"
                                        @click="claimRmaRef.remove([row])"
                                    >
                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
                                    </QBtn>
                                </QCardActions>
                            </QItem>
                            <QSeparator v-if="index !== rows.length - 1" />
                        </template>
                    </QCard>
                </template>
            </CrudModel>
        </div>
    </div>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn fab color="primary" icon="add" @click="addRow()" />
    </QPageSticky>
</template>

<style lang="scss" scoped>
.list {
    width: 100%;
    max-width: 60em;
}
</style>

<i18n>
es:
    This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
</i18n>
