<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.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 departmentUrl = ref();

onMounted(async () => {
    departmentUrl.value = (await getUrl('')) + `departments/${entityId.value}/`;
});
</script>

<template>
    <CardSummary
        data-key="DepartmentSummary"
        ref="summary"
        :url="`Departments/${entityId}`"
        class="full-width"
        style="max-width: 900px"
        module-name="Department"
    >
        <template #header="{ entity }">
            <div>{{ entity.name }}</div>
        </template>
        <template #body="{ entity: department }">
            <QCard class="column">
                <VnTitle
                    :url="`#/department/department/${entityId}/basic-data`"
                    :text="t('Basic data')"
                />
                <div class="full-width row wrap justify-between content-between">
                    <div class="column" style="min-width: 50%">
                        <VnLv
                            :label="t('department.name')"
                            :value="department.name"
                            dash
                        />
                        <VnLv
                            :label="t('department.code')"
                            :value="department.code"
                            dash
                        />
                        <VnLv
                            :label="t('department.chat')"
                            :value="department.chatName"
                            dash
                        />
                        <VnLv
                            :label="t('department.bossDepartment')"
                            :value="department.worker?.user?.name"
                            dash
                        />
                        <VnLv
                            :label="t('department.email')"
                            :value="department.notificationEmail"
                            dash
                        />
                        <VnLv
                            :label="t('department.selfConsumptionCustomer')"
                            :value="department.client?.name"
                            dash
                        />
                    </div>
                    <div class="column" style="min-width: 50%">
                        <VnLv
                            :label="t('department.telework')"
                            :value="department.isTeleworking"
                            dash
                        />
                        <VnLv
                            :label="t('department.notifyOnErrors')"
                            :value="Boolean(department.hasToMistake)"
                            dash
                        />
                        <VnLv
                            :label="t('department.worksInProduction')"
                            :value="department.isProduction"
                            dash
                        />
                        <VnLv
                            :label="t('department.hasToRefill')"
                            :value="department.hasToRefill"
                            dash
                        />
                        <VnLv
                            :label="t('department.hasToSendMail')"
                            :value="department.hasToSendMail"
                            dash
                        />
                    </div>
                </div>
            </QCard>
        </template>
    </CardSummary>
</template>
