<template>
    <span @click="downloadFile">{{ title }}</span>
</template>

<script>
import axios from 'axios';

export default {
    name: 'DownloadLink',
    props: {
        title: {
            type: String,
            required: true,
        },
        hash: {
            type: String,
            required: true,
        },
        extension: {
            type: String,
            required: true,
        },
    },
    methods: {
        async downloadFile() {
            const response = await axios.get(`/files/download/${this.hash}`, {
                responseType: 'blob'
            });
            const blob = new Blob([response.data], { type: response.data.type });
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = `${this.title}${this.extension}`;
            link.click();
            window.URL.revokeObjectURL(link.href);

        },
    },
};
</script>

<style scoped>
span {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}
</style>