<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';
import VnTitle from 'src/components/common/VnTitle.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 = computed(() => {
    return { where: { id: entityId.value } };
});
</script>

<template>
    <CardSummary
        data-key="workerData"
        ref="summary"
        :url="`Workers/summary`"
        :filter="filter"
    >
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
        </template>
        <template #body="{ entity: worker }">
            <QCard class="vn-one">
                <VnTitle
                    :url="workerUrl + `basic-data`"
                    :text="t('worker.summary.basicData')"
                />
                <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 :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :text="t('worker.summary.userData')" />
                <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>
