<template>
    <ap-container>
        <ap-main margin="1111">
            <ap-upload ref="uploadRef" :options="uploadOpt">
                <el-button type="primary">上传视频</el-button>
            </ap-upload>
            <div v-if="uploading" class="ap-color-red" style="margin-top: 10px;">
                {{msg}}
            </div>
            <div v-else>
                <div style="margin-top: 10px;">
                    视频地址：{{previewUrl}}
                </div>
                <div>
                    <video width="300" height="200" controls>
                        <source :src="previewUrl" type="video/mp4">
                    </video>
                </div>
            </div>

        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysRichTextVideo',
    data() {
        let paramsStr = localStorage.getItem("SysVideoParam");
        let params = {};
        if (paramsStr != null && paramsStr != "") {
            params = JSON.parse(paramsStr);
        }
        return {
            uploading: true,
            msg: "请选择视频",
            previewUrl: "",
            uploadOpt: {
                accept: ".mp4",
                action: "/apm/SysVideo/uploadForRichText",
                data: () => {
                    return params;
                },
                onSuccess: (response, file, fileList) => {
                    this.msg = "上传成功";
                    this.uploading = false;
                    console.log("上传文件地址：" + response.data)
                    this.previewUrl = this.$env.FS_URL + response.data;
                    localStorage.setItem("RichTextVideoURL",  this.previewUrl);
                    this.$message.success('上传成功！')
                },
                onError: (response, file, fileList) => {
                    this.msg = "上传失败";
                    this.previewUrl = "";
                    localStorage.setItem("RichTextVideoURL", "");
                    this.$message.error('上传失败！')
                },
                onProgress: (event, file, fileList) => {
                    this.msg = "文件上传中..."
                },
            },
        }
    },
    mounted() {
        localStorage.setItem("RichTextVideoURL", "");
    },
    methods: {
    }
}
</script>

<style scoped>
</style>
