<!-- Created by henian.xu on 2018/9/11. -->

<template>
    <div class="tinymce-video-upload">
        <el-button
            icon="el-icon-upload"
            size="mini"
            type="primary"
            @click="dialogVisible=true"
        >
            {{ label }}
        </el-button>
        <el-dialog
            :visible.sync="dialogVisible"
            append-to-body
        >
            <upload
                ref="upload"
                :action="action"
                accept="video/*"
                :limit="limit"
                :tips="tips"
                return-files
                :before-upload="beforeUpload"
                v-model="upload"
            />

            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="small"
                    @click="onAddDialogConfirm"
                >
                    {{ $$t('vmf_confirm', '确 定') }}
                </el-button>
                <el-button
                    size="small"
                    @click="onAddDialogCancel"
                >
                    {{ $$t('vmf_cancel', '取 消') }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'TinymceVideoUpload',
    inject: {
        Tinymce: { default: null },
    },
    data() {
        return {
            dialogVisible: false,
            upload: [],
        };
    },
    props: {
        label: {
            type: String,
            default() {
                return this.$$t('vmf_insert_video', '插入视频');
            },
        },
        action: {
            type: String,
            default: '/rpc/comm/rs/attachment/uploadFileLibrary',
        },
        limit: {
            type: Number,
            default: null,
        },
        tips: {
            type: String,
            default: null,
        },
    },
    methods: {
        beforeUpload(file) {
            const _URL = window.URL || window.webkitURL;
            const fileUrl = _URL.createObjectURL(file);
            console.log(fileUrl);
        },
        insertVideo(files) {
            // `<video controls="controls" width="300" height="150"><source src="fsdfs" /></video>`
            if (!this.Tinymce || !this.Tinymce.getTinymceIns) return;
            const tinymceIns = this.Tinymce.getTinymceIns();
            files.forEach(file => {
                tinymceIns.insertContent(
                    `<video controls="controls" width="300" height="150"><source src="${file.src}" /></video>`,
                );
            });
        },
        onAddDialogConfirm() {
            if (!this.$refs.upload.isComplete) {
                this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！');
                return;
            }
            const files = this.upload.reduce((prev, curr) => {
                prev.push({ src: curr.address });
                return prev;
            }, []);
            console.log(files);
            // files.push('//www.tinymce.com/images/glyph-tinymce@2x.png');
            // this.$emit('successCBK', files);
            this.insertVideo(files);
            this.$refs.upload.clear();
            this.dialogVisible = false;
        },
        onAddDialogCancel() {
            this.$refs.upload.clear();
            this.dialogVisible = false;
        },
    },
};
</script>

<style lang="scss">
.tinymce-video-upload {
    display: inline-block;
}
</style>
