<!-- +-------------------------------------------------+
 - © 2002-2004 PMB Services / www.sigb.net pmb@sigb.net et contributeurs (voir www.sigb.net)
 - +-------------------------------------------------+
 - $Id: StepAmorce.vue,v 1.1 2026/07/21 gneveu Exp $
-->
<template>
    <div class="prefillingform-panel-step">
        <div class="prefillingform-step-profil-recap">
            <span>{{ messages.get('prefillingform_panel', 'prefillingform_panel_profil_label') }} : {{ profilName }}</span>
            <a href="#" @click.prevent="$emit('change-profil')">{{ messages.get('prefillingform_panel', 'prefillingform_panel_change_profil') }}</a>
        </div>

        <div class="prefillingform-panel-amorce-card" v-if="isbnUsed">
            <label for="prefillingformIsbn">{{ messages.get('prefillingform_panel', 'prefillingform_panel_isbn_label') }}</label>
            <input type="text" id="prefillingformIsbn" :value="isbn" @input="$emit('update:isbn', $event.target.value)" />
            <span class="prefillingform-note" v-if="isbnFeeds">
                {{ messages.get('prefillingform_panel', 'prefillingform_panel_feeds_prefix') }} {{ isbnFeeds }}
            </span>
        </div>

        <div class="prefillingform-panel-amorce-card" v-if="arkUsed">
            <label for="prefillingformArk">{{ messages.get('prefillingform_panel', 'prefillingform_panel_ark_label') }}</label>
            <input type="text" id="prefillingformArk" :value="ark" @input="$emit('update:ark', $event.target.value)" />
            <span class="prefillingform-note">{{ messages.get('prefillingform_panel', 'prefillingform_panel_ark_note') }}</span>
        </div>

        <div class="prefillingform-panel-amorce-card" v-if="rmcUsed">
            <rmcfield :data="rmc" @update="$emit('update:rmc', $event)"></rmcfield>
        </div>

        <docdrop v-if="docextractSources.length" :docs="docs" :docextract-sources="docextractSources"
            @add="$emit('doc-add', $event)" @remove="$emit('doc-remove', $event)" @assign="onDocAssign"></docdrop>

        <sourceavailability :items="availability"></sourceavailability>

        <div class="prefillingform-actions">
            <input type="button" class="bouton" :disabled="!readyCount" @click="$emit('query')" :value="queryLabel" />
        </div>
        <p class="prefillingform-note" v-if="!readyCount">
            {{ messages.get('prefillingform_panel', 'prefillingform_panel_query_disabled') }}
        </p>
        <p class="prefillingform-note" v-else>
            {{ messages.get('prefillingform_panel', 'prefillingform_panel_query_help') }}
        </p>
    </div>
</template>

<script>
import sourceavailability from "./SourceAvailability.vue";
import docdrop from "./DocDrop.vue";
import rmcfield from "./RmcField.vue";

export default {
    components: { sourceavailability, docdrop, rmcfield },
    props: {
        profilName: {
            type: String,
            default: '',
        },
        isbn: {
            type: String,
            default: '',
        },
        ark: {
            type: String,
            default: '',
        },
        isbnFeeds: {
            type: String,
            default: '',
        },
        docs: {
            type: Array,
            default: () => [],
        },
        docextractSources: {
            type: Array,
            default: () => [],
        },
        availability: {
            type: Array,
            default: () => [],
        },
        readyCount: {
            type: Number,
            default: 0,
        },
        arkUsed: {
            type: Boolean,
            default: false,
        },
        rmc: {
            type: Object,
            default: () => ({ search: '', human_query: '' }),
        },
        rmcUsed: {
            type: Boolean,
            default: false,
        },
        isbnUsed: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        queryLabel: function () {
            return this.messages.get('prefillingform_panel', 'prefillingform_panel_query_button').replace('{n}', this.readyCount);
        },
    },
    methods: {
        onDocAssign: function (id, sourceId) {
            this.$emit('doc-assign', id, sourceId);
        },
    },
};
</script>
