<template>
    <div v-if="!initialized">{{ $__("Loading") }}</div>
    <div v-else-if="resource" id="eholdings_resources_show">
        <h2>
            {{ $__("Resource #%s").format(resource.resource_id) }}
        </h2>
        <div>
            <fieldset class="rows">
                <legend>{{ $__("Resource information") }}</legend>
                <ol>
                    <li v-if="resource.resource_id">
                        <label>{{ $__("Resource identifier") }}:</label>
                        <span>
                            {{ resource.resource_id }}
                        </span>
                    </li>
                    <li>
                        <label>{{ $__("Publication title") }}:</label>
                        <span
                            ><router-link
                                :to="{
                                    name: 'EHoldingsLocalTitlesShow',
                                    params: { title_id: resource.title_id },
                                }"
                                >{{
                                    resource.title.publication_title
                                }}</router-link
                            ></span
                        >
                    </li>
                    <li>
                        <label>{{ $__("Publisher name") }}:</label>
                        <span>
                            {{ resource.title.publisher_name }}
                        </span>
                    </li>
                    <li>
                        <label>{{ $__("Publication type") }}:</label>
                        <span>
                            {{ resource.title.publication_type }}
                        </span>
                    </li>
                    <li v-if="resource.title.print_identifier">
                        <label>{{ $__("Print-format identifier") }}:</label>
                        <span>
                            {{ resource.title.print_identifier }}
                        </span>
                    </li>
                    <li v-if="resource.title.online_identifier">
                        <label>{{ $__("Online-format identifier") }}:</label>
                        <span>
                            {{ resource.title.online_identifier }}
                        </span>
                    </li>
                </ol>
            </fieldset>

            <fieldset class="rows">
                <ol>
                    <li>
                        <label>{{ $__("Package") }}:</label>
                        <span
                            ><router-link
                                :to="{
                                    name: 'EHoldingsLocalPackagesShow',
                                    params: { package_id: resource.package_id },
                                }"
                                >{{ resource.package.name }}</router-link
                            ></span
                        >
                    </li>

                    <li>
                        <label>{{ $__("Vendor") }}:</label>
                        <span v-if="resource.vendor">
                            {{ resource.vendor.name }}
                        </span>
                    </li>
                    <li v-if="resource.package.content_type">
                        <label>{{ $__("Package content type") }}:</label>
                        <span>{{ resource.package.content_type }}</span>
                    </li>
                </ol>
            </fieldset>

            <fieldset class="rows">
                <legend>Resource settings</legend>
                <ol>
                    <li>
                        <label>{{ $__("Coverage dates") }}:</label>
                        <span
                            >{{ format_date(resource.started_on) }}-{{
                                format_date(resource.ended_on)
                            }}</span
                        >
                    </li>
                </ol>
            </fieldset>
        </div>
    </div>
</template>

<script>
import { APIClient } from "../../fetch/api-client.js";
import { ref, onBeforeMount } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";

export default {
    setup() {
        const route = useRoute();
        const format_date = $date;

        const resource = ref({
            resource_id: null,
            title_id: null,
            package_id: null,
            started_on: "",
            ended_on: "",
            proxy: "",
            title: {},
            package: {},
        });
        const initialized = ref(false);

        const getResource = resource_id => {
            const client = APIClient.erm;
            client.localResources.get(resource_id).then(
                result => {
                    resource.value = result;
                    initialized.value = true;
                },
                error => {}
            );
        };

        onBeforeMount(() => {
            getResource(route.params.resource_id);
        });
        onBeforeRouteUpdate((to, from) => {
            resource.value = getResource(to.params.resource_id);
        });

        return {
            format_date,
            resource,
            initialized,
        };
    },
    name: "EHoldingsLocalResourcesShow",
};
</script>
<style scoped>
fieldset.rows label {
    width: 25rem;
}
</style>
