<!-- 视频上传组件 -->
<template>
    <div style="position: relative; width: 360px; height: 180px;">
        <el-upload :data="uploadData" :action="uploadUrl" drag accept=".png,.jpg,.jpeg,.bmp,.gif" :show-file-list="false" :on-success="handleUploadSuccess">
            <!-- 上传提示 -->
            <i v-show="!imageUrl" class="el-icon-upload"></i>
            <div v-show="!imageUrl" class="el-upload__text">将文件拖到此处，或<em>点击上传</em><br/><span style="font-size: 14px;">只能上传 <strong>jpg、png、jpeg、gif、bmp</strong> 文件</span></div>

            <!-- 预览图片 -->
            <div v-if="imageUrl" style="width: 100%; height: 100%;">
                <el-image style="width: 100%; height: 100%" :src="imageUrl" fit="contain"></el-image>
            </div>
        </el-upload>

        <!-- 下载 删除按钮 -->
        <el-button-group v-if="imageUrl" class="buttons">
            <el-button type="ghost" size="mini" icon="el-icon-download" @click="download"></el-button>
            <el-button type="ghost" size="mini" icon="el-icon-delete" @click="deleteImg"></el-button>
        </el-button-group>
            
    </div>
</template>

<script>
import SparkMD5 from 'spark-md5';

export default {
    name: 'ImageUploader',
    props: {
        value: {
            type: String,
            default: ''
        },
    },
    watch: {
        value: function (val, oldVal) {
            this.imageUrl = val
        }
    },
    data() {
        return {
            // 上传地址
            uploadUrl: "",
            // 上传附带的DATA
            uploadData: "",
            // 图片地址
            imageUrl: "",
        }
    },

    created() {
        // 获取上传地址
        this.uploadUrl = window.courseware.uploadUrl();
        this.uploadData = window.courseware.uploadData();
        window['air'].getUploadCallback = (url, data) => {
            this.uploadUrl = url;
            this.uploadData = data;
        };
        this.imageUrl = this.value;
    },

    methods: {
        handleUploadSuccess(e) {
            this.imageUrl = e.url;
            this.$emit("input", this.imageUrl);
            this.$emit('change', { url: this.imageUrl});
        },

        async download() {
            const url = this.imageUrl
            const fileName = url.split('/').pop()
            const response = await fetch(url) //发送GET请求
            if (response.ok) {
                const blob = await response.blob() //获取Blob对象
                const url = window.URL.createObjectURL(blob) //创建Blob对象的URL
                const link = document.createElement('a') //创建一个新的<a>元素
                link.href = url //设置<a>元素的href属性为Blob对象的URL
                link.download = fileName //设置下载文件的文件名
                document.body.appendChild(link) //将<a>元素添加到文档中
                link.click() //模拟点击<a>元素以触发文件下载
                this.$message({
                    type: 'success',
                    message: '下载完成'
                });
            } else {
                //处理API响应失败的情况，例如显示错误消息
                this.$message({
                    type: 'error',
                    message: '下载失败'
                });
            }
        },


        deleteImg() {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.imageUrl = "";
                this.$emit("input", "");
                this.$emit('change', { url: this.imageUrl});
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },

    },

}
</script>

<style scoped>
.buttons {
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}

.buttons .el-button {
    padding: 4px 12px;
    font-size: 18px;
    margin: 0;
    border-radius: initial;
}
</style>