<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 zoneUrl = ref();

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

const filter = computed(() => {
    return { where: { id: entityId.value } };
});
</script>

<template>
    <CardSummary
        data-key="zoneData"
        ref="summary"
        :url="`Zones/summary`"
        :filter="filter"
    >
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
        </template>
        <template #body="{ entity: zone }">
            <QCard class="vn-one">
                <VnTitle
                    :url="zoneUrl + `basic-data`"
                    :text="t('zone.summary.basicData')"
                />
                <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
                <VnLv
                    :label="t('zone.list.department')"
                    :value="zone.department?.department?.name"
                />
                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
                <VnLv :label="t('zone.summary.boss')" link>
                    <template #value>
                        <VnUserLink
                            v-if="zone.boss"
                            :name="dashIfEmpty(zone.boss?.name)"
                            :zone-id="zone.bossFk"
                        />
                    </template>
                </VnLv>
                <VnLv :value="zone.mobileExtension">
                    <template #label>
                        {{ t('zone.summary.phoneExtension') }}
                        <VnLinkPhone :phone-number="zone.mobileExtension" />
                    </template>
                </VnLv>
                <VnLv :value="zone.phone">
                    <template #label>
                        {{ t('zone.summary.entPhone') }}
                        <VnLinkPhone :phone-number="zone.phone" />
                    </template>
                </VnLv>
                <VnLv :label="t('zone.summary.locker')" :value="zone.locker" />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :text="t('zone.summary.userData')" />
                <VnLv :label="t('zone.summary.userId')" :value="zone.user.id" />
                <VnLv :label="t('zone.card.name')" :value="zone.user.nickname" />
                <VnLv :label="t('zone.summary.role')" :value="zone.user.role.name" />
                <VnLv :value="zone?.sip?.extension">
                    <template #label>
                        {{ t('zone.summary.sipExtension') }}
                        <VnLinkPhone :phone-number="zone?.sip?.extension" />
                    </template>
                </VnLv>
            </QCard>
        </template>
    </CardSummary>
</template>
