<!-- 视频上传组件 -->
<template>
    <div style="position: relative; width: 360px; height: 80px;">
        <el-upload style="height: 100px;" :data="uploadData" :action="uploadUrl" drag accept=".mp3" :show-file-list="false" :on-success="handleUploadSuccess">
            <!-- 上传提示 -->
            <i v-show="!audioUrl" class="el-icon-upload"></i>
            <div v-show="!audioUrl" class="el-upload__text">将MP3文件拖到此处，或<em>点击上传</em></div>

            <!-- 音频预览 -->
            <div v-if="audioUrl" >
                <audio :src="audioUrl" controls></audio>
            </div>
        </el-upload>

        <!-- 下载 删除按钮 -->
        <div v-if="audioUrl" 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="deleteAudio"></el-button>
        </div>
    </div>
</template>

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

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

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

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

        async download() {
            const url = this.audioUrl
            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: '下载失败'
                });
            }
        },


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

    },

}
</script>

<style scoped>
::v-deep .el-upload {
    height: 80px;
}

::v-deep .el-upload-dragger {
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* background-color: #f7f7f7; */
    color: #8c939d;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep .el-icon-upload {
    font-size: 36px;
    color: #c0c4cc;
    margin: 0 10px;
}

.buttons {
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}

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