<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { getDifferences, getUpdatedValues } from 'src/filters';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';

const route = useRoute();
const { t } = useI18n();
const workersOptions = ref([]);

function onBeforeSave(formData, originalData) {
    return getUpdatedValues(
        Object.keys(getDifferences(formData, originalData)),
        formData,
    );
}
</script>
<template>
    <FetchData
        url="Workers/activeWithInheritedRole"
        :filter="{ where: { role: 'salesPerson' } }"
        @on-fetch="(data) => (workersOptions = data)"
        auto-load
    />
    <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
    <FormModel
        model="Claim"
        :go-to="`/claim/${route.params.id}/notes`"
        :url-update="`Claims/updateClaim/${route.params.id}`"
        :mapper="onBeforeSave"
        auto-load
    >
        <template #form="{ data, validate }">
            <VnRow>
                <VnInput
                    v-model="data.client.name"
                    :label="t('claim.customer')"
                    disable
                />
                <VnInputDate v-model="data.created" :label="t('claim.created')" />
            </VnRow>
            <VnRow>
                <VnSelect
                    :label="t('claim.attendedBy')"
                    v-model="data.workerFk"
                    :options="workersOptions"
                    option-value="id"
                    option-label="name"
                    emit-value
                    auto-load
                    :rules="validate('claim.claimStateFk')"
                >
                    <template #before>
                        <VnAvatar
                            :worker-id="data.workerFk"
                            size="md"
                            :title="
                                workersOptions.find(({ id }) => id == data.workerFk)?.name
                            "
                            color="primary"
                        />
                    </template>
                </VnSelect>
                <VnSelect
                    v-model="data.claimStateFk"
                    url="ClaimStates"
                    :label="t('claim.state')"
                    option-label="description"
                    :rules="validate('claim.claimStateFk')"
                    :input-debounce="0"
                />
            </VnRow>
            <VnRow>
                <QInput
                    v-model.number="data.packages"
                    :label="t('globals.packages')"
                    :rules="validate('claim.packages')"
                    type="number"
                />
                <VnSelectEnum
                    v-model="data.pickup"
                    :label="t('claim.pickup')"
                    table="claim"
                    column="pickup"
                    option-label="description"
                    :translation="(value) => t(`claim.${value}`)"
                    :default-options="[{ id: null, description: t('claim.null') }]"
                />
            </VnRow>
        </template>
    </FormModel>
</template>
