<template>
    <div>
        <div id="list">
            <!-- Le tableau est TOUJOURS rendu (meme liste vide) : un import qui
                 passe la liste de 0 a 1 ne fait qu'ajouter une ligne a un tableau
                 deja present (comme la duplication), ce qui evite un rendu
                 incoherent du tableau cree dynamiquement. -->
            <table>
                <thead>
                    <tr>
                        <th>{{ messages.get('importexport', 'ie_conv_name') }}</th>
                        <th>{{ messages.get('importexport', 'ie_conv_comment') }}</th>
                        <th>{{ messages.get('importexport', 'ie_actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(conv, index) in list" :key="conv.id">
                        <td>{{ conv.conversionName }}</td>
                        <td>{{ conv.conversionComment }}</td>
                        <td>
                            <button type="button" class="bouton"
                                @click="edit(conv.id)">{{ messages.get('common', 'edit') }}</button>
                            <button type="button" class="bouton"
                                @click="duplicate(conv.id)">{{ messages.get('common', 'common_duplicate') }}</button>
                            <button type="button" class="bouton"
                                @click="exportConversion(conv.id)">{{ messages.get('importexport', 'ie_conv_export') }}</button>
                            <button type="button" class="bouton"
                                @click="remove(conv.id, index)">{{ messages.get('common', 'remove') }}</button>
                        </td>
                    </tr>
                    <tr v-if="!list || !list.length">
                        <td colspan="3" class="ie-conv-empty">{{ messages.get('importexport', 'ie_conv_list_empty') }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="add" class="ie-flex ie-list-actions">
            <button type="button" class="bouton" @click="triggerImport()">{{ messages.get('importexport', 'ie_conv_import') }}</button>
            <button type="button" class="bouton" @click="add()">{{ messages.get('importexport', 'ie_conv_add') }}</button>
            <!-- Input fichier cache : declenche par le bouton Importer (pas de drag and drop). -->
            <input ref="importInput" type="file" accept=".cv" style="display:none" @change="importConversion">
        </div>
    </div>
</template>

<script>
/**
 * Liste des conversions definies : edition, duplication, suppression, ajout,
 * export et import en fichier .cv (conversion + structure(s) de donnees liee(s)).
 */
export default {
    props: {
        list: { type: Array, default: () => [] }
    },
    methods: {
        add() {
            document.location = "./import_export.php?categ=conversions&action=edit";
        },
        /**
         * Telecharge le fichier .cv de la conversion (lien direct vers l'export).
         *
         * @param {number} id
         */
        exportConversion(id) {
            window.location = this.ws.url + "conversions/export/" + id;
        },
        /**
         * Ouvre le selecteur de fichier .cv (bouton Importer).
         */
        triggerImport() {
            this.$refs.importInput.value = "";
            this.$refs.importInput.click();
        },
        /**
         * Lit le fichier .cv choisi et l'envoie a l'import ; ajoute la conversion
         * importee a la liste en cas de succes.
         *
         * @param {Event} event
         */
        async importConversion(event) {
            const file = event.target.files[0];
            if (!file) {
                return;
            }
            const reader = new FileReader();
            reader.onload = async (e) => {
                const content = e.target.result;
                const res = await this.ws.post("conversions", "import", { content });
                if (res && !res.error && res.conversion) {
                    this.$set(this.list, this.list.length, res.conversion);
                    this.notif.info(this.messages.get("importexport", "ie_conv_import_success"));
                } else {
                    this.notif.error(this.messages.get("importexport", "ie_conv_import_error"));
                }
            };
            reader.readAsText(file);
        },
        edit(id) {
            document.location = "./import_export.php?categ=conversions&action=edit&id=" + id;
        },
        async duplicate(id) {
            let copy = await this.ws.post("conversions", "duplicate", { id });
            if (copy && !copy.error) {
                this.$set(this.list, this.list.length, copy);
            }
        },
        async remove(id, index) {
            if (confirm(this.messages.get("importexport", "ie_conv_remove_confirm"))) {
                let res = await this.ws.post("conversions", "remove", { id });
                if (res && !res.error) {
                    this.$delete(this.list, index);
                } else {
                    this.notif.error(this.messages.get("common", "failed_delete"));
                }
            }
        }
    }
};
</script>
