<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { dashIfEmpty } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';

const route = useRoute();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const entityId = computed(() => $props.id || route.params.id);
const workerUrl = ref();

onMounted(async () => {
    workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
});

const filter = {
    include: [
        {
            relation: 'user',
            scope: {
                fields: ['email', 'name', 'nickname', 'roleFk'],
                include: {
                    relation: 'role',
                    scope: {
                        fields: ['name'],
                    },
                },
            },
        },
        {
            relation: 'department',
            scope: {
                include: {
                    relation: 'department',
                    scope: {
                        fields: ['name'],
                    },
                },
            },
        },
        {
            relation: 'boss',
        },
        {
            relation: 'client',
        },
        {
            relation: 'sip',
        },
    ],
};
</script>

<template>
    <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
        </template>
        <template #body="{ entity: worker }">
            <QCard class="vn-one">
                <a class="header header-link" :href="workerUrl + `basic-data`">
                    {{ t('worker.summary.basicData') }}
                    <QIcon name="open_in_new" />
                </a>
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv
                    :label="t('worker.list.department')"
                    :value="worker.department?.department?.name"
                />
                <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                <VnLv :label="t('worker.summary.boss')" link>
                    <template #value>
                        <VnUserLink
                            v-if="worker.boss"
                            :name="dashIfEmpty(worker.boss?.name)"
                            :worker-id="worker.bossFk"
                        />
                    </template>
                </VnLv>
                <VnLv :value="worker.mobileExtension">
                    <template #label>
                        {{ t('worker.summary.phoneExtension') }}
                        <VnLinkPhone :phone-number="worker.mobileExtension" />
                    </template>
                </VnLv>
                <VnLv :value="worker.phone">
                    <template #label>
                        {{ t('worker.summary.entPhone') }}
                        <VnLinkPhone :phone-number="worker.phone" />
                    </template>
                </VnLv>
                <VnLv :value="worker.client?.phone">
                    <template #label>
                        {{ t('worker.summary.personalPhone') }}
                        <VnLinkPhone :phone-number="worker.client?.phone" />
                    </template>
                </VnLv>
                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
                <div class="header header-link">
                    {{ t('worker.summary.userData') }}
                </div>
                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
                <VnLv :value="worker?.sip?.extension">
                    <template #label>
                        {{ t('worker.summary.sipExtension') }}
                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
                    </template>
                </VnLv>
            </QCard>
        </template>
    </CardSummary>
</template>
